解析CSS的box model盒模型及其內(nèi)的子元素布局控制

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
例子:
- .demo {
- -webkit-box-align: center;
- -moz-box-align: center;
- -ms-box-align: center;
- box-align: center;
- }
值::
baseline – 基線
center – 居中
end – 底部
inherit – 繼承
initial – 默認
start – 頂部
stretch – 拉伸
2.子元素左右對齊方式 box-pack
例子:
- .demo {
- -webkit-box-pack: center;
- -moz-box-pack: center;
- -ms-box-pack: center;
- box-pack: center;
- }
值:
center – 居中
end – 底部
inherit – 繼承
initial – 默認
start – 頂部
justify – 拉伸
3.子元素排列方式 box-orient
例子:
- .demo {
- -webkit-box-orient: horizontal;
- -moz-box-orient: horizontal;
- -ms-box-orient: horizontal;
- box-orient: horizontal;
- }
值:
horizontal – 水平
vertical – 垂直
inherit – 繼承
initial – 默認
inline-axis – 內(nèi)軸
block-axis – 塊軸
4.子元素排列順序 box-ordinal-group
例子:
- .child {
- -webkit-box-ordinal-group:2;
- -moz-box-ordinal-group:2;
- box-ordinal-group:2;
- }
5.規(guī)定框的子元素的顯示方向 box-direction
例子:
- .demo {
- -webkit-box-direction:reverse;
- -moz-box-direction:reverse;
- -ms-box-direction:reverse;
- box-direction:reverse;
- }
值:
reverse – 反方向
normal – 默認
inherit – 繼承
相關(guān)文章
- 盒模型在Web頁面布局中很重要,而對邊距的把控是掌握盒模型的關(guān)鍵,下面我們就來以圖文講解CSS的Box Model盒模型中的邊距2016-06-21
- 下面小編就為大家?guī)硪黄狢SS3彈性盒模型flex box快速入門心得(必看篇)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 下面小編就為大家?guī)硪黄狢SS彈性盒模型flex在布局中的應(yīng)用詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 這篇文章主要介紹了幾個CSS3的flex彈性盒模型布局的簡單例子演示,flex布局是迄今為止最強大的web布局方式,需要的朋友可以參考下2016-05-12
- 下面小編就為大家?guī)硪黄狢SS使用盒模型實例分析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-20