px、em、rem、vw、vh有什么区别？
基本概念
- px：就是像素pixel的缩写
- em：是相对单位，1em等于当前元素的1font-size的大小
- rem：是css3新增的相对单位，1rem等于html的1font-size大小
- vw合vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%
什么是视口？
视口≠屏幕大小，视口去掉浏览器头尾
扩展知识点：vmax和vimn
vmax vh和vw中交大的值
vmin vh和vw中较小的值
如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax和vmin
常用的CSS选择器
id、class、标签、伪类、通配
选择器优先级的计算方式
- impoutant！>行间样式>id>class>标签>标签
*注意：继承的优先级永远没有直接给的优先级高
css中可继承的样式
line-height
line-height: 200px 直接继承
line-height: 1.5 根据自己的字体大小计算
line-height:200% 根据父级的字体大小计算
什么是BFC
BFC 是 Block Formatting Context （块级格式上下文）的缩写
BFC是一个独立的空间，里面子元素的渲染不影响外面的布局
BFC作用
- 解决margin塌陷问题
- 清除浮动
什么是盒子模型
盒子模型就是元素在网页中实际占据的大小
盒子模型的计算方式
盒子模型=width/height+padding+border
注意：没有margin
box-sizing
当box-sizing的值为 border-box 时，会改变盒子模型的计算方式
盒子模型 = width/height = 内容宽高+border+padding
offsetWidth
JavaScript中获取盒子模型的方式是 obj.offsetWidth / offsetHeight
