CSS盒模型

把html标签想象成一个盒子，这个盒子里面放着其他的标签（可以看成其他的盒子），其他的盒子里又有盒子，层层嵌套，即所谓的盒模型
盒模型分为IE盒模型(也叫怪异盒模型)和W3C标准盒模型

两者的区别（width,height的计算方式不同）

w3c标准盒模型
width,height = content

IE盒模型
width,height = content+border+padding
可以通过设置box-sizing的值来选择使用哪种模型

• content-boxw3c标准盒模型（默认）
• border-box IE盒模型

在 IE8+ 浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在 IE6/7/8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

我们通过例子直观感受一下

w3c标准盒模型

• 没有设置padding和border的情况（盒子大小是content时的情况）

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: rgb(150, 58, 58);
  box-sizing: content-box; /* w3c标准盒模型  默认*/
}

image.png

image.png

• 设置padding和border的情况

div {
  width: 100px;
  height: 100px;
  background-color: rgb(150, 58, 58);
  border: 10px solid #000;
  padding: 10px;
  /* box-sizing: content-box; w3c标准盒模型 */
}

image.png

image.png

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

var div = document.querySelector('div')
console.log(window.getComputedStyle(div).getPropertyValue('width')); //100px