盒子模型(Box Modle)可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

盒子模型分为两种

第一种是W3c标准的盒子模型(标准盒模型) 。

第二种IE标准的盒子模型(怪异盒模型)

当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

标准盒模型与怪异盒模型的表现效果的区别之处

1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小  = content + border + padding + margin

 2、怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding)；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width(content + border + padding) + margin

css盒子模型概念

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框(border)，然后最外层是外边距(margin)，整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

css 外边距合并(叠加)

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

box-sizing属性介绍

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　　　即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

觉得好看的话别忘了长按下方图片，点一下关注哦