选择器
分类
简单选择器：id选择器、类选择器、标签选择器、
组合选择器：后代选择器（空格）、子选择器（>）、兄弟选择器 （+）、通用选择器（~）
伪类（:hover）
伪元素（::before, ::firt-child，::not()）
属性选择器
ps. 兄弟选择器 （+）与通用选择器（~）： “+”指“自己”相邻兄弟，“~”会应用所有兄弟
优先级
!important 最高
内联 1000分
id选择器 100 分
类选择器、属性选择器、伪类 10 分
标签选择器、组合选择器、伪元素 1 分
优先级按照累加计算，数值越高优先级越高。
<!-- 优先级 -->
<style>
p {
color: red;
}
.p {
color: grey;
}
div > p {
color: green;
}
</style>
<div>
<p class="p">1111</p>
</div>
<p class="p">222</p>
<!-- 兄弟选择器与通用选择器 -->
<style>
div~p {
color: red;
}
div+p {
color: green;
}
</style>
<body>
<div>111</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
IFC/BFC
IFC
英文全程 inline formating context， 行内格式上下文。
特点：
- 自左向右排列
- 由行高
line-height决定高度，即通过 inline-level box 计算，但是具有多个 inline-level box 的IFC，排版通过 vertical-align 决定。 - 当长度过大时，会自动换行，一行是一个 inline-level box（即行级盒模型）。
ps. 换行的相关设置
标明如何断句：word-break: break-all 直接换行 | break-word 根据单词，遇到空格换行 | keep-all 不换行 | normal 浏览器默认行为
标明是否断句：word-wrap: break-word | normal
标明空格断句：white-space: normal 浏览器默认行为 | pre-wrap 同 html 编辑换行相同 | nowrap 不换行 | pre-line 剔除空格，保留换行 | pre 同<pre>
BFC
英文 block formating context，块级格式上下文。
特点：
- 一个 BFC 占一行，垂直方向排列，形成的是 block-level box（即块级盒模型）
- BFC 内部隔离
- 处在同一个BFC下，相互影响，发生 margin 重叠
- 触发 BFC 的方式有：浮动、设置 overflow、设置 margin、绝对定位、固定定位、display: flex
盒模型
标准模式：设置了 <!DOCTYPE > ，标识 html 版本
怪异模式：未设置 <!DOCTYPE >
盒模型：content、padding、border、margin 的结构
盒模型计算方式可以通过 css3中 box-sizing: border-box | content-box; 设置计算方式，其中 content-box，是计算 content 来表示长宽，border-box 是将 content + padding + border，一起计算至长宽中，类似于IE6的怪异模式。
其他
margin 双边距
主要体现在两个方面：
- 父与子边距重叠，即子无法与父元素拉开边距
- 兄弟边距重叠
父与子清除边距重叠：
- 父容器增加非 overflow: visible;，例如 overflow: scroll | hidden;
- 父容器增加 padding 或 border
- 父容器浮动
- 父容器设置 position: absolute;
- 父容器设置 display: flex
兄弟清除边距重叠：
- 设置浮动
- 父设置 display: flex
原理是，通过声明成 BFC 按照 BFC 规则布局。
margin 塌陷
父元素使用了浮动导致。
z-index
border/bacground < z-index<0 < block-level < float < inline-level < z-index:0 < z-index>0
flex
使用flex能做那些布局？（待补充）
@media
待补充
transform
有那些功能？（待补充）
常见的布局
垂直居中，水平居中
html
<div class="father">
<div class="child"></div>
</div>css
// 绝对定位
.father {
width: 500px;
height: 500px;
}
.child {
width: 50px;
height: 50px;
}
// 绝对定位
// flex
// transform:
// margin: 0 auto;左固定，右适应
待补充
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。