CSS面试题及详细答案140道之（101-120）

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

一、本文面试题目录

101. 解释text-indent属性的作用。

答：用于指定文本块首行缩进的距离。例如：

p {
    text-indent: 20px;
}

这会使段落的第一行向右缩进20像素。

102. 如何在CSS中实现响应式的字体大小？

答：可以使用相对单位如em, rem, %, 或者视口单位vw, vh。也可以使用clamp()函数来设置最小值、首选值和最大值。例如：

h1 {
    font-size: clamp(16px, 4vw, 36px);
}

103. 解释word-break属性的不同取值。

答：控制单词如何断开换行，常见值包括：

• normal: 使用默认的断字规则。
• break-all: 允许非CJK（中文/日文/韩文）文本内的任何字符处断行。
• keep-all: 防止CJK文本内的任何字符处断行。
  示例：

.break-word {
    word-break: break-all;
}

104. 如何在CSS中实现图片的懒加载？

答：现代浏览器支持原生懒加载，通过在<img>标签中添加loading="lazy"属性即可。例如：

<img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">

105. 解释scroll-snap-type属性的作用。

答：定义滚动容器内滚动捕捉的行为，使得滚动更加精确和平滑。例如：

.container {
    scroll-snap-type: x mandatory;
}

106. 如何在CSS中创建一个自定义下拉菜单？

答：可以通过使用:hover伪类或JavaScript控制显示和隐藏子菜单，并使用绝对定位来放置子菜单。例如：

.dropdown-content {
    display: none;
    position: absolute;
}

.dropdown:hover .dropdown-content {
    display: block;
}

107. 解释font-smoothing属性的作用。

答：虽然不是标准CSS属性，但某些浏览器（如WebKit）支持它来改善字体渲染质量。例如：

body {
    -webkit-font-smoothing: antialiased;
}

108. 如何在CSS中实现元素的渐变背景色？

答：使用linear-gradient(), radial-gradient()函数创建从一种颜色平滑过渡到另一种颜色的背景效果。例如：

background: linear-gradient(to right, red, yellow);

109. 解释shape-outside属性的不同取值。

答：允许文本围绕非矩形形状排列，取值可以是基本形状（如圆形、椭圆）、路径数据或引用的盒模型边距。例如：

img {
    shape-outside: circle(50%);
    float: left;
}

110. 如何在CSS中实现响应式的视频嵌入？

答：确保视频容器具有固定的宽高比，通常使用padding-top百分比值来保持比例，然后让视频填充整个容器。例如：

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

111. 解释object-fit属性的不同取值。

答：包括fill, contain, cover, none, scale-down，控制替换元素（如图像或视频）如何适应其容器。例如：

img {
    object-fit: cover;
}

112. 如何在CSS中实现响应式的卡片布局？

答：使用CSS Grid或Flexbox布局系统，结合媒体查询调整卡片的排列方式和间距。例如：

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

113. 解释counter-increment属性的作用。

答：递增计数器值，通常与counter-reset一起使用来创建编号列表或章节标题。例如：

ol {
    counter-reset: section;
}

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

114. 如何在CSS中实现文字环绕图片的效果？

答：使用float属性让图片浮动，从而使后续的文字内容环绕图片排列。例如：

img {
    float: left;
    margin-right: 10px;
}

115. 解释writing-mode属性的不同取值及其应用场景。

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

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

116. 如何在CSS中实现元素的倾斜翻转效果？

答：结合transform: skewX(), skewY()进行倾斜变换，结合rotate()进行旋转变换。例如：

.skewed {
    transform: skewX(20deg);
}

117. 解释resize属性的作用。

答：允许用户手动调整某些元素（如textarea）的大小，取值包括both, horizontal, vertical, none。例如：

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

118. 如何在CSS中实现响应式的导航栏？

答：利用媒体查询调整导航菜单的布局，在小屏幕上切换为汉堡菜单图标触发下拉菜单。例如：

@media (max-width: 600px) {
    nav ul {
        display: none;
    }
    nav .toggle-menu {
        display: block;
    }
}

119. 解释pointer-events属性的不同应用场景。

答：可用于禁用特定区域的点击事件，模拟不可点击的效果，或是优化交互体验，避免不必要的事件触发。例如：

.disabled-button {
    pointer-events: none;
    opacity: 0.6;
}

120. 如何在CSS中实现元素的透视投影效果？

答：使用perspective属性设置视点距离，结合transform: perspective(px) rotateX/Y/Z(deg)来创建三维视觉效果。例如：

.container {
    perspective: 1000px;
}

.cube {
    transform: rotateY(45deg);
}

二、140道面试题目录列表