CSS2.1中提出了盒模型的概念，盒模型高度提煉了所有元素的基本特征，即標準盒模型，CSS3中進一步擴展，提出了彈性盒模型的概念

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

打開Chrome瀏覽器，F12打開開發者工具

?

我們能看到這個東西

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

盜一張圖來說明

?

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

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

Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的

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

以實際的例子說來說明：html>

box

box

1234567891011121314151617181920212223242526272829

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

效果：

?

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

藍色的就是box類設置的背景顏色，淺藍色就是h1設置的背景顏色~

現在來設置padding屬性

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

padding:20px;}1234

?

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

現在來設置margin屬性

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

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

?

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

現在來設置border屬性

修改h1代碼h1{????background:#3498DB;??/*淺藍色*/

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

?

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

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

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

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

添加高度和寬度屬性~

效果如圖：

?

我們F12打開開發者工具，查看盒模型

?

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

可是我們設置的是120x120啊，為什么變了，這就是為什么我們要學習盒模型的原因。。

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

所以width和hegiht屬性只作用了content區域…

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

修改h1的代碼:h1{????background:#3498DB;??/*淺藍色*/

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

?

再看效果就OK了~

添加了一個box-sizing屬性，這個屬性定義了盒模型中元素的組成元素。默認的box-sizing屬性是content-box，寬高屬性不計入內邊距及邊框的數值。變為border-box之后，元素先減去邊框和內邊距才計算內容。

另外，設置絕對定位是為了觸發BFC機制來清楚浮動，更好的觀察盒模型。

BFC：塊級格式化上下文

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

關于IE盒子模型

其實，IE盒子模型與標準盒模型差不多，區別在于：計算方式

這里盜兩張圖

?

?

可以很明顯的發現，兩張圖的區別在width和height

標準盒子模型中，width和height是content的長與寬

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

很明顯，與剛剛說的box-sizing屬性相對應

content-box 對應標準盒子模型

border-box 對應IE盒子模型

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

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

CSS3 彈性盒子，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。box-align 定義子元素在盒子內垂直方向上的空間分配方式

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

3.box-flex 定義子元素在盒子內的自適應尺寸

4.box-flex-group 定義自適應子元素群組

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

6.box-ordinal-group 定義子元素在盒子內的顯示位置

7.box-orient 定義盒子分布的坐標軸

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

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

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

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

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

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

然后再去設置具體的屬性

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。