css那些事兒3 列表與浮動

標籤：對象   圖片   下拉式功能表   分離   序列   strong   使用   組成   內容   

一  列表

列表預設為行內塊元素，具有寬高，當一個非塊元素是無法應用寬高的，比如a

1 有序列表

有ol li組成，其中li為清單項目，列表的ol子項目務必為li元素標籤，li子內容支援列表任意嵌套，有序列表常常會顯示1,2,3按照升序或者降序方式的序號，該序號通過list-style-type指定

 

2 無需列表

與有序列表差異在於有無順序上，至於顯示樣式上則通過css進行相應設定

 

3 自訂欄表

dl，dt，dd，dt常常代表一個清單項目的標題，而dd代表該標題對應的詳情的意思

 

4 列表常用語下拉式功能表，選項卡，圖片輪播等組件的基礎，可以說列表應用是非常廣泛的

 

二 浮動

1 浮動

可以簡單理解為將元素標籤向左或向右置放位置，浮動會打破文檔布局流，不受容器控制

2 清除浮動

2.1 在浮動元素標籤後面的相鄰標籤設定css屬性clear：both來清除前面的浮動

這種方式增加了元素標籤

2.2 使用br標籤的屬性clear=“all”來清除浮動，同樣的道理也增加了文件項目標籤，不利於css設定分離和後期維護

2.3 將容器的顯示方式設定為table，如display：table；這種方式由於存在瀏覽器差異性非常明顯，是一種比較差的清除方式

2.4 在容器標籤應用類，如div_clear{clear:both},這種在不改變文檔結構的情況下附加清除浮動，但是對於子標籤不再使用浮動時候顯得有一點多餘

2.5 使用偽對象：after；是一種比較好的方式，如 div:after{display:block;visiablity:hidden;content:"";line-height:0;font-size:0;clear:both}。使用偽對象在浮動元素後面應用清除浮動是一種比較可選用的方式

 

css那些事兒3 列表與浮動