网页的每个元素都可以看成是一个盒子，把东西放在盒子里面，此时就引出几个问题。
盒子边是否齐全，什么样子？内容放在盒子的什么位置？每个盒子之间的距离是多少？
上面的三个问题就引出接下里要讲的boder(盒子边) padding(东西到盒子边的距离)margin(每个盒子之间的距离) CSS规定每一个盒子都有以下四个部分构成：内容区(content)、内边距(padding)、边框(border)、以及外边距(margin)
首先看一下内容区，这个板块就是往里面放进去其他的文字、标签等等
其次就是border(边框)区，它既然指的是盒子，那盒子的厚度 样式 颜色又是什么样子的呢，这就由border的三个属性值构成：border-size、border-style、border-color决定，大多数情况下，这些属性不是分开写的，而是由复写属性border完成的，比如 border：1px solid red,这个意思就是边框是1像素红色的实线。(ps:border会撑大盒子)
| 属性名 | 属性值 |
| border-size | 数字+px |
| borde-style | solid(直线）、dashed(虚线）、dotted(点线） |
| border-color | 颜色(十六进制、rgb等等) |
接着就是padding(内边距),它指的是边框到内容之间的距离。
| 参数个数 | 代表方位 |
| 4 | 上，右，下，左（逆时针） |
| 3 | 上，右左，下 |
| 2 | 上下，右左 |
| 1 | 上下左右 |
（ps: padding会撑大盒子)
最后就是margin(外边距），指的是每一个盒子之间的距离，它的参数大致内容与padding相同，只是控制的区域不同。(ps:margin不会撑开盒子)
盒子的宽高=内容区宽高+边框尺寸*2+内边距*2
因此在设置盒子宽高的时候要考虑到边款尺寸以及内边距大小，这里有两个方法来打消这种影响，无论边框内边距怎样设置盒子大小都不会改变，当然，内容区就变小了。
1.手动内减
就比如此时有一个需求(盒子宽高500px 边框是10px 内边距都是20px）那在设计CSS的时候就可以把盒子的宽高设置为:500-10*2-20*2=440px。
2.自动内减（重要）
这个是CSS3的功能，我们只要在写CSS是，添加一个属性为， box-sizing: border-box; 就可以自动减去不用手动，那设置的时候就直接可以设置为500px。