px、em、rem、vw、vh的区别
基本概念
px：就是像素pixe的缩写 em：是相对单位，1em等于当前元素的1font-size的大小 rem：是css3新增的相对单位，1rem等于html的1font-size大小 vw和vh：是相对单位，1vw是视口宽度的1%，1vh是视口高度的1%
什么是视口？
视口 ≠ 屏幕大小，视口去掉浏览器头尾
扩展
vmax和vmin
- vmax：是根据视口的最大值进行计算的;例如视口的宽为1100px高为720px,那1vmax的值就是11px
- vmin：是根据视口的最小值进行计算的;例如视口的宽为1100px高为720px,那1vmin的值就是7.2px
演示代码
CSS选择器优先级的理解
常用的CSS选择器
id、class、标签、伪类、通配符
选择器优先级的计算方式
- important! > 行间样式 > id > class > 标签 > 通配
- 注意：继承的优先级永远没有直接给的优先级高
- 组合起来：ABCD
- 伪类=class
"p6-juejin.byteimg.com/tos-cn-i-k3…?" alt="2023-02-21_172145.png"
代码演示
CSS哪些样式可以继承
CSS中可以继承的样式
如何使用Chrome调试工具验证
演示代码
BFC
什么是BFC
- BFC是Block Context（块级格式上下文）的缩写
- BFC是一个独立空间，里面子元素的渲染不影响外面的布局
BFC作用
- 解决margin塌陷
- 清除浮动
如何触发BFC
- overflow:hidden
- display:inline-block/ table-cell/flex
- position: absolute/ fixed
演示代码
盒子模型
盒子模型就是元素在网页中时间占据的大小
盒子模型的计算方式
- 盒子模型 = width/height + padding + border
- 盒子模型 = 宽/高 + 内边距 + 边框
- 注意：没有margin(外边距)
box-sizing
- 当box-sizing的值为border-box时，会改变盒子模型的计算方式
- 盒子模型 = width/height =内容宽高 + border + padding
offsetWidth
- javaScript中获取盒子模型的方式是obj.offsetWidth/offsetHeight
- 注意：offsetWidth和offsetHeight的width、height的首字母大写
