精通CSS 高级 web 标准解决方案
（记录一些我感兴趣的内容，书中非常详细地写了 HTML CSS 这些，包括历史，发展，进阶，还有规范什么的，我推荐大家还是看一下书）
渐进增强
平衡向后兼容性与最新的 HTML 和 CSS 特性，涉及一种叫做 渐进增强 的策略 。为 元素 准备可用的内容，然后再为支持新特性的浏览器添加更多交互优化。
例子：
input type=“text” id=“field-email” name=“field-email”
input type=“email” id=“field=email” name=“field-email”
不支持的浏览器会默认 text 类型，而支持浏览器则自动 email 想让用户在这里填写什么样的数据。
.overlay{
background-color:#000；
background-color:rgba(0,0,0,0.8)
}
即使并非所有浏览器都支持 rgba，我们也可以使用它，只是要为它声明合适的后备代码。
厂商前缀
-webkit- 开头的适用于基于 WebKit 的浏览器，如 Safari。Chrome 和 Opera 都基于 Blink 引擎，而 Blink 最初也是基于 WebKit 开发的，所以 -webkit- 前缀通常也适用于这三个浏览器。 -moz- 前缀适用于基于 Mozilla 的浏览器，如 Firefox。 -ms- 前缀则适用于微软的 Intenet Explorer。最后加了一条不带前缀的声明，这样那些支持标准属性名称的浏览器就不会漏网了。
为此浏览器厂商也开始竞争对手引擎特定的前缀，也便让流行的网站能在自己的浏览器上打开。但这样也造成了混乱，于是多数浏览器厂商抛弃了厂商前缀。（我接触的代码很多都加了前缀的）
caniuse.com 可以属性在不同浏览器的支持情况。
条件规则与检测脚本
@supports(display：grid) {
}
条件规则的问题是其本身也很新，只能将它应用于新的浏览器中，因为旧版本浏览器不支持。此外可以通过 JavaScript 来检测支持情况，比如使用 Modernizr这个库。 dernize的原理是为 HTML 添加支持提示信息，然后可以依据这些信号来编写 CSS
结构化元素
- section
- header
- footer
- nav
- article
- aside
- main
建议看看这个网站：http://html5doctor.com
盒模型
盒模型是 CSS 的核心概念，描述了元素如何显示，页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容，内边距，边框和外边距。
<div class="group"> <acticle class="block"></acticle></div>
.block{ margin-left : 5%}
这里 5% 指的是父元素 .group 宽度的5%，如果 .group 宽度是100像素，那么这里左外距的宽度就是 5像素。
外边距折叠
垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。
float
浮动元素脱离文档流，因此包含浮动元素的div不会占用空间；无法在文档流中为它生成高度。可以使用：after 伪类，给包含浮动元素的 div 设置 display:block,clear:bots,content:‘’，也可以设置块级格式化上下文。
BFC
- display 属性值设置为 inline-block，可以为内容创建类似块级的上下文。
- float 属性值不是 none 的元素。
- 绝对定位的元素。
- overflow 属性值不是 visible 的元素。
控制字母和单词间距
word-spacing 属性，控制词间距 letter-spacing 控制字符间的距离
@font-face 规则
@font-face规则可以接受几个声明，如果有一个 font-weight 指为 bold，那么就是告诉浏览器 如果 font-family 中字体的 font-weight 设置成了 bold，那么可以使用这里定义的字体文件。 如果只是定义了一次，那么其他粗细也可以使用这里的字体文件。
Web字体会带来一个问题，首先浏览器需要下载额外的字体文件，这显示会延长用户等待的时间。使用 Web字体首先必须注意不要加载过多的字体文件。
使用 JavaSCRIPT 加载字体
web Font Loader,这个库体积很小，在浏览器支持的情况下，它会使用原生的字体加载 API，在浏览器不支持的情况下，它会模拟相同的功能。
http://fittextjs.com/
交互式网站设计很好用，它允许内容根据用户的查看终端的大小自动调整。自然地你的web文本随着查看它的浏览器或者终端大小变窄而自动收缩，但是某些情况下会使题目和标题变得有点难看，尤其是由于文本自动缩进或者多出新的一行等情况。这就是FitText.js插
件的功能，它能够使你的标题像一张回应式图片一样调整大小，单词不会出现跑到新的一行的情况。
Lettering.js
Lettering.js 是最简单最流行的网络版式插件之一。通过分拆每个文本，并将每个字母放在定制好的中，该插件能够让你精准的操控标题版式。使用它小心的调整你的字距或者添加各式各样的CSS，从而让每个单词都有超级赞的效果。
Bacon！
很酷的名字吧，亲！Bacon插件能够让你的文本像贝塞尔曲线一样排列。在InDesign中围绕图片处理文本固然简单。但是在HTML/CSS中文本都是按照方块区域排列的。所以说虽然能够强行用HTML能够达到相似的效果，但是用Bacon能够让你轻松简洁的利用坐标参数达到这些效果！
Baseline.js
在web设计中控制纵向间距很简单吧，只需要我们设置line-height属性。不幸的是一旦有图片插入就没那么容易了，这个时候就需要Baseline.js了。只需要一行javascript代码Baseline.js就能够调整你的图片区域到你想要的位置。换句话说它能让你的内容时刻都与你的基线网格对齐。
Arctext.js
给字体设置弧度并不是每天都会遇到的情况。但是在一些情况下，比如设计一个吸引人的标题、重设计一个复古商标，Arctext.js这个插件真的很给力！插件如其名，它能够根据你的需要设置指定半径长度来做出不同的圆弧。
加载图片（以及其他文件）
https://www.css-js.com/tools/base64.html 转base64 个人推荐 使用嵌入的数据有好处也有坏处。使用它主要是为了减少 HTTP 请求，但于此同时也会增加样式表体积，因此请慎重使用。
减少图片大小
优化图片，https://tinypng.com/ 这个网址可以帮助我们压缩图片。
响应式
之前工作中接触了很多响应式网页，这个需要注意的是细节。
