display屬性

block: 塊級元素

inline: 行級(內聯)元素

inline-block: 行內塊元素,既在同一行內呈現,也能設定width,height

none: 隱藏元素

float屬性

float: left | right | none;

float可以讓上下排列的塊元素左右排列.

浮動元素脫離了標準文件流, 它的高度不會把其父元素撐高, 這稱為邊框塌陷.

解決方案:

1. 強行設定父元素高度

2. 給父元素設定overflow:hidden

3. 在最後一個浮動元素後新增一個空元素, 設定clear:both

4. 利用after偽類:

.clearfix:after{

content:""; //在末尾追加一個空文字元素

display:block; //呈現為塊級,像個div一樣

clear:both; // 清除浮動

}

overflow屬性

處理溢位

overflow: visible(顯示) | hidden(隱藏) | auto(按需顯示滾動條) | scroll(強制顯示滾動條)

DIV + CSS佈局

大事化小

先行後列

見縫插針

行列程式碼模板:

<div> ----------------- 行, 應用clearfix

<div>第1列</div> -- 列, 應用float

<div>第2列</div>

</div>