前言
本文是笔者初接触CSS时的学习记录，由于之前并未学习过前端的相关知识，如存在错误请各位指出。
正文
盒子模型是我们在进行CSS网页布局中或不可少的经典模型。可以说，网页就是由许许多多的盒子组成的。而盒子里的元素就是HTML元素。
盒子模型自外而内由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成。其中，margin、border、padding是CSS属性，content是HTML元素。
margin 外边距
该属性用于设置外边距，可以理解成盒子与盒子间的距离。其属性如下所示，可以通过修改属性来确定各边margin的值。
margin还可以用于使块级盒子达到水平居中的样式。需要满足以下条件：
- 盒子必须指定了宽度。（
width属性） - 将盒子的左右外边距都设置为
auto。
使用margin时要注意的问题：
1.相邻块元素垂直外边距的合并：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，而是两者之中的较大值。
解决方法：尽量只给一个盒子添加margin值。
2.嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：给父元素加上border或padding，使用浮动布局等。
border边框
border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色
border语法：
border : border-width || border-style || border-color;
其中，边框样式 border-style 可以设置如下值：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线
- dashed：边框为虚线
- dotted：边框为点线
padding内边距
该属性用于设置外边距，可以理解成边框与内容间的距离。其属性如下所示，可以通过修改属性来确定各边padding的值。与margin十分类似。
使用padding时要注意的问题： padding会影响盒子实际大小。
例如，首先给该盒子指定高度和宽度200px * 200px。
div {
background-color: aqua;
width: 200px;
height: 200px;
margin: auto;
}
通过浏览器检查功能可以看到该盒子的实际大小，与预期相符。
但是给div标签增添以下样式后：
padding: 10px;
可以看到，整个盒子被padding值撑大了，实际大小为220px * 220px。
盒子阴影
可以为盒子添加阴影属性。 语法：
box-shadow: h-shadow v-shadow blur spread color inset;
其中各属性分别为：
- h-shadow ：水平阴影的位置
- v-shadow ：垂直阴影的位置
- blur ：模糊距离，即模糊程度
- spread ：阴影的尺寸
- color ：颜色
- inset ：默认为outset（外部阴影），可改为内部阴影
例如，为已有盒子添加以下代码：
box-shadow: 10px 10px 11px 5px rgba(0, 0, 0, 0.3);
实际效果如下：
