css 盒子模型

1.css 盒子模型(css box model)

所有的html元素本质上都是盒子模型。在css 中，盒子模型常用来进行设计和布局。

盒子模型包括：margin(外边距)，padding(内边距)，border(边框)，actual content(实际的内容区域)，如下：

2.计算盒子尺寸的两种方式

根据为元素的box-sizing属性赋的值的不同，盒子尺寸有两种计算方式，content-box 和 border-box.外边距影响盒子周边的距离，在计算盒子尺寸时，无需考虑。

    1.box-sizing:content-box(css 盒子模型的默认值)

box-sizing:content-box

盒子的宽 ＝ width + padding-left + padding-right + border-left + border-right ;

盒子的高  ＝ height + padding-top + padding-bottom + border-top+ border-bottom ; 

2.box-sizing: border-box

box-sizing: border-box

盒子的高 ＝ height

盒子的宽 ＝ width

盒子的尺寸只跟盒子的宽度和高度属性相关。浏览器会考虑内边距和边框，合理的调整高度和宽度属性。因此总尺寸等于为高度和宽度属性设置的值。

3. 设置box-sizing

任何元素都可以设置box-sizing这个属性，因此可以混用两种盒子，但为了保持一致，通常选择其中一种使用。设置方法是：用通用选择器进行设置，指定盒子模型的类型(content-box是默认值)：

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