CSS系列-盒子模型

1、介绍一下标准的CSS的盒子模型？

　　css盒子包括： 内容(content)、内边距(padding)、边框(border)、外边距(margin)；

 

 

　　最外面橙色的就是外边距区域(margin area )，

　　往里黄色的是边框区域(border area)，

　　再往里的绿色的是内边距区域(padding area )，

　　最里面绿色的就是内容区域（content area）

 

　　备注：

　　　　标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin

　　　　低版本IE盒子模型：宽度 = 内容宽度（content+border+padding）+ margin

 

2、box-sizing属性？

　　默认情况下，设置width 、height 等作用对象是内容区域，如果元素有padding, 我们审查元素的时候，看到的宽高世界上是加上padding的，可以通过box-sizing去改变这个计算：

　　box-sizing是用来设置width、height的作用对象的。有三个值，分别是content-box 、 paading-box 、 border-box， 默认值是content-box

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

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

　　padding-box：设置元素的height/width属性指的是padding + content部分的高/宽

 

3、最佳实践

为了布局上的方便，一些专家建议我们将所有的元素都设置为box-sizing: border-box

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}