CSS面试题|[2024-12-24]

1.说一下CSS的盒模型

在HTML页面中的所有元素都可以看成是一个盒子

盒子的组成：内容content、内边距padding、边框border、外边距margin

盒模型的类型：

标准盒模型

margin + border + padding + content

IE盒模型

margin + content（包括border + padding）

控制盒模型的模式：box-sizing：content-box（默认值，标准盒模型）、border-box（IE盒模型）

2.CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级

优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

选择器有：标签、类/伪类/属性、全局选择器、行类样式、id、!important

优先级分别为：

!important > 行类样式 > id > 类/伪类/属性 > 标签 > 全局选择器

3.隐藏元素的方法有哪些

display:none;

元素在页面上消失。不占据空间

opacity:0;

设置了元素的透明度为0，元素不可见，占据空间位置

visibility:hidden;

让元素消失，占据空间位置，一种不可见的状态

position:absolute;

clip-path

4.px和rem的区别是什么

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度

rem是相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%

1rem = 10px (16px * 62.5% = 10px)

5.重绘重排有什么区别

重绘：当元素的外观（比如颜色、背景色等不影响布局的样式）发生改变时，浏览器对该元素进行重新绘制的过程。

重排：也称回流，当文档的布局（比如元素的大小、位置、隐藏或显示等影响布局的操作）发生改变时，浏览器需要重新计算元素的几何属性（位置、大小等），并重新构建渲染树的过程。

关系：

重排必然会导致重绘，因为当布局发生改变后，元素的外观也需要重新绘制。但是重绘不一定会导致重排，只有当元素的外观改变不影响布局时，才只会触发重绘。

区别：

1.触发条件：重绘主要是改变元素外观的样式属性触发，而重排主要由改变元素布局的操作触发。

2.性能开销：重排的性能开销远远大于重绘，因为重排设计到复杂的布局计算和渲染树重建。

3.对文档的影响范围：重排会影响整个文档的布局计算，可能会导致多个元素的位置和大小改变；而重绘通常只影响单个元素或少数元素的外观。

6.让一个元素水平垂直居中的方式有哪些

1.定位+margin

2.定位+transform

3.flex布局

4.grid布局

5.table布局

7.CSS的哪些属性可以继承

CSS的三大特性：继承、层叠、优先级

子元素可以继承父类元素的样式

1.字体的一些属性：font

2.文本的一些属性：line-height

3.元素的可见性：visibility:hidden

4.表格布局的属性：border-spacing

5.列表的属性：list-style

6.页面样式属性：page

7.声音的样式属性