盒子模型

Posted 2021-05-31 肥晨

盒子模型是什么？

CSS盒子模型（Box Model）。在所有的html元素都可以看成一个盒子；在CSS中，Box Model这一术语被用来设计和布局中使用。

现在已知的有两种盒模型，W3C盒模型（标准盒子）和IE盒子模型（怪异盒子）。

W3C盒模型（标准盒子）和IE盒子模型（怪异盒子）分别是什么？

W3C盒模型，也就是标准盒子模型：

宽度=内容的宽度（content）+ border + padding + margin

IE盒子模型，也就是怪异盒子模型：

宽度=内容宽度（content+border+padding）+ margin

为什么叫IE盒子模型呢。是因为在低版本的IE中盒子使用的都是border-box。后期IE5.5、IE6及其以后，盒模型都为content-box。注意：当浏览器未设置<!doctype>声明时，盒模型都为border-box。

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box

通过 css3 的box-sizing属性，可以更改元素的盒子模型。标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽