目录
1. 盒子模型
2. css 选择器
3. css 三大特性
4. css 字体
5. pointer events
6. css reset
7. @viewport
8. 使用 rem 代替 px 没有必要替换，看使用场景
9. 百分比相对属性
w3c： content, padding, border, margin
ie: content, margin, 其中 content 包含了 padding 和 border
继承、层叠性、权重
什么是继承？哪些样式可以继承？哪些样式不可以继承？
继承：父节点具有某些属性样式，子节点没有设置这个样式，却能够表现出跟父节点相同的这个样式
虽说是经验之谈，但是我可以通过 chrome devtool 查看，在 Elements 下，查看 Styles，可以查看到选中节点的样式，其中有一栏
Inherited from，这里可以用于测试那些样式可以继承
可以继承的样式：
不可继承的样式： width padding border margin height
指一个节点，如果有多个相同的样式设定，如果确定采用哪一个?
根据权重分配与计算，可以在 这里 看到权重的信息
指同一个元素，可以设置多层样式，浏览器根据特定的层叠算法，计算出css样式对应的权重值，获胜的则应用到节点上。
time: 2018.10.25
今天做一个展示型的网页，移动端展示，需要设置字体，以为在 pc 上跑出了效果，手机端就能展示相应的字体，其实不然。浏览器能展示这个字体，是因为宿主环境自带了这种字体，比如 windows 就有微软雅黑、宋体等，但是 iphone 就没有，iphone 自带的中文字体是 Heiti SC ，英文字体是 Helvetica。
现在开始要处理字体、单位(px, rem)等 css 基本知识了，这里总结一下 css 字体。
基本原则
@font-face {} 引入字体获取字体：访问 webfont-generator ，上传 ttf 字体，然后转换生成下载 woff 、 eot 文件， eot 是 ie 专属， woff 是其他主流浏览器都可以用的。
应用字体
@font-face {
font-family: 'kaitiregular';
src: url('../styles/simkai-webfont.woff2') format('woff2'),
url('../styles/simkai-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'kaitiregular';
}
time: 2018.11.06
最近做嵌套滚动时，出现了滚动联动问题，原因是 chrome 浏览器为 touchStart, touchMove 实现了事件默认 passive 值为 true 。
可以通过设置 passive 为 false 解决这个问题，也可以通过设置 touch-action 属性为 none 实现。
touch-action： css 属性。控制该元素如何响应用户操作。可选值有 auto, none, manipulation, pan-x 等，功能是可控制用户点击、缩放等操作。
pointer-events： 事件绑定参数控制。控制元素是否成为鼠标事件的 target 。可选值有 auto, none 等
判断是否是支持 touch：@media (any-hover: hover)
time: 2018.12.29
谈到响应式设计，马上想到的是 css 属性 @viewport，但是浏览器支持不是很好，暂时不做学习
css length 的单位，没有必要替换，看使用场景
使用其它距离作为自己的单位，通常用于指定字符大小、行高、视窗大小
em, ex, rem, ch, lh, rlh
em: 表示获取元素的 font-size 计算值。如果用在 font-size 本身，则其继承父元素的 font-size ，最顶层会获取浏览器初始的 font-size 字体大小。
rem: 表示获取根元素 html 的 font-size 计算值。如果根元素没有具体的
比例长度，相对于视口的长度大小，视口即文档可视的部分。
vh, vw, vi, vb, vmin, vmax
px, mm, cm, in, pt, pc, mozmm
1in === 96px
3pt === 4px
25.4mm === 96px
相对长度单位，比如 em、rem ，被用于创建可伸缩布局，即使用户改变字体大小，页面布局也会保持一个自适应布局。
px 属于绝对长度单位，不能保持一个自使用布局变化。
px 也是一个相对单位，每个显示设备都会对 px 做一个适配，不同 dpi、ppi 都会对它做一个比例改变，用以保证在不同 dpi、ppi 设备上构建的页面，展示效果都一样
padding, margin 相对于父级元素宽度；
line-height 相对于当前元素字号
1 css 继承与层叠
2 mdn @viewport
3 知乎 2019 web 开发技术指南和趋势
4 mdn length
5 css 百分比