虽然有些东西每天用到，但是并不意味着真的记住了，经常的就是知道有那么个东西存在，然后去百度，谷歌。有人说，写程序不就是 CV大法么？我觉得如果能熟记于心的话，对自己也是一种提升。
CSS
盒模型
盒模型: 由 content , padding ,border , margin 组成。但是 mraing 只是盒子占据的位置，而不组成盒子的大小。
盒模型有两种方式：
标准盒模型: 由 content 组成。
IE盒模型: 由 content + padding + border 组成。
CSS3的新特性
- 选择器:
element1~element2: 选择前面有element1元素的每个element2元素。
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
:root: 选择文档的根元素。
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
E:target: 选择当前活动的E元素。
E:enabled: 选择每个启用的E元素。
E:disabled: 选择每个禁用的E元素。
E:checked: 选择每个被选中的E元素。
E:not(selector): 选择非selector元素的每个元素。
E::selection: 选择被用户选取的元素部分。
- 动画
Transition: 动画过渡效果。
Transform:应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。
Animation: 制作动画的功能。
- 文字效果
word-wrap: 是否换行
text-overflow: 超过边界时是否显示
text-shadow: 文字投影
text-decoration: 文字渲染
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
- 渐变
linear-gradient: 线性渐变
radial-gradient: 径向渐变
- 尺寸
resize: 是否可由用户调整元素尺寸
// 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
- 盒模型
// 标准盒模型
box-sizing:content-box;
// IE盒模型
box-sizing: border-box;
CSS选择器及其优先级
从上之下依次是：
!important 优先级爆表
内联样式 style=””
id 选择器 #id
类选择器 .class / 属性选择器 .class[href=””] / 伪类选择器 ::after
元素选择器 div / 关系选择器 div+span / 伪元素选择器
通配符选择器 *
BFC
BFC (block formatting context): 格式化上下文，是盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
应用
防止 margin 重叠
清楚内部浮动
自适应多栏布局
防止字体环绕
触发条件
根元素
float的值不为 none
overflow 的值不为 visible
display 的值为 inline-block,table-cell, table-caption
position 的值为 absolute, fixed
特性
内部的 Box 是紧邻的垂直摆放的
垂直方向上的距离由 margin 决定
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动元素也参与计算
BFC 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
水平居中
// 行内元素
text-align: center;
// 块级元素
margin: 0 auto;
// flex布局
display: flex;
justify-content: center;
// 绝对定位定宽
position: absolute;
width: 宽度;
left:50%;
margin-left: -0.5*宽度
// 绝对定位不定宽
position: absolute;
left: 50%;
transform: translate(-50%, 0);
// left,right: 0
position: absolute;
width: 宽度;
left: 0;
right: 0;
margin: 0 auto;
垂直居中
// 行内元素
height: 高度;
line-height: 高度;
// table
.parent {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
}
// flex
display: flex;
align-items: center;
// 绝对定位
position: absolute;
top: 50%;
height: 高度;
margin-top: -0.5高度;
// 绝对定位不定高
position: absolute;
top: 50%;
transform: translate( 0, -50%);
// top,bottom: 0
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;