当前位置：首页 > news >正文

CSS常见面试题

news 2024/10/23 20:34:13

🎯CSS常见面试题

- - 1.CSS的盒模型
  - 2.CSS选择器的优先级
  - 3.隐藏元素的方法有哪些？
  - 4.px和rem的区别是什么？
  - 5.重绘排版有什么区别？
  - 6.让一个元素水平垂直居中的方式有哪些？
  - 7.CSS的哪些属性可以继承？哪些不可以继承？
  - 8.有没有用过预处理器？

😊各位小伙伴们，本专栏新文章出炉了！！！

1.CSS的盒模型

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

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

盒模型的类型：
- 标准盒模型
  - margin + border + padding + content
- IE盒模型
  - margin + content（border+padding）

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

标准盒模型和IE盒模型的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style>/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;box-sizing: content-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

此时我们发现，虽然我们定义的盒子高宽都为200px，但实际盒子大小是250px*250px

也就是说，标准盒模型整个盒子的实际大小是由各部分叠加的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style>/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;/* 切换盒模型 */box-sizing: border-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

在IE盒模型下，整个盒子的大小分为margin和content两部分，通俗来说padding，border和content算作一个整体，我们定义的盒子高宽为200px，也就是说content + border + padding的实际大小就为200px*200px

2.CSS选择器的优先级

CSS的三大特性：

层叠性：指多个样式定义适用于同一个元素时，冲突的样式会根据一系列规则来决定哪个样式将生效。
继承性：指某些CSS属性可以由父级元素传递给子级元素，但并不是所有属性都可以继承。
优先级

优先级：

内联样式 > !important > ID选择器 > 类选择器 = 属性选择器（如[type="text"]） = 伪类 > 类型选择器（如div、p） = 伪元素（如::before、::after） > 通用选择器（如*）。

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

display:none：视觉上隐藏元素，元素完全从文档流中移除，意味着该元素不会占据页面空间。
opacity:0：设置元素的透明度为0，视觉上隐藏，但实际上仍占据页面空间。
position:absolute / left:-9999px：通过定位的方式将元素移除屏幕实现隐藏，虽不影响页面布局，但会导致屏幕阅读器等辅助技术无法正确读取内容。
visibility:hidden：此属性会使元素不可见，但仍占据文档流中的空间。

4.px和rem的区别是什么？

px：是一种固定长度，表示屏幕上的物理像素。
rem：相对单位，相对于HTML根节点font-size的值，假设设置HTML根节点的font-size:62.5%，那么1rem = 10px

5.重绘排版有什么区别？

重绘（Repainting）：

重绘是指当一个元素的外观发生变化时，例如颜色改变，背景色改变等，但其几何形状（位置、大小）没有发生变化，浏览器只会重新渲染这部分变化。

重排（Reflow）：

重排是指当一个元素的几何形状发生变化时，例如尺寸（高、宽），位置等发生改变，或者DOM树结构发生变化时，浏览器需要重新计算布局，确定每个元素的大小和位置。

值得注意的是：触发重排一定会触发重绘，但触发重绘不一定会触发重排，如果盒模型的高宽确定，就不会触发重排

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

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */
}

.container {display: grid;place-items: center; /* 水平垂直居中 */
}

.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;/* 纠正元素自身尺寸带来的偏移。 */transform: translate(-50%, -50%);
}

.center {margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}