这是我参与「第四届青训营 」笔记创作活动的的第4天。 在此总结了了CSS盒模型的相关知识，自己对于不会的和之前不完善的知识整理了如下。
CSS盒子模型
1、边框(border)
1.1 边框基本属性
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
1.2 border-style属性
| 属性 | 描述 |
|---|---|
| solid | 实线边框 |
| none | 无边框 |
| hidden | 隐藏边框。IE不支持 |
| dotted | 点线 |
| dashed | 虚线 |
| doule | 双线边框，两条单线与其间隔的和等于指定的border-width值 |
1.3 边框简写
border : 1px solid red; /*没有顺序*/
1.4 表格的细线边框（collapse）
border-collapse : collapse; /*相邻边框合并在一起*/
1.5 边框圆角
border-radius : 10px;
-
参数值可以为数值或百分比的形式
-
如果是正方形，想要设置成圆，把数值改为高度或宽度的一半即可，或者直接写为50%
border-radius : 50%; -
该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针）
-
分开写：border-top-left-radius.border-top-right-radius...
1.6 透明边框(适合触发后有边框颜色，保证图片不变形)
border:20px solid transparent;
2、内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
2.1 简写
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，上下左右都5像素内边距 |
| padding:5px 10px; | 2个值，上下内边距5像素，左右内边距10像素 |
| padding:5px 10px 20px; | 3个值，上内边距5像素，左右10像素，下20像素 |
| padding:5px 10px 20px 30px; | 4个值，上5，右10，下20，左30 顺时针 |
2.2 特殊情况
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
3、外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin简写方式代表的意义跟padding完全一致
3.1 外边距合并
I. 相邻块元素垂直外边距的合并
margin-bottom,margin-top重合时，垂直间距不是两者之和，而是两个值中的较大者。
解决方案： 尽量只给一个盒子添加margin值
II. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素右上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow : hidden;
4、阴影
4.1 盒子阴影
/* box-shadow: h-shadow v-shadow blur spread color inset */
box-shadow: 5px 5px 5px 5px #8c8c8c inset;
| 值 | 描述 |
|---|---|
| h-shadow | 水平阴影的位置，允许负值 |
| v-shadow | 垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的大小 |
| color | 颜色 |
| inset | 从外层的阴影（开始时）改变阴影内侧阴影（俗称内阴影） |
注意：
- 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
- 盒子阴影不占空间，不会影响其他盒子排列
4.2 文字阴影
/*四个值：水平偏移量 垂直偏移量 模糊距离 颜色*/
text-shadow: -2px -2px 2px blue;
