juejin小册前端面试3一面 3：CSS-HTML 知识点与高频考题解析

一面 3：CSS-HTML 知识点与高频考题解析

CSS 和 HTML 是网页开发中布局相关的组成部分，涉及的内容比较多和杂乱，本小节重点介绍下常考的知识点。

知识点梳理

● 选择器的权重和优先级
● 盒模型
○ 盒子大小计算
○ margin 的重叠计算
● 浮动float
○ 浮动布局概念
○ 清理浮动
● 定位position
○ 文档流概念
○ 定位分类
○ fixed 定位特点
○ 绝对定位计算方式
● flex布局
● 如何实现居中对齐？
● 理解语义化
● CSS3 动画
● 重绘和回流

选择器的权重和优先级

CSS 选择器有很多，不同的选择器的权重和优先级不一样，对于一个元素，如果存在多个选择器，那么就需要根据权重来计算其优先级。

权重分为四级，分别是：

1. 代表内联样式，如style=“xxx”，权值为 1000；
2. 代表 ID 选择器，如#content，权值为 100；
3. 代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；
4. 代表元素选择器和伪元素选择器，如div、p，权值为 1。

**需要注意的是：通用选择器（）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他