把html標(biāo)簽想象成一個(gè)盒子，這個(gè)盒子里面放著其他的標(biāo)簽（可以看成其他的盒子）带膜，其他的盒子里又有盒子瘫怜，層層嵌套，即所謂的盒模型
盒模型分為IE盒模型(也叫怪異盒模型)和W3C標(biāo)準(zhǔn)盒模型
兩者的區(qū)別（width,height的計(jì)算方式不同）
w3c標(biāo)準(zhǔn)盒模型
width,height = content
IE盒模型
width,height = content+border+padding
可以通過(guò)設(shè)置box-sizing的值來(lái)選擇使用哪種模型
-
content-boxw3c標(biāo)準(zhǔn)盒模型（默認(rèn)） -
border-boxIE盒模型
在 IE8+ 瀏覽器中使用哪個(gè)盒模型可以由box-sizing（CSS新增的屬性）控制藕届，默認(rèn)值為content-box挪蹭，即標(biāo)準(zhǔn)盒模型；如果將box-sizing設(shè)為border-box則用的是IE盒模型休偶。如果在 IE6/7/8中DOCTYPE缺失會(huì)將盒子模型解釋為IE盒子模型梁厉。若在頁(yè)面中聲明了DOCTYPE類型，所有的瀏覽器都會(huì)把盒模型解釋為W3C盒模型踏兜。
我們通過(guò)例子直觀感受一下
w3c標(biāo)準(zhǔn)盒模型
- 沒(méi)有設(shè)置
padding和border的情況（盒子大小是content時(shí)的情況）
<div></div>
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
box-sizing: content-box; /* w3c標(biāo)準(zhǔn)盒模型 默認(rèn)*/
}
image.png
image.png
- 設(shè)置
padding和border的情況
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
border: 10px solid #000;
padding: 10px;
/* box-sizing: content-box; w3c標(biāo)準(zhǔn)盒模型 */
}
image.png
image.png
我們發(fā)現(xiàn)盒子變大了词顾，但中間藍(lán)色區(qū)域?yàn)?code>content,大小依然為100x100,變大是因?yàn)轭~外的padding和border包裹了它
var div = document.querySelector('div')
console.log(window.getComputedStyle(div).getPropertyValue('width')); //100px
getPropertyValue() 方法返回指定的 CSS 屬性的值
我們看看IE盒模型
IE盒模型
div {
width: 100px;
height: 100px;
background-color: rgb(150, 58, 58);
border: 10px solid #000;
padding: 10px;
box-sizing: border-box; /* ie */
}
image.png
image.png
我們發(fā)現(xiàn)盒子大小依然和初始值一樣，此時(shí)盒子的寬高計(jì)算為：
content+border+padding = 100 x 100
var div = document.querySelector('div')
console.log(window.getComputedStyle(div).getPropertyValue('width')); //100px
