“无上甚深微妙法，百千万劫难遭遇，我今见闻得受持，愿解如来真实义。” ——《开经偈》
ie8- 不支持html5新增标签，可通过引入js来实现：html5shiv
<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<![endif]-->或按实际使用手写js兼容，document.createElement
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement('header');
...
</script>
<![endif]-->最后重置下html5标签的css默认样式：
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}盒模型可通过box-sizing: border-box | content-box设置，默认值为content-box，ie8+支持。
- border-box表示设置的
width/height包括padding和border - content-box表示不包括
padding和border - 不论是border-box还是content-box都不包括margin
对应上图，如果是默认的话，则width为605px，如是border-box的话则为605+24+103+30=673px。
常配合百分比单位使用，尤其应用在移动端。如width:100%;padding:10px;，如果不设置为border-box，则实际宽度为100%+40px，不符合我们的预期要求。
css的选择器是从后往前查询，所以层级越深，效率越低，一般建议最多不超过4层。
css选择器包括：通配符*选择器，class选择器，id选择器，元素选择器，属性选择器，伪类选择器，伪元素选择器，最后
css选择器权重原则：!important > 行内样式 > id > 类/属性/伪类 > 元素/伪元素；权重相同的按照样式表中出现的顺序，后面的覆盖前面的
css重置分为归零重置及纠正重置
- 归零重置的代表为：Eric Meyer’s “Reset CSS” 2.0
- 纠正重置代表为：normalize.css
如果你想省事的话直接引入normalize.css，然后再进行部分归零重置；如果深入研究可以把两个揉合一起，可参考sandal reset
属性大概分为下面几类：
- 显示：display，visibility，overflow等
- 位置：position，float，clear，z-index，transform等
- 大小：width，height，margin，padding，border，outline，box-sizing等
- 文字： font系列，color，text系列等
- 背景：background系列，gradient系列等
- 修饰：border-radius，box-shadow，opacity，appearance，filter，clip等
- 布局：flex，grid等
- 动画：transition，animation等
从使用上大概分为两类，一类是死板的（如设置文本颜色只能用color），一类是灵活的（如实现一个左边栏固定的布局，可以使用的技术就多了）。相对来说可灵活使用的则更需要掌握各种实现方案的利弊
css3新增了rem单位及vw系列单位。rem单位是以html的字体大小为相对计算的，而vw则是以视窗大小的
包括水平及垂直居中，除了常规的水平居中text-algin:center、margin-left:auto;margin-right:auto和垂直居中vertical-align:middle，line-height: height(单行文字垂直的line-height等于height)，还有postition方法，首先设置top:50%;left:50%，再通过margin-left:-width/2;margin-top:-height/2，或css3的transform: translate(-50%, -50%)调整居中，最后还有为布局而生的flex方法。另：对于img或video还有最新的object-position来调整
在flex出现之前，布局不外乎float，position，还有少量的inline-block及table；而现在有了flex和grid，更是如虎添翼。
- Learn CSS Layout，中文版学习css布局。一步步学习布局，适合入门
- 深入了解flex
- flex完全指南：三大版本对比
- 960网格布局：网格布局的开创者，知道原理其余的各种网格布局也就没问题了
- layout gala：强烈推荐，float布局精髓
- The stacking context，影响z-index的因素
- 深入理解CSS中的层叠上下文和层叠顺序
- The Z-Index CSS Property: A Comprehensive Look，文章比较老，涉及到ie7-的一些z-index bug
- 深入理解CSS中的行高——简版
- 深入理解css 行高——ppt详细版
- css行高line-height的一些深入理解及应用
- MDN BFC，新建BFC的条件
- Understanding Block Formatting Contexts in CSS，中文版理解CSS中的块级格式化上下文
- 关于Block Formatting Context－－BFC和IE的hasLayout
- css 101: BFC
- 重提CSS中外边距折叠问题
浏览器兼容分为两部分：浏览器是否支持；如何针对浏览器写hack。支持情况可以通过can i use查询，而针对各种浏览器写hack可以使用browser hacks
故不登高山，不知天之高也；不临深溪，不知地之厚也。--摘自《劝学》
相当于多了两个空白标签，可以放置一些修饰的点缀或内容等
字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等
总得来说，图片的使用分为background和img，而从优化方向来说分为减少请求和减少大小。
图片优化原则：
- 能不使用就不使用（使用css3绘制简单的图形等）
- 矢量图与位图选择
- 挑选合适的图片格式（gif, png, jpg, webp等）及准备不同的规格大小（不同大小或retina屏）
- 合并（sprites）与压缩（有损压缩和无损压缩）
资源链接：
- 图片延迟加载的实现
- CSS Gradients
- css sprites
- 图片优化 - 谷歌图片优化手册
- baseline vs progressive
- 图片原理与优化
- WebP 探寻之路
- Web性能优化：图片优化
目前svg最大的用途在图标及动画，最大的优点在于矢量图，可以任意缩放不失真，而且大小还比较小。
- svg 兼容性
- Pocket guide to writing svg
- MDN svg tutorial
- 理解SVG的viewport,viewBox,preserveAspectRatio
- SVG Sprite技术介绍
- SVG
symbola Good Choice for Icons - svg sprites 兼容js
- svg line animation
- 超级强大的SVG SMIL animation动画详解
- awesome svg
分transition动画和animation动画，前者为两帧动画（只能控制开始和结束），而后者可以对任意帧进行更多处理。
- Intro to CSS 3D transforms
- CSS3 Transitions 101
- CSS3 Animations 101
- CSS3: Animations vs. Transitions
- css3 动画疑难杂症
- High Performance Animations
- css triggers
动画库
响应式主要包括断点的设置，及各种断点情况下样式的改变
如果需要ie8-也支持相应式，得引入js库兼容，如respond.js（不建议ie8去做响应式）
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent