background
- background-position：设置背景图片的起始位置
- background-attachment：背景图是否在视口内固定，或者随它的包含块一起滚动（scroll，fixed）
- background-size：设置背景图片大小，（auto，cover，contain， width height）
margin
margin 的 百分比值，是按其包含元素的宽度计算
边距塌陷/折叠 （Margin Collapse）：元素底部和另一个元素的顶部边距有时会折叠成一个边距，即 2 个元素中最大的边距。只发生在上下边距，左右边距不会发生。3 种发生情况;
同一层相邻元素之间
没有内容将父元素和后代元素分开
如果没有 border，padding，行内内容，也没有创建块级格式 上下文或清除浮动 来分开一个块级元素的 margin-top 与 其 内一个或多个后代块级元素的 margin-top；同理，margin-bottom 也是。。则会出现父级块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
空的块级元素：当一个空元素 margin-top 直接贴到元素的 margin-bottom 时也会发生边界折叠。
以上边距折叠，只发生在 Block-Level 的元素，浮动元素或绝对定位元素（脱离了正常文档流，且会生成块级的框，变成inline-block元素）不会。
Test
- text-transform: 设置文本的大小写形式，uppercase, lowercase, capitalize(首字母大写)
- text-indent：设置文本第一行的缩进
- letter-spacing：字符之间的距离
- word-spacing：单词之间的距离
- white-spacing：如何处理 内部的空白？
- text-shadow： 字体阴影效果
- text-overflow：如何处理未显示的溢出内容？显示一个省略号，或一个自定义字符串
text-overflow:clip | ellipsis | initial | inherit
Font
@font-face： 引入外部字体（本地或在线）
Display ，visibility
**display:none**，从 DOM 删除元素，该元素不再占据空间
visiblity: hidden,隐藏元素，但该元素仍在布局中占据空间
z-index
在 CSS 中所有的盒模型元素都处于三维坐标系中，除了常用的横坐标和纵坐标，还可以沿着”在轴”层叠摆放，使用z-index属性来指定，当前层在 z 轴的位置。具体规则如下
不含 z-index 属性，默认的摆放规则（从底到顶顺序）
- 根元素的背景和边界
- 普通文档流里的块元素（无 position,或者 position: static）,按照 HTML 中的出现顺序堆叠
- 定位元素按 HTML 中的出现顺序堆叠
浮动元素的摆放规则
使用 z-index 改变层叠顺序
在使用 z-index 属性时，只有定位元素，且 z-index 不等于 auto 时（即
position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素），才会创建层叠上下文。当没有指定 z-index 时，默认为 0，所有元素被渲染在默认层（0 层）
层叠上下文
层叠上下文的形成条件：
- 文档根元素
- position 值为 absolute 或 relative，且 z-index 的值部位 auto 的元素
- position 值为 fixed 或 sticky 的元素
- flex 容器的子元素，且 z-index 值不为 auto
- opacity 属性值小于 1 的元素
子级层叠上下文被视为其父级层叠上下文的一个独立单元，子级层叠上下文的 z-index 值只在父级中才意义，即比较 z-index 时，先比较父级的 z-index
水平/垂直 居中
- 块元素水平居中，给定宽度，左右 margin:auto
- 文本水平居中，text-align:center
- 图片水平居中，display:block 左右 margin:auto
- 块元素 左、右对齐，绝对定位（ position:absolute），或 使用 浮动 ，并清除浮动
- 文本 垂直 居中 ，上下设置 padding 或 line-height 等于 height
- 块元素 水平/垂直居中，使用 position 和 transform； 注意元素 marign：0
- 块元素 水平/垂直居中，使用 flexbox
媒体查询 @media 响应式布局
响应式导航
