06.CSS盒子模型
一.理解css盒子模型
HTML中的每一個元素都可以看做是一個盒子
HTML中的每一個元素都可以看做是一個盒子，如右下圖所示姻檀，可以具備這4個屬性
在瀏覽器中檢查元素可得到下圖：
二.標準盒子模型
從上圖可以看到標準，W3C 盒子模型的范圍包括 margin藕甩、border施敢、padding周荐、content狭莱，并且 content 部分不包含其他部分。
w3c中的盒子模型的寬:包括margin+border+padding+width;
width:margin2+border2+padding*2+width;
height:margin2+border2+padding*2+height;
三.IE盒子模型(怪異盒子模型)
四.CSS盒子和IE盒子區(qū)別
從上圖可以看到 IE 盒子模型的范圍也包括 margin概作、border腋妙、padding、content讯榕，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading骤素。
網(wǎng)頁中的盒子模型匙睹；我們常常要控制盒子模型的寬度width:
w3c中的盒子模型的寬:包括margin+border+padding+width;
width:margin2+border2+padding*2+width;
height:margin2+border2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;
上面的兩個寬度相加的屬性是一樣的。不過在ie中content的寬度包括padding和border這兩個屬性济竹；
例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解釋痕檬，那么這個盒子模型占用的
寬度為：202+102+10*2+200=280px;
高度：202+102+20*2+50=130px;
盒子的實際寬度大小為:102+102+200=240px;
實際高度：102+102+50=90px;
用ie的盒子模型解釋 ：盒子在網(wǎng)頁中占據(jù)的大小為202+200=240px; 高：202+50=90px;
盒子的實際大小為：寬度:200px, 高度:50px;
我們常常理解的盒子模型是w3c這樣的盒子模型
五.box-sizing屬性
- box-sizing用來設置盒子模型中寬高的行為
- content-box：padding、border都布置在width送浊、height外邊
- border-box：adding梦谜、border都布置在width、height里邊
5.1 box-sizing: content-box;
- 元素的實際占用寬度 = border + padding + width
- 元素的實際占用高度 = border + padding + height
5.2 box-sizing: border-box;
- 元素的實際占用寬度 = width
- 元素的實際占用高度 = height
5.3 盒子模型
