2020-11-26

css盒模型

css盒模型就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
box-sizing：border-box，padding-box，content-box.
看图分析：
标准盒子模型：
IE盒子模型：
区别：从图中可以看出两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三部分的宽度，因此使得在计算整个盒子的宽度时存在差异：
标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width
在css3中引入了box-sizing属性，box-sizing：content-box表示标准的盒子模型，box-sizing：border-box表示的是IE盒子模型
另外，box-sizing：padding-box这个属性值得宽度包含了左右padding+width