持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
接下来我们继续关于盒子模型吧，在网页中有很好的展示。
盒子模型
盒子模型组成
怎么来理解盒子模型呢？我们可以把HTML的元素看成是一个矩形的盒子，也就是一个盛装内容的容器，CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括:内边距、外边距、边框和实际内容。
边框
border可以设置元素的边框。边框有三部分组成 :边框宽度、边框样式、边框颜色
基本语法如下:
border:border-width｜border-style｜border-color
例如:
border:1px solid red;
这样我们就设置了一个边框粗为1px，实线，为红色的边框。 元素值没有固定顺序，我们可以随意调换顺序。
- border-width:定义边框粗细，单位是px。
- border-style:定义边框样式。常用的参数有:solid(实线)、dashed(虚线)、dotted(点线)
- border-color :定义边框颜色
border-collapse属性可以控制浏览器绘制表格边框的方式。它能控制相邻单元格的边框。 基本语法如下:
border-collapse:collapse;
实际上，边框会额外增加盒子的实际大小，因此我们有两种方法来解决。
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要height/width减去边框宽度
内边距
padding属性用于设置内边距，即边框与内容之间的距离。 相关属性有:
- padding-left:左内边距
- padding-right:右内边距
- padding-top:上内边距
- padding-bottom:下内边距
padding属性可以有一到四个值。
我们在四个例子中来感受一下:
padding:5px;
1个值，代表上下左右都有5像素内边距
padding：5px 10px；
2个值，代表上下边距是5像素，左右内边距是10像素
padding：5px 10px 15px;
3个值，代表上内边距是5像素，左右边距10像素，下内边距15像素
padding：5px 10px 20px 30px;
4个值，代表上内边距是5像素，右是10px，下是20px,左是30px
当我们给盒子指定padding值之后，内容和边框有了距离，添加了内边距，padding影响了盒子实际大小，如果说我们想要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
如果盒子本身没有指定width/height属性，则padding不会撑开盒子大小。
