px、em、rem、vw、vh有什么区别？
基本概念
px：就是像素pixel的缩写
em：是相对单位，1em等于当前元素的 1font-size 的大小
rem：是CSS3新增的相对单位，1rem等于html的 1font-size 大小
vw和vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%
什么是视口？
视口 ≠ 屏幕大小，视口去掉浏览器头尾
演示代码
扩展知识点： vmax 和 vmin
vmax vh和vw中较大的值
vmin vh和vw中较小的值
如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax或vmin
对CSS选择器优先级的理解
常用的CSS选择器
id、class、标签、伪类、通配
选择器优先级的计算方式
- important! > 行间样式 > id > class > 标签 > 通配
- 注意：继承的优先级永远没有直接给的优先级高
- 组合起来：ABCD
伪类=class
注意：继承的优先级永远没有直接给的优先级高
代码演示
CSS哪些样式是可以继承的？
如何使用Chrome调试工具验证
line-height
line-height: 200px 直接继承
line-height: 1.5 根据自己的字体大小计算
line-height:200% 根据父级的字体大小计算
代码演示
对BFC的理解
什么是BFC
BFC 是 Block Formatting Context （块级格式上下文）的缩写
BFC是一个独立的空间，里面子元素的渲染不影响外面的布局
BFC作用
1、解决margin塌陷
2、清除浮动
如何触发BFC
- overflow: hidden
- display: inline-block / table-cell / flex
- position: absolute / fixed
解决margin塌陷代码演示
清除浮动代码演示
对盒子模型理解
什么是盒子模型
盒子模型就是元素在网页中实际占据的大小
盒子模型的计算方式
盒子模型 = width/height+padding+border 注意：没有margin
box-sizing
当box-sizing的值为 border-box 时，会改变盒子模型的计算方式
盒子模型 = width/height = 内容宽高+border+padding
offsetWidth
JavaScript中获取盒子模型的方式是 obj.offsetWidth / offsetHeight
代码演示
margin设置负值后，会怎样？有何应用？
margin负值有什么效果？
- margin-left 负值，元素自身向左移动
- margin-top 负值，元素自身向上移动
- margin-right 负值，右边的元素向左移动
- margin-bottom 负值，下边的元素向上移动
margin负值的应用
- 增加宽度
- 圣杯布局
- 双飞翼布局
演示代码
如何实现圣杯布局
什么是圣杯布局
两边固定宽度，中间自适应宽度
演示代码
如何实现双飞翼布局
什么是双飞翼布局
左右宽度固定，中间宽度自适应，中间的内容优先加载
演示代码
如何清除浮动？手写clearfix
清除浮动的方法
- 父级加 overflow:hidden
- 父级设置 clearfix
- 父级也浮动
手写clearfix
演示代码
手写垂直水平居中
常见的垂直水平居中方法
- position+margin负值的方法（宽高固定）
- position+margin:auto （固定宽高)
- display:table-cell + vertical-align:middle （固定宽度）
- position+transform（不需要固定宽高）
- flex （不需要固定宽高）
