px、em、rem、vw、vh区别？

• px就是像素。
• em是相对单位，1em等于当前元素的1font-size的大小（适用于首行缩进）
• rem是CSS3新增的相对单位，1rem等于HTML的1font-size大小
• vw和vh是相对单位，vw是视口宽度的1%，1vh是视口高度的1%
• 注：视口去掉浏览器头尾
• vman vh和vw中较大的值 vmin反之（某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用）

css选择器及优先级

• 常用：id，class，标签，伪类，通配符选择器
• important>行间样式>id>class>标签>通配
• 注：继承的优先级永远没有直接给的优先级高
• 计算方式（伪类=class） ![`JLW3CZ96@MM.png

css样式继承

• line-hight:200px直接继承
• line-hight:1.5根据自己的字体大小计算
• line-hight:200%根据父级的字体大小计算

BFC

1. BFC是一个独立的空间，里面的子元素的渲染不影响外面的布局
2. 解决margin塌陷和清除浮动的问题
3. overflow: hidden，和在父级display: inline-block / table-cell / flex
   position: absolute / fixed 触发BFC。

盒子模型（元素在网页中实际占据的大小）

• 盒子模型 = width/height+padding+border 注意：没有margin
• 当box-sizing的值为 border-box 时会改变盒子模型的计算方式:
  盒子模型 = width/height = 内容宽高+border+padding
• offsetWidth
  JavaScript中获取盒子模型的方式是 obj.offsetWidth / offsetHeight let w = document.getElementById("div1").offsetWidth;