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

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

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

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

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

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

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

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

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

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

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

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

值:
reverse – 反方向
normal – 默認(rèn)
inherit – 繼承

最新評(píng)論