BFC
BFC主要用于解决外边距重叠和清除浮动问题，本质上是创建一个独立的渲染容器，满足BFC如下：
1.html根元素
2.overflow为hidden/scroll/auto
3.脱离文档流的容器，如absolute/fixed，float浮动元素
4.display:flex/table-cell/table-caption/inline-block/inline-flex
清除浮动：浮动脱离文档流，可能导致父元素高度塌陷，将父元素设置为BFC时，高度不会塌陷，会计算浮动元素高度（另一种方式是采用添加样式为clear:both的元素）。
外边距重叠：子元素在没有边框父元素，或相邻兄弟节点间可能会出现子元素外边距穿透父元素，兄弟节点外边距取最大值的问题，此时通过BFC可以解决。
CSS选择器
1.A+B 选择紧接着A后面的那个兄弟节点B
2.A>B 选择直接后代
3.A ~ B选择A后所有兄弟节点B
4.A[B]/A[B='c']选择A中带有属性B和B的值为'c'的节点，A[B*='c']代表属性包含c的元素，A[B^='c']代表属性以c开头的元素，A[B$='c']代表属性以c结尾的元素。
5.A:not(.B)选择A中不是B类的所有元素。
6.A::after伪元素，代表元素的一部分
7.A:hover伪类，代表行为伪类。
8.A:nth-child(2),A:nth-child(2n),A:nth-last-child(2),A:first-child用于表示第几个A标签
文字换行
1.wrod-wrap:normal时不会单词内部换行，单词过长会超边界。break-word时会单词内部换行。
2.break-word关心单词内换行方式，normal不换行，break-all都可换行，keep-all指中/日、韩文本超出区域不断行，但会在标点出折行。
3.white-space控制空格和换行符，normal连续空格换行符合并为一个。nowrap:表示文本不会被自动换行；pre:表示文本中连续多个空格换行都会被保留，不会自动换行。pre-wrap:表示文本中连续多个空格换行会被保留，超出容器宽度时，会发生换行。pre-line:表示文本中连续多个空格会被合并成一个空格，但是换行会被保留，会自动换行。
CSS渐变和动画
1.CSS渐变有线性渐变（line-gradient)和径向渐变（radial-gradient)，三个参数分别为起点方向（如top代表从上到下），起点颜色，终点颜色。
2.动画关键帧：
@keyframes animationName {
from { properties: value; }
percentage { properties: value; }
to { properties: value; }
}
// 或者
@keyframes animationName {
0% { properties: value; }
percentage { properties: value; }
100% { properties: value; }
}
CSS实现三角形
.box{
width:0;
height:0;
border-left:50px;
border-right:50px;
border-bottom:100px;
}
实际上盒子模型中的边框为梯形，另外可以使用clip-path：polygon来定义多边形（剪裁路径）。
HTML语义化
尽可能使用
这种可以一目了标签含义的方式，而尽量减少使用div或span。CSS3新属性
1边框：border-radius，box-shadow，border-image。
2背景：background-clip，background-size，background-origin。
3文本：word-wrap，text-overflow（clip/ellipsis)，text-shadow,text-decoration
4颜色：增加rgba和hsla颜色模式。
5过渡/动画/渐变：transition，transform，animation。
CSS优化
1.内联使用关键CSS
2.异步加载CSS：使用js动态创建css的link标签；link标签media=noexist，加载后media=screen/``all；link标签rel=alternate stylesheet,加载后rel=stylesheet
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'"> //设置media
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">//设置rel
3.资源压缩:使用webpack进行代码压缩.
4:不要使用@import,多个@import可能影响导致下载顺序错乱或者影响并行性.
单行/多行省略
1.单行:white-space:nowrap,text-overflow:ellipsis,overflow:hidden.
2.多行:使用伪元素定位,即设置overflow:hidden及行高line-hight固定后,使用伪元素::after作为省略号(content:'...'),并且设置为绝对定位;基于行数,使用-webkit-line-clamp:2,overflow: hidden,text-overflow: ellipsis
视差效果实现
1.设置background-attachment为fixed,元素滚动时,背景图片不滚动.
2.父元素使用perspective:1px,子元素使用transform: translateZ(-2px);,利用透视原理实现.
H5新特性
1.媒体:audio或者video,音频或者视频处理标签.
2.图形:canvas/svg,webgl等方式处理2d/3d场景
3.语义化标签:header,main,nav等.
4.存储:localStorage,sessionStorage,indexedDB.
