最近看了一篇文章第岖，布局的概念講的還是很清楚劣摇，但是里面使用的布局方式讓我眼前一亮刷后，同樣是實(shí)現(xiàn)兩欄和三欄的布局吃靠，他使用的技術(shù)就是普通的float和position定位硫眨，用了挺少的代碼就實(shí)現(xiàn)了學(xué)了很久的布局。這個(gè)是連接 CSS布局說——可能是最全的 巢块。
position的一些屬性
上篇文章沒講清楚幾個(gè)點(diǎn)礁阁，就是position的幾個(gè)屬性。
- relative
- absolute
absolute
生成絕對(duì)定位的元素族奢，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位姥闭。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
如果一個(gè)元素越走，它的position值是absolute的話棚品，它在計(jì)算定位點(diǎn)的時(shí)候，首先會(huì)去向上找它的父級(jí)元素廊敌，直到找到父級(jí)元素的position值不是static的铜跑，從這個(gè)元素的區(qū)域內(nèi)開始計(jì)算定位點(diǎn)。如果沒有找到骡澈。那就去body為計(jì)算點(diǎn)锅纺。
relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位秧廉。
所謂的正常元素伞广，就是它的父級(jí)。疼电。嚼锄。。蔽豺。它和absolute的區(qū)別就是区丑，它就直接找它的父級(jí)定位。
relative
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位沧侥。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定可霎。
這個(gè)尼瑪就相對(duì)于視窗，就是瀏覽器的窗口進(jìn)行定位了宴杀。癣朗。。旺罢。很gay旷余。它就算被包在relative的div中，超出這個(gè)區(qū)域也會(huì)顯示扁达，就相當(dāng)于和它所有的父級(jí)都沒什么關(guān)系了正卧，只受瀏覽器的窗口控制。
sticky
這個(gè)是css3新增的屬性跪解，他就是relative和fixed的結(jié)合體炉旷， 它有fixed的特性，但是他可以被限定在父級(jí)元素的區(qū)域框內(nèi)叉讥。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div style="position: relative; height: 500px; width: 500px; background-color:antiquewhite; margin-bottom: 500px">
<div style="position: sticky; height: 50px; width: 50px;background-color:red; top: 20px" ></div>
</div>
</body>
</html>
用flex實(shí)現(xiàn)布局
雖然說鏈接里的文章用的布局方式可以說是很簡(jiǎn)單了窘行，但是因?yàn)橛幸苿?dòng)端的存在，這樣的布局就不太適用了节吮，而flex布局就很適合移動(dòng)端抽高，所以，我們?nèi)绻婚_始就使用flex的布局不就好了透绩？
兩欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兩欄布局</title>
<style>
.cointainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftLayout {
width: 200px;
height: 600px;
background: red;
text-align: center;
line-height: 600px;
color: #fff;
}
.content {
width:100%;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="cointainer">
<div class="leftLayout">側(cè)邊欄</div>
<div class="content">內(nèi)容</div>
</div>
</body>
</html>
三欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兩欄布局</title>
<style>
.cointainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftLayout {
width: 200px;
height: 600px;
background: red;
text-align: center;
line-height: 600px;
color: #fff;
}
.content {
width:80%;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
.asideLayout {
width:20%;
height: 600px;
background:green;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="cointainer">
<div class="leftLayout">側(cè)邊欄</div>
<div class="content">內(nèi)容</div>
<div class="asideLayout">第三欄</div>
</div>
</body>
</html>
