網頁布局方案

標籤：zoom   表格   splay   內容   fixed   col   index   排列   解決方案   

一、float
想瞭解浮動嗎？請看這裡

二、position

有4個值，分別是absolute，fixed，relative，static。
1、absolute
絕對位置，相對於static定位以外的第一個父元素進行定位。脫離文檔流，並且不佔據原本的空間，後面的元素會頂替上去。
元素的位置通過"left"，"top"，"right"，"bottom"屬性進行位移。
2、fixed
固定定位，相對於瀏覽器視窗進行定位。
元素的位置通過"left"，"top"，"right"，"bottom"屬性進行位移。
3、relative
相對定位，相對於正常位置（原先本身位置）進行定位。原本的空間也佔據著，下面的元素並不會頂替上去。
元素的位置通過"left"，"top"，"right"，"bottom"屬性進行位移。
4、static
預設值。沒有定位，元素出現在正常的流中，忽略top，bottom，left，right或者z-index。

三、display
1、inline
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
inline元素設定width，height屬性無效。
inline元素，水平方向的padding-left，padding-right，margin-left，margin-right都產生邊距效果，豎直方向的padding-top，padding-bottom，margin-top，margin-bottom不會產生邊距效果。
2、block
block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設定width，height屬性。區塊層級元素即使設定了寬度，仍然獨佔一行。
block元素可以設定margin，padding屬性。
3、inline-block
將元素呈現為內聯對象，但是對象的內容作為塊對象呈現。既有行級元素的特性，也有區塊層級元素的特性，能設定width，height，margin，padding。
IE瀏覽器下不支援該屬性，解決方案是.dil{  display:inline;   zoom:1;  /*觸發塊元素的layout*/  }
4、none
將元素從頁面中移走，消失了，它下面的元素就會自動跟上。這不同於visiblity屬性，visibility:hidden表示元素雖然被隱藏了，但它仍然佔據它原來所在的位置。
5、table
讓元素以表格的形式呈現，類似於table標籤。IE6，7不支援。
6、table-row
讓元素以表格行的形式呈現，類似於tr標籤。
7、table-cell
讓元素以表格儲存格的形式呈現，類似於td標籤。
使用了display:table-cell的元素設定margin值無效，但padding值是有效，所以如果要在設定了table-cell的元素上應用margin，需要再包裹一層元素。
另外，如果設定了display:table-cell的元素的父元素不是display:table-row，父元素的父元素不是display:table，那麼瀏覽器會自動建立相應的匿名元素，使得DOM階層符合table/inline-table>table-row>table-cell三層嵌套關係，這就是“匿名建立表格元素規則”。
8、flex
想瞭解彈性盒子布局嗎？請看這裡
9、gird
很多瀏覽器還不支援啊，柵格布局。

網頁布局方案