web前端：從「習奧會」看CSS下的盒模型與定位

引言：在前幾天開始的「習奧會"上，雙方提出要對彼此關係進行從新定位，創建新型大國關係。國與國之間的定位，靠的是實力和規則，那麼，CSS下的盒模型定位規則是什麼呢？下面就會作粗鄙的介紹。

 

 一， 爲何叫它「盒模型」（Box Model ）

     在接觸CSS之間，哪知道什麼叫盒模型，盒子和模型卻是常常見到。不過待一看到盒模型本尊，全部疑慮如風消散。中國有句古話，無規矩不成方圓，用在CSS下面，style樣式爲規，div結構爲矩，全部高度長度造成的原始div，都是方的，看到這裏，想必不難理解，爲何會把這東西叫作盒子了。

二，盒模型的四盤菜

      內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。這四個東西，共同組成了盒模型。舉個形象可是不太恰當的例子，你和朋友去吃飯，點了一桌子菜，這張放菜的桌子，就叫作盒模型，它的內容(content)是由一個一個盤子、盆子、碗構成的；而這些個盤子盆子之類，又是一個個小的盒模型，桌子的邊緣，碗的邊緣，都叫作邊框(border)；盤子裏的菜到盤邊，碗裏的飯到碗邊，盤子碗到桌邊的距離，就叫作內邊距，也就是填充（padding）；相對的，盤子到碗的距離，就叫作邊界（margin）。

二，盒模型的定位

      關於盒模型的定位，其實有不少方法，可是主要的仍是position:static|absolute|fixed|relative方式，固然，經常使用的是絕對定位（absolute）和相對定位（relative）方式。

      1，咱們看看絕對定位（absolute）

      在CSS中使用絕對定位以後，對象就和文檔流分離開來，自成一層，不會佔用其餘同位置div的空間，若是有多個絕對定位層疊的對象，能夠用z-index來調整前後順序，數字越大，等級越靠前。

01

.diva{

02	width:50px;

03	height:50px;

04	position:absolute;

05	top:100px;

06	left:100px;

07	z-index:1;   //此時兩個div層疊，使用z-index控制前後順序，1在2的下面！

08

}

09

10

.divb{

11	width:50px;

12	height:50px;

13	position:absolute;

14	top:100px;

15	left:100px;

16	z-index:2;

17

}

      須要指出的是，就算是絕對定位，其「絕對」二字也是針對父div的，而不是相對於整個瀏覽器的窗口，因此就算是脫離了文檔流獨立存在，它也會隨着父div的移動而移動其位置。

      2，如今再看看相對定位（relative）

      和絕對定位不一樣，相對定位就至關於引言所說的」新型大國關係「，能夠追逐，並列，可是不可層疊。目前美國的綜合國力世界第一，可是當中國發力超過以後，世界第一的位置，就是中國了。

      若是是絕對定位是脫離文檔流而獨立，那麼相對定位就是偏移出了文檔流，始終沒有獨立出去。就像是老王家有兩個孩子，大兒子成家立業，這就叫絕對定位；二兒子還在念書，雖然也是在外面生活，可是始終依附於老王。

       3，fixed定位

        fixed定位大概是具備生活氣息的一種定位方式了，打開網頁，各類小廣告，彈窗，」當即諮詢「等，幾乎都是使用的fixed定位。這是一種最最最獨立的定位方式，絕對在其餘任何文檔流的上層顯示，由於它僅僅相對於瀏覽器窗口固定本身的位置，因此只要你不關閉瀏覽器，它就能一直吸引你的眼神。

 

關於盒模型與定位，其實還有不少話要說，譬如說父類繼承，瀏覽器兼容，在這裏推薦兩篇文章，分別揭曉了前面二者的祕密：

IE6 的bug：http://my.oschina.net/u/1162572/blog/136833 

父類繼承與崩塌：http://my.oschina.net/JoeUI/blog/136746