Appearance
盒子操作
盒子阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
注意点：
盒子的阴影分为内阴影和外阴影，默认情况下是外阴影
内阴影的参数为：inset
阴影的颜色时由于盒子内部文字的颜色而改变
文字阴影
文字阴影仅支持四个参数
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色;
边框属性
同时设置四条边：
border: 边框的宽度 边框的样式 边框的颜色
分别设置四条边：
border-top: 边框的宽度 边框的样式 边框的颜色
border-bottom: 边框的宽度 边框的样式 边框的颜色
border-left: 边框的宽度 边框的样式 边框的颜色
border-right: 边框的宽度 边框的样式 边框的颜色
边框样式常用：
solid 实线
dashed 虚线
内边距
边框和内容之间的边距就是内边距
非连写：
padding-top:;
padding-right:;
padding-bottom:;
padding-left:;
连写：
padding: 上 右 下 左
注意点
默认情况下设置了内边距，标签占有的宽度和高度会发生变化
内边距也会有背景颜色
外边距
标签和标签之间的距离
非连写：
margin-top:;
margin-right:;
margin-bottom:;
margin-left:;
连写：
margin
注意点：
外边距的合并现象：
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的
盒子模型
在HTML中所有的标签都可以设置 宽度/高度/边框/内边距/外边距
CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子
盒子模型的宽度和高度
- 内容的宽度和高度
通过标签的width/height属性设置的宽度和高度
- 元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同上
- 元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同上
box-sizing属性
解决的问题：
如果增加了border或padding或margin之后元素的宽高也会发生变化
取值：
context-box 元素的宽高 = 边框 + 内边距 + 内容宽高
border-box 元素的宽高 = width/height属性
注意点：
如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来
如果外面的盒子不想被顶下来，那么可以给外面的盒子添加一个边框属性
在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin
margin是本质上用来控制兄弟标签之间的间隙的
在嵌套关系的盒子中，我们可以利用margin:0 auto;的方式来让里面的盒子在外面的盒子中水平方向居中，但是其只对水平方向有效，对垂直方向无效
盒子居中和内容居中
- text-align:center 和 margin: 0 auto的区别
text-align:center 设置盒子中的文字和图片水平居中
margin: 0 auto 让盒子自己水平居中
行高和字号
在CSS中所有的行都有自己的行高
盒子的高度代表当前盒子的高度，行高是单行内容的高度
文字在行高中是垂直居中的
在企业开发中，一般盒子的高度和文字的行高设置是相同的使其垂直居中------ 只适用于单行文本
如果多行文本在盒子中居中需要设置box-sizing和padding使其居中