盒子模型

CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。
在CSS中，每一个元素都被视为一个框，而每个框都有三个属性： border:元素的边框（可能不可见），用于将框的边缘与其他框分 开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。
因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。
内核的总尺寸=border+padding+内容宽/高
外盒的总尺寸=border+padding+margin+内容宽/高
box-sizing
content-box：默认值，盒子的宽度或高度=border+padding+margin+内容宽/高
border-box：盒子的宽度或高度等于元素内容的个宽度或高度。
inherit：此值是元素继承父元素的盒子模型模式。