布局與定位
-
頁面的布局
一.流
1.塊元素從上往下流，個元素之間有一個換行。每個元素默認占瀏覽器整個寬度；內(nèi)聯(lián)元素在水平方向互相挨著，總體上從左上方流向右下方。
2.并排放置內(nèi)聯(lián)元素：左元素外邊距10px，右元素外邊距10px，兩個元素之間會有20px的空間；上下放置兩個塊元素。他們共同的外邊距會折疊在一起，兩個邊框的距離為最大的外邊距高度。
3.浮動元素（float）：置于塊元素上方，不影響正常的頁面流動。但內(nèi)聯(lián)內(nèi)容會考慮浮動元素的邊界，圍繞著這個浮動元素。（必須指定特定的高度）
4.元素clear屬性指定其左邊或右邊不能有浮動元素。
二.布局
-
流體布局
拓展瀏覽器窗口，頁面內(nèi)容會拓展以適應(yīng)頁面。
-
凍結(jié)布局
內(nèi)容寬度固定。調(diào)整屏幕大小，設(shè)計不變。示例如下：
HTML文件中：
<body>
<div id="allcontent">
.........
</div>
</body>
CSS文件中：
#allcontent{
width:800px;
...
}
-
凝膠布局
內(nèi)容寬度固定，但外邊距隨瀏覽器窗口擴展，且通常把內(nèi)容放在中央，更加美觀。
-
表格顯示布局
將元素置于表格當中。示例如下：
HTML文件：
...
<div id="tablecontainer"> //表格div
<div id="tablerow"> //第一行div，里面包含firstcol和secondcol兩列兩個元素
<div id="firstcol"> //第一個元素
...
</div>
<div id="secondcol"> //第二個元素
...
</div>
</div>
...
</div>
CSS文件中：
#tablecontainer{
display:table; //這是表格布局
border-spacing: 10px; //單元格邊框邊距，不需要元素外邊距
}
#tablerow{
display:table-row; //這是表格的一行
}
#main{
vertical-align: top; //單元格中的內(nèi)容相對于單元格上邊對齊
display: table-cell; //這是一個單元表格里的元素
...
}
#secondcol{
vertical-align: top;
display: table-cell;
...
}
-
元素的定位
四種定位方式：static,absolute,fixed,relative
-
靜態(tài)定位（static）
默認方式，將元素置于正常流中。
-
絕對定位（absolute）
置于頁面任何位置，相對頁面邊界放置。并不置于流中
#unix{
position:absolute;
top:150px;
left:100px;
width:400px;
}
-
固定定位（fixed）
相對瀏覽器窗口定位，頁面滾動，固定定位的元素位置不變。
#unix{
position:fixed;
top:150px;
left:100px; (可以為負值)
width:400px;
}
-
相對定位（relative）
