HTML语义化：让人更容易读懂；让浏览器更好的识别，让搜索引擎更容易读懂（SEO）。
块状元素：单独占一行，display：block/table；div、h1、h2、ul、p。
内联元素：按照浏览器的宽度自动换行，display：inline/inline-block；span、img、button。
盒模型：IE盒模型（content，不包含padding和border）；标准盒模型（content+padding+border）。边框和内边距的值是包含在 width 内的：box-sizing：border-box。
margin纵向重叠：相邻元素的margin-top和margin-bottom会发生重叠；空白内容也会重叠。取两者最大值，无内容忽略。利用BFC避免纵向重叠。
margin负值：margin-top和margin-left元素向上、向左平移；margin-botton和margin-right本身不变，下方元素向上和右侧元素向左平移。
BFC：一块独立的渲染区域，内部的元素的渲染不会影响边界以外的元素。
形成BFC的条件：overflow：hidden；float不是none；position不是absolute或者fixed；overflow不是visible；display是flex、inline-block等
BFC常见应用：清除浮动。
float：圣杯布局和双飞翼布局；三栏布局，优先渲染中间部分；两侧固定，中间部分自适应。
技术总结：使用float布局；两侧使用margin负值，中间内容横向重叠；防止中间被覆盖，padding（圣杯）和margin（双飞翼）。
手写清除浮动：clearfix：after{
content：‘’；
display：table；
claer：both；
}
clear： {
*zoom： 1； // 兼容IE低版本
}
flex-direction：布局方向；
justify-content：主轴对齐方式；
align-items：交叉轴对齐方式；
flex-wrap：是否换行；
align-self：子元素在交叉轴的对齐方式；
relative：根据自身定位；absolute：根据最近一层定位元素定位。
定位元素：absolute，relative，fixed；如果没有定位元素则是body；
水平居中：inline元素：text-align：center；
block元素：margin：auto；
absolute：left：50% + margin-left负值；
垂直居中：inline元素：line-height等于height；
absolute：top：50% + margin-top负值；
absolute：transform（-50%，-50%）
absolute：top，left，bottm，right=0+margin：auto；
line-hegiht继承：写具体数值，则继承该值；写比例，则继承该比例；写百分比，则继承计算出来的值；
rem：长度单位；相对长度单位，相对于根元素（html），常用于响应式布局；
px，绝对长度单元；
em，相对长度单元，相对于父元素；
响应式方案：media-query，根据不同的屏幕宽度设置根元素font-size。
rem弊端：“阶梯”性；
网页视口尺寸：
window.screen.height 屏幕高度；window.innerHeight 网页视口高度；document.body.clientHeight body高度。
vh 网页视口高度的1/100; vw 网页视口宽度的1/100;vmax取两者最大值；vmin取两者最小值。
