css盒模型

基本概念

就是来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

• 标准盒模型
  image

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

• IE盒子模型
  图片

从上图可以看到IE盒子模型的范围也包括 margin、border、padding、content, 与标准W3C盒子模型不同的是: IE盒子模型的content部分包含了 border 和 padding

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆,包含什么,width就从什么开始算起。