盒模型與佈局相關屬性

 盒模型與佈局相關屬性

1.佈局相關屬性　　

　　全部與佈局相關的屬性以下：

　　float：該屬性控制組件是否符合浮動；以及如何實現浮動，該屬性能夠設置爲left，right。來控制向　　　　哪裏浮動；（經過float能夠實現多欄佈局）

　　clear：該屬性與float相反，該屬性能夠設置爲none，left，right，both。（經過clear能夠實現換

　　　　　　行）

　　　　none：兩邊都容許出現浮動組件；

　　　　left：不容許左邊出現浮動組件；

　　　　right：不容許右邊出現浮動組件；

　　　　both：兩邊均布容許出現浮動組件；

　　clip：該屬性用於對元素進行裁剪，能夠設置爲auto與rect兩個值，auto是自動進行的，而rect是將　　　　元素當成一個矩形進行分割；

　　　　rect（A B C D)其中A是上邊界相對於父元素的上邊界的距離，B是右邊界相對於父元素的左邊

　　　　　　界的距離，C是下邊界相對於父元素的上邊界的距離，D是左邊界相對於父元素的左邊界的

　　　　　　距離；

　　overflow：當組件不足以顯示內容時，經過設置overflow能夠進行對內容進行控制，能夠設置爲：

　　　　visible：既不剪切也不添加滾動條，這是默認值；

　　　　auto：屬性將制定自動添加滾動條；

　　　　hidden：屬性將自動裁剪不夠顯示的內容；

　　　　scroll：將老是顯示滾動條；

　　　　overlow-x：經過設置hidden將只顯示豎直反向的滾動條；

　　　　overflow-y：經過設置hidden將只顯示水平方向的滾動條；

　　　　visibility：設置爲hidden後將再也不顯示出來，可是空間仍是保留着；

　　　　display：設置爲hidden後將再也不顯示，並且空間也將被佔據；

2.盒模型與display屬性

　　兩種基本的盒模型

　　　　inline：該元素不會佔據一行，沒有寬度與高度，例如<span../>與<a../>;

　　　　block：該元素能夠設置高度與寬度，例如<div../>與<p../>

　　display:

　　　　　　none:與visibility類似，當設置爲none時，能夠將將其隱藏，可是空間將被佔據；

　　　　　　inline-block：是inline與block的綜合體，既不會佔據一行，還能夠設置寬度與高度；

　　　　　　inline-table：默認佔據一行，可是能夠設置高度與寬度；

　　　　　　與表格相關的盒模型：

　　　　　　　　table：組件將顯示爲表格；

　　　　　　　　table-caption：組件將顯示爲表格的標題；

　　　　　　　　table-cell組件將顯示爲單元格；

　　　　　　　　table-column（-group）組件將顯示爲單元格列（組）；

　　　　　　　　table-row（-group）組件將顯示爲單元格的行（組）；

　　　　　　　　table-header：組件將顯示爲單元格的表頭；

　　　　　　　　table-footer：組件將顯示爲單元格的頁腳；

　　　　　　list-item：該模型將會將組件顯示爲相似於<ul../>的列表形式；

　　　　　　run-in盒模型：組件將顯示在它 後面的元素中；

　　　　　　box：將實現多欄佈局

　　　　　　　　box-orient：設置對齊方式，能夠設置爲horizontal與vertical；

　　　　　　　　box-ordinal-grup：子元素的顯示順序；

　　　　　　　　box-flex：設置子元素的自適應寬度的比例；　　

3.對盒模型添加陰影

　　box-shadow它將包含5個值，分別是：

　　　　hOffset：水平方向的偏移；

　　　　vOffset：豎直方向的偏移；

　　　　blurLength：控制陰影的模糊程度；

　　　　scaleLengt：控制陰影的縮放程度；設置爲正數則是放大，設置爲負數則是縮小；

　　　　color：控制陰影的顏色；

4.css3的多欄功能

　　column涉及到幾個屬性

　　　　column-width：欄目寬度；

　　　　column-count：欄目數；

　　　　column-rule-(width/style/color)：指定欄目的分隔條的寬度，線型，顏色；

　　　　column-gap：指定欄目間的間距；

　　　　column-fill：控制欄目的高度

　　　　　　auto：自動隨內容變化；

　　　　　　balance：自動與最多的一列對齊；