随着秋季招聘的提前批次悄然开启，职场人常说的“金九银十”黄金求职季已近在眼前，而事实上，八月份的提前批机会更是不容小觑。为了抓住这一关键时期，今天我们来盘点一下CSS面试中高频考察的知识点，帮助大家有的放矢，充分准备。
说说你对css盒子模型的理解
关于这个问题我们可以先说css盒子模型是什么，如：
当浏览器在渲染一个html容器时，会根据某一个标准来绘制出一个矩形，该矩形包含content, padding, border, margin。
- Content（内容） ：这是盒子内实际显示的内容，如文本、图片等，它的尺寸由
width和height属性定义。 - Padding（内边距） ：内容区域和边框之间的空白区域，可以为透明或带有背景色，可通过
padding属性设置。 - Border（边框） ：围绕在内边距外的一条线，具有宽度、样式和颜色，由
border-width、border-style和border-color属性控制。 - Margin（外边距） ：边框之外的空白区域，用于控制元素与页面其他元素之间的距离，通过
margin属性调整。
然后根据某个标准我们就能说出css盒子模型的两种模型：
标准盒子模型、IE盒子模型
这两种模型的区别主要是在于对width和height的计算区别
- 标准盒模型：width = content 总宽度=width+padding+border+margin
- IE盒模型：width = content + padding + border 总宽度=width+margin
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing: content-box表示标准盒模型（默认值）box-sizing: border-box表示IE盒模型（怪异盒模型）
说说css中的选择器有哪些？优先级是怎么样的？
| 选择器类型 | 示例 | 描述 | 优先级权重 |
|---|---|---|---|
| 内联样式 | element | 直接写在HTML元素的style属性中的样式 | 1000 |
| ID选择器 | #id | 选择具有特定ID的元素 | 100 |
| 类选择器 | .class | 选择具有特定类名的元素 | 10 |
| 属性选择器 | [attribute] | 选择具有特定属性或属性值的元素 | 10 |
| 伪类和伪元素选择器 | :pseudo | 选择处于特定状态的元素或添加额外内容 | 10 |
| 元素类型选择器 | element | 选择特定类型的元素 | 1 |
| 子元素选择器 | parent > child | 选择作为直接子元素的特定类型元素 | 1 |
| 后代选择器 | ancestor descendant | 选择某个元素的所有后代元素中匹配的元素 | 1 |
| 相邻兄弟选择器 | elem1 + elem2 | 选择紧接在另一个元素后的元素，两者拥有相同父元素 | 1 |
| 一般同胞选择器 | elem1 ~ elem2 | 选择前面有另一个特定元素的所有元素 | 1 |
| 通用选择器 | * | 选择所有元素 | 0 |
注意：优先级权重是累加的，如果有多个选择器串联在一起，它们的权重会相加。例如，一个类选择器和一个元素类型选择器一起使用，其优先级权重为11。
内联样式 > id选择器 >类选择器 >属性选择器 >伪类和伪元素选择器>元素类型选择器 >通用选择器
关于子元素选择器、后代选择器、相邻兄弟选择器和一般同胞选择器，我们应该根据实际情况来计算它们的优先级
注意事项：
- !important声明的样式的优先级最高；
- 如果优先级相同，则最后出现的样式生效；
- 继承得到的样式的优先级最低；
- 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
- 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
说em、px、rem、vw、vh的区别
这里我们可以先说一说它们都是css中的单位，这些单位灵活使用可用于做不同的适配。
这些单位可以分为两大类：相对单位和绝对单位。
-
相对单位：
em：相对于父元素的字体大小。rem：相对于根元素（通常是HTML元素）的字体大小。vw：相对于视口宽度的百分比。vh：相对于视口高度的百分比。
-
绝对单位：
px：像素单位，是最常用的绝对单位。
使用相对单位可以使布局更加灵活，适应不同的设备和屏幕尺寸。
css中有哪些隐藏容器的方式
这里我们应该不仅简单的说出这些方法还可以聊一聊它们是否会把元素移除文档流，和能否添加点击事件
-
display: none;：元素从文档流中移除，且不可点击。 -
opacity: 0;：元素仍在文档流中，但完全透明，仍可点击。 -
visibility: hidden;：元素不可见，但仍占据布局空间，不可点击。 -
width: 0; height: 0;：将元素缩小至不可见状态。 -
clip-path：裁剪元素，使其不可见
这里只列举了一些算常见的五种方法吧，但是聊这些也听够够的了
最后
这里就总结了四道常见的题目，剩下的等我再总结总结。
