CSS面试题及详细答案140道之（81-100）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

一、本文面试题目录

81. 解释flex-wrap属性的作用。

答：控制Flex容器内的项目是否换行以及如何换行。选项包括：

• nowrap: 不换行（默认）
• wrap: 换行
• wrap-reverse: 反向换行
  示例：

.container {
    display: flex;
    flex-wrap: wrap;
}

82. 如何在CSS中实现响应式表格？

答：可以通过设置表格为块级元素并使用媒体查询调整其宽度，或者采用浮动布局等方式使其适应不同屏幕尺寸。例如：

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
}

83. 解释resize属性。

答：允许用户手动调整元素大小，适用于textarea等可调整大小的元素。取值包括：

• none: 不可调整大小
• both: 可以水平和垂直调整大小
• horizontal: 仅水平方向可调整大小
• vertical: 仅垂直方向可调整大小
  示例：

.resizable {
    resize: both;
    overflow: auto;
}

84. 如何在CSS中实现多列布局？

答：使用column-count指定列数，column-gap设置列间距，column-rule添加分隔线等。例如：

.multi-column {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
}

85. 解释grid-template-columns和grid-template-rows属性。

答：分别定义网格布局中的列和行的结构，可以指定具体的大小或使用fr单位分配剩余空间。例如：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
}

86. 如何在CSS中实现图片滤镜效果？

答：使用filter属性，支持多种滤镜如灰度(grayscale)、亮度(brightness)、对比度(contrast)等。例如：

.filtered-image {
    filter: grayscale(100%) brightness(120%);
}

87. 解释object-position属性。

答：确定替换元素（如图像或视频）在其容器内的对齐方式。例如：

img {
    object-fit: cover;
    object-position: center;
}

88. 如何在CSS中实现元素的透明背景？

答：使用rgba()或hsla()颜色值，其中最后一个参数表示透明度。例如：

.transparent-background {
    background-color: rgba(255, 0, 0, 0.5);
}

89. 解释counter-reset和counter-increment属性。

答：用于创建计数器，counter-reset初始化计数器，counter-increment递增计数器值。例如：

ol {
    counter-reset: section;
}

li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

90. 如何在CSS中实现滚动条样式自定义？

答：对于WebKit浏览器，可以通过伪类如::-webkit-scrollbar定制滚动条外观，包括宽度、颜色等。例如：

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
}

91. 解释content-visibility属性的作用。

答：允许浏览器跳过不可见元素的渲染，直到它们变得可见。这对于提高页面加载性能特别有用。例如：

.content {
    content-visibility: auto;
}

92. 如何在CSS中实现延迟加载（Lazy Loading）？

答：可以使用原生的loading="lazy"属性，或者通过JavaScript监听滚动事件来动态加载图片资源。例如：

<img src="image.jpg" loading="lazy">

93. 解释@import规则的优缺点。

答：优点是可以将CSS文件模块化；缺点是它会增加HTTP请求次数，并且可能影响页面渲染速度。例如：

@import url('styles.css');

94. 在CSS中如何实现一个可点击区域比其文本更大的按钮？

答：可以通过设置按钮的padding或display: inline-block; width/height来增大点击区域。例如：

button {
    padding: 10px 20px;
    display: inline-block;
}

95. 如何在CSS中处理长按事件？

答：CSS本身不支持直接处理长按事件，这类交互通常需要借助JavaScript实现。例如，使用JavaScript监听mousedown和mouseup事件来检测长按。

96. 解释text-align-last属性的作用。

答：用于指定段落最后一行的对齐方式，特别是在多行文本中非常有用。例如：

p {
    text-align-last: justify;
}

97. 如何在CSS中创建一个自定义的复选框样式？

答：隐藏默认复选框，然后使用伪元素:before或:after创建自定义样式，并通过相邻兄弟选择器关联状态变化。例如：

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

input[type="checkbox"]:checked + label::before {
    background-color: green;
}

98. 解释::first-letter和::first-line伪元素的区别。

答：::first-letter应用于段落的第一个字母，而::first-line应用于段落的第一行。例如：

p::first-letter {
    font-size: 2em;
}

p::first-line {
    font-weight: bold;
}

99. 如何在CSS中实现固定表头的表格？

答：可以使用position: sticky; top: 0;为表头设置固定位置，确保在滚动时保持可见。例如：

th {
    position: sticky;
    top: 0;
    background-color: white;
}

100. 解释writing-mode属性的不同值。

答：包括horizontal-tb, vertical-rl, vertical-lr等，分别代表水平从上到下、垂直从右到左、垂直从左到右的书写模式。例如：

.vertical-text {
    writing-mode: vertical-lr;
}

二、140道面试题目录列表