CSS
11. css选择器的优先级
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
12. line-height继承问题
- 父元素写具体数值，子元素继承该值
- 父元素写比例（如1/2），子元素继承该比例
- 父元素写百分比（200%），子元素继承计算出来的值
13. px、em、rem的区别
- px：绝对单位
- em：相对父级元素字体大小单位
- rem：相对HTML根元素字体大小单位
14. 浮动清除
- 浮动出现的原因
元素设置float - 浮动引起的问题
浮动定位会将元素排除在普通流之外，即元素脱离文档流，不占据空间。此时有可能会导致父元素的高度塌陷，即父元素的高度无法自动包含浮动的子元素。 - 如何清除浮动
- clearfix
<!-- 父元素添加伪类 -->
.clearfix:after {
content: '';
display: table;
clear: both;
}
- 父元素设overflow属性为auto或hidden
15. 外边距重叠
- 什么是外边距重叠
外边距重叠指的是当两个垂直外边距相遇时将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度。 - 重叠情况
- 两者都是正值，结果为两者之间较大的值
- 两者都是负值，结果为两者绝对值较大的值
- 一正一负时，结果为两者的和
16. BFC的理解
- 什么是BFC BFC即块级格式化上下文，其是一块独立的渲染区域，内部元素和边界以外的元素的渲染互不影响
- 形成BFC常用条件
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex、inline-block等
- 应用场景
- 防止margin重叠
- 清除内部浮动
- 子使用多栏布局
17. 响应式常用方案
- 什么是响应式
响应式布局是一种网络页面设计布局，其可以根据用户行为以及设备环境进行相应的响应和调整 - 常见实现方式
- 使用媒体查询(内部使用rem)
@media only screen and (max-width: 374px) {
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 110px;
}
}
p {
font-size: 0.1rem;
}
- 百分比和vw/vh
18. 回流和重绘
- 回流
回流是指浏览器重新计算页面中元素的几何属性（如位置和大小）的过程。当回流发生时，浏览器会重新计算所有受影响的元素的位置和大小，并更新页面的布局。
触发回流的常见操作:
- 添加或删除可见的DOM
- 元素的尺寸变化
- 内容的变化（如图片、文本等）
- CSS类的添加或删除
- 页面滚动
- 脚本操作DOM，如offsetWidth、offsetHeight、scrollLeft、scrollTop等
- 重绘
重绘是指浏览器重新绘制页面中元素的视觉效果的过程。当发生重绘时，浏览器会重新计算元素的样式，并将其绘制到屏幕上。
触发重绘的常见操作：
- 改变元素的背景色、字体颜色、边框颜色等
- 改变元素的可见性（如visibility属性）
- 改变元素的opacity
- 动画效果
- 回流和重绘的关系
回流一定会引起重绘，但重绘不一定会引起回流。回流更耗性能 - 优化方案
- 批量操作DOM，可使用DocumentFragment
- 如果需要获取元素的样式，可使用getComputedStle获取所有样式进行缓存
- 对于动画效果尽量使用transform和opacity
- 避免使用table布局，table布局中每个元素的大小以及内容的改变都会引起整个table的重新计算
- 利用BFC
