CSS2.1中提出了盒模型的概念，盒模型高度提煉了所有元素的基本特征，即標(biāo)準(zhǔn)盒模型，CSS3中進(jìn)一步擴(kuò)展，提出了彈性盒模型的概念

什么是盒模型，我們可以先直觀的看一個東西

打開Chrome瀏覽器，F12打開開發(fā)者工具

?

我們能看到這個東西

margin,padding,border，平常我們在設(shè)置這些屬性的時候就是盒模型的一個應(yīng)用~

盜一張圖來說明

?

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的

Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框

Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的

Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像

以實(shí)際的例子說來說明：html>

box

box

1234567891011121314151617181920212223242526272829

這段代碼準(zhǔn)備了一個類名為box的div元素，以及div元素中的h1元素

效果：

?

最外面的，最淺的灰藍(lán)色是body的背景顏色，不用管，設(shè)置這個只是想修改body的默認(rèn)白色屬性，以便觀察盒子~

藍(lán)色的就是box類設(shè)置的背景顏色，淺藍(lán)色就是h1設(shè)置的背景顏色~

現(xiàn)在來設(shè)置padding屬性

修改h1的代碼：h1{????background:#3498DB;??/*淺藍(lán)色*/

padding:20px;}1234

?

淺藍(lán)色部分增加了~從文字到h1的邊界的距離增加了，也就是內(nèi)邊距增大了，這是padding屬性

現(xiàn)在來設(shè)置margin屬性

修改h1的代碼：h1{????background:#3498DB;??/*淺藍(lán)色*/

padding:20px;????margin:20px;}12345

?

明顯看到，深藍(lán)色部分變大變寬了，是h1的邊界到div的邊界增大了，也就是外邊距增大了，這是margin屬性

現(xiàn)在來設(shè)置border屬性

修改h1代碼h1{????background:#3498DB;??/*淺藍(lán)色*/

padding:20px;????margin:20px;????border:5px?solid?#FFF;}123456

?

可以明顯的看到淺藍(lán)色和深藍(lán)色中間多了一層白色的邊框，這就是h1的邊框，這是border屬性

然后我們來說說盒子的大小問題

我們先修改h1的代碼h1{????background:#3498DB;??/*淺藍(lán)色*/

padding:20px;????margin:20px;????border:5px?solid?#FFF;????width:120px;????height:120px;}12345678

添加高度和寬度屬性~

效果如圖：

?

我們F12打開開發(fā)者工具，查看盒模型

?

可以清楚的看到盒子的大小為210x210

可是我們設(shè)置的是120x120啊，為什么變了，這就是為什么我們要學(xué)習(xí)盒模型的原因。。

這個210是20的margin,5的border,20的padding,左右兩邊加起來x2，總共90，加上120就變成210了…

所以width和hegiht屬性只作用了content區(qū)域…

為了解決這種每次設(shè)置長寬都要計算的問題，就需要用box-sizing屬性~

修改h1的代碼:h1{????background:#3498DB;??/*淺藍(lán)色*/

padding:20px;????margin:20px;????border:5px?solid?#FFF;????width:120px;????height:120px;????box-sizing:border-box;}123456789

?

再看效果就OK了~

添加了一個box-sizing屬性，這個屬性定義了盒模型中元素的組成元素。默認(rèn)的box-sizing屬性是content-box，寬高屬性不計入內(nèi)邊距及邊框的數(shù)值。變?yōu)閎order-box之后，元素先減去邊框和內(nèi)邊距才計算內(nèi)容。

另外，設(shè)置絕對定位是為了觸發(fā)BFC機(jī)制來清楚浮動，更好的觀察盒模型。

BFC：塊級格式化上下文

簡單的來說，在BFC中，元素布局不受外界的影響，利用這個來消除浮動元素對非浮動元素的影響，以及塊級元素和行內(nèi)元素的影響。

關(guān)于IE盒子模型

其實(shí)，IE盒子模型與標(biāo)準(zhǔn)盒模型差不多，區(qū)別在于：計算方式

這里盜兩張圖

?

?

可以很明顯的發(fā)現(xiàn)，兩張圖的區(qū)別在width和height

標(biāo)準(zhǔn)盒子模型中，width和height是content的長與寬

而IE盒子模型中，width和height是content+padding+border區(qū)域的長與寬

很明顯，與剛剛說的box-sizing屬性相對應(yīng)

content-box 對應(yīng)標(biāo)準(zhǔn)盒子模型

border-box 對應(yīng)IE盒子模型

em….怎么說呢，感覺就是W3C的一群大佬罵了很久IE的盒子模型最后發(fā)現(xiàn)IE的盒子模型還挺好的，就在Html5加入了box-sizing屬性…..

彈性盒子是 CSS3 的一種新的布局模式。

CSS3 彈性盒子，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健ox-align 定義子元素在盒子內(nèi)垂直方向上的空間分配方式

2.box-direction 定義盒子的顯示順序

3.box-flex 定義子元素在盒子內(nèi)的自適應(yīng)尺寸

4.box-flex-group 定義自適應(yīng)子元素群組

5.box-lines 定義子元素分列顯示

6.box-ordinal-group 定義子元素在盒子內(nèi)的顯示位置

7.box-orient 定義盒子分布的坐標(biāo)軸

7.box-pack 定義子元素在盒子內(nèi)水平方向的空間分配方式

不過彈性盒子的屬性還存在兼容性問題..

所以用彈性盒子寫代碼可能會比較頭疼，各主流瀏覽器都有各自的私有屬性…

比如說webkit引擎的chrome和safari，他們的屬性都帶有-webkit前綴，比如說-webkit-box-orient

IE就算了，IE根本不支持這個….

開啟彈性盒模型只需要設(shè)置display:flex就OK了

然后再去設(shè)置具體的屬性

原文：http://blog.csdn.net/qq_33858965/article/details/77969174?locationNum=4&fps=1

總結(jié)

以上是生活随笔為你收集整理的html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。