盒模型以及box-sizing常用属性

目录

盒模型的组成

box-sizing的属性值有三个，content-box和border-box还有inherit。

标准盒模型和怪异盒模型

---

盒模型的组成

盒模型是指margin（外边距）+ border（边框） + padding（内边距）+ content（内容）

可以把每一个容器，比如div，都看做是一个盒子模型。

比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px; border:1px solid red;

这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）

相当于一个元素的实际宽高是由：padding + border + content 组成。

box-sizing的属性值有三个，content-box和border-box还有inherit。

content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding，这个属性是默认值。

border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

inherit：规定应从父元素继承 box-sizing 属性的值。

因此，给div盒子加了box-sizing:border-box属性，padding和border的值就不会再影响元素的宽高，相当于把padding和border的值都算在content里，这样，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整宽高。

标准盒模型和怪异盒模型

标准盒子模型，一般浏览器也都默认为标准盒子模型。即：box-sizing:content-box

怪异盒子模型，一般根据实际项目需要自行设置。即：box-sizing:border-box