css的兩種盒模型介紹 
CSS中Box model是分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型，他們相同之處都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關(guān)系；他們不同之處呢？兩者的計算方法不一至：
1、W3C的標(biāo)準(zhǔn)Box Model:
 

2、IE)傳統(tǒng)下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
 

其實原則上來說Box Model是分得很細的，我們這里主要分了兩個比較明顯的地方，就是外盒模型和內(nèi)合模型，如上面計算公式所示（后面我將會詳細介紹一下CSS中的Box Model）。這樣說大家可能還不太好理解，下面我們一起來看一個實際的例子，比如說現(xiàn)在有一個叫boxtest的Div，其具有下面一個屬性
.boxtest {     border: 20px solid;     padding: 30px;     margin: 30px;     background: #ffc;     width: 300px;  }
我們先來看一下W3C標(biāo)準(zhǔn)瀏覽器（Firefox,Safari,Chrome,Opera,IE6+）和傳統(tǒng)瀏覽器(IE6以下版本瀏覽器)的Layout截圖

上圖中明顯可以看出IE6以下版本瀏覽器的寬度包含了元素的padding,border值，換句話來說在IE6以下版本其內(nèi)容真正的寬度是(width-padding-boder)。用內(nèi)外盒來說的話，W3C標(biāo)準(zhǔn)瀏覽器的內(nèi)盒寬度等于IE6以下版本瀏覽器的外盒寬度。

盒模型的子元素控制
1.子元素上下對齊方式 box-align
例子:

值：:
baseline – 基線
center – 居中
end – 底部
inherit – 繼承
initial – 默認
start – 頂部
stretch – 拉伸

2.子元素左右對齊方式 box-pack
例子:

值:
center – 居中
end – 底部
inherit – 繼承
initial – 默認
start – 頂部
justify – 拉伸

3.子元素排列方式 box-orient
例子:

值:
horizontal – 水平
vertical – 垂直
inherit – 繼承
initial – 默認
inline-axis – 內(nèi)軸
block-axis – 塊軸

4.子元素排列順序 box-ordinal-group
例子:

5.規(guī)定框的子元素的顯示方向 box-direction
例子:

值:
reverse – 反方向
normal – 默認
inherit – 繼承

最新評論