CSS面试题

1.CSS选择器优先级？

！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）

各项示例:

内联样式：写在标签属性style的样式，如 <p style="color=red">

ID选择器，如#id{…}

类选择器，如 .class{…}

属性选择器，如 input[type="email"]{…}

伪类选择器，如a:hover{…}

伪元素选择器，如 p::before{…}

标签选择器，如 input{…}

通配选择器（匹配每一个元素），如 *{…}

2.引入CSS文件的几种方式

3.<link>和@import的区别

4.CSS哪些元素可以继承，哪些不行？

可继承:主要文本相关属性，如文字颜色与大小（color、font-size等），列表样式（ul中的li）（list-style），可见性（visibility）；

不可继承：大多数 CSS 属性是不可继承的，比如宽高、定位，背景相关属性（background）

控制继承：强制继承父元素（color: inherit;）,强制设置默认值(color: initial;),父元素有就继承，没有使用默认值(color: unset;)

5.CSS盒子模型？

盒子模型就是把html元素看成一个矩形盒子，分为标准盒子模型和怪异盒子模型

内容区域（Content）、内边距（Padding）、边框（Border）和外边距（Margin）

6.浮动是什么，怎么清除

浮动是使元素沿着其包含块的左侧或右侧放置，同时允许文本和内联元素环绕在其周围。

float: left | right | none | inherit（继承父元素）;

问题：父元素高度塌陷，影响后续元素布局

解决：

1.添加空div，空元素设置为clear：both

2.伪元素：

.container::after {

content: '';

display: block;

clear: both;

}

3.设置overflow为hidden或者auto，触发BFC

7.什么是BFC，如何触发

块级格式化上下文，独立的渲染区域，与外部样式不相干

规则：内部块级盒子会垂直方向上一个个排列，同一个BFC内相邻块级盒子编剧会发生重叠，计算高度的时候浮动元素高度也参与计算

作用：清除浮动，避免外边距重叠，实现自适应布局（避开浮动元素）

如何触发：

float不为none

position为absolute或fixed

display为inline-block、table-cell（表格单元格）、table-caption（表格标题）

overflow不为visible

8.CSS边距重叠是什么，如何解决？

某些情况下，块级元素的垂直外边距（margin-top和margin-bottom）会合并为一个边距

如：

1. 相邻兄弟元素之间的边距重叠

当两个或多个相邻的块级元素垂直排列时，它们的上下边距可能会重叠。例如，如果第一个元素有margin-bottom: 20px;，第二个元素有margin-top: 30px;，那么它们之间的实际间距将是30px，而不是50px。

1. 父元素与第一个或最后一个子元素之间的边距重叠

当一个元素包含在另一个元素中时，如果父元素没有边框（border）、内边距（padding）或行内内容来分隔它们，父元素的上外边距（margin-top）或下外边距（margin-bottom）会与子元素的上外边距或下外边距发生重叠

1. 空块级元素的边距重叠

对于没有任何内容、填充（padding）、边框（border）的空块级元素，它的上下边距也会发生重叠

解决：

1.添加边框或内边距

2.使用浮动或绝对定位

3.变成行内块元素

9.常用的布局方案

1.普通流布局：按照html顺序依次排列，块级元素独占一行，行内元素一行内排列

2.浮动布局：元素脱离普通流，向左或向右浮动，其他内容环绕浮动元素

3.定位布局：脱离普通文档流，通过position控制元素位置

• static：默认值，不定位
• relative：相对自身位置偏移
• absolute：相对最近的定位祖先元素
• fixed：相对浏览器窗口
• sticky：粘性定位（相对父元素和视口）

4.flex布局（弹性布局）

5.grid布局

6.表格布局（dispaly：table）

7.响应式布局

10.讲解一下flex布局？

display：flex或inline-flex（行内元素）（按钮、标签页、工具栏等）

主要属性：

flex- direction：定义主轴方向

flex-wrap：控制字元素是否换行

flex-frow：flex- direction和flex-wrap的缩写

justify-content：主轴上的对齐方式

align-items:交叉轴上的对齐方式

align-content:多行内容在交叉轴上的对齐方式（之后在flex-wrap:wrap且子元素换行时生效）

子元素属性：

flex-grow: 定义项目的增长比例（默认为 0）。

flex-shrink: 定义项目的缩小比例（默认为 1）。

flex-basis: 定义项目在分配多余空间之前，占据的主轴空间（默认为 auto）。

flex: 是 flex-grow, flex-shrink, 和 flex-basis 的简写，方便用于快速定义。

align-self: 允许单个项目有不同的对齐方式，覆盖 align-items。

flex：1

是让元素自动填满剩余空间的神器，常用于等宽布局、自适应布局、左右结构等场景。

flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

11.em、rem、vw、vh？

em：相对父元素的字体大小，适合细致控制间距和排版。

rem：相对根元素的字体大小，使用更为一致，便于管理全局样式。

vw：根据视口宽度调整，适合响应式布局。

vh：根据视口高度调整，适合适应屏幕的元素高度。

12.如何实现响应式布局？

• 媒体查询：@media (min-width: 600px);

不同的媒体用不同的样式

• 流式布局：em、rem、 百分比（Bootstrap 的 12 栅格）等相对单位设定；
• vw 和 vh方案
• flex 方案
• grid 方案

13.讲解一下grid布局？

容器属性

子元素属性

14.CSS3新特性

15.@keyframes和transition？

@keyframes：关键帧动画

用于定义复杂动画，可以控制动画在多个时间点的状态

@keyframes 动画名 {from {/* 起始状态 */}to {/* 结束状态 */}
}
示例：
// animation: 动画名 持续时间 动画方式 延迟 次数 方向;
.box {animation: move 2s ease-in-out infinite alternate;
}
@keyframes move {0%   { transform: translateX(0); }50%  { transform: translateX(100px); }100% { transform: translateX(0); }
}

transition：过渡动画

用于在属性值发生变化时（如 hover、点击等）平滑过渡

// transition: 属性名 持续时间 动画曲线 延迟;
.btn {background: blue;color: white;padding: 10px 20px;transition: background 0.3s ease;
}
.btn:hover {background: green;
}

16.css预处理器？

支持变量、嵌套、混合（Mixin）、函数、模块化

变量
$primary-color: #3498db;
.button {background: $primary-color;
}嵌套
.nav {ul {list-style: none;li {display: inline-block;}}
}混合
@mixin rounded($radius) {border-radius: $radius;
}
.box {@include rounded(10px);
}
使用 @mixin 定义了一个名为 rounded 的 混合（mixin）。
它接受一个参数 $radius，表示圆角的大小。
在大括号 {} 中定义了要复用的 CSS 样式：border-radius: $radius;

17.重排和重绘？

• 重排(reflow)：元素的的位置和尺寸大小变化；
• 重绘(Repaints):外观发生改变，但没有改变布局；

减少重排：

减少重绘：

18.CSS优化？

代码层面：移除未使用样式，使用简写属性，避免过度嵌套，减少重排重绘，尽量用<link>而不是@import

其他层面：代码压缩（Webpack 的 css-minimizer-webpack-plugin），合并css文件减少请求，使用媒体查询优化移动端，异步加载首屏之外的css，cdn加速，压缩图片等等

19.哪些方式可以隐藏元素，区别？

display：none。 完全隐藏，不占空间，不能响应事件

visibility：hidden。 只是隐藏，还占空间

opacity：0 只是透明，还占空间，可以响应时间

直接移出页面

20.元素水平垂直居中的方式？

行内元素:text-align:center

其他：

flex布局：display: flex; justify-content: center; align-items: center;

grid布局：display: grid; place-items: center;

定位：

.container {position: relative;height: 100vh;
}.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

21.如何画一条0.5px的线？

1.使用transform:scaleY(0.5)
<div class="line"></div>
.line {height: 1px;background: #000;transform: scaleY(0.5);transform-origin: top;
}2.使用box-shadow模拟
.line {height: 1px;box-shadow: 0 0.5px 0 #000;
}3.使用svg绘制
<svg width="100%" height="1"><line x1="0" y1="0.5" x2="100%" y2="0.5" stroke="#000" stroke-width="0.5"/>
</svg>

22.如何画一个三角形，原理是什么？

.triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #007bff; /* 三角形的颜色 */
}

当你给一个元素设置width: 0; height: 0;并且定义非透明的边框时，这些边框会在元素中心相交。如果四个边框中有三个是透明或隐藏的，而只有一个是有颜色的，那么有颜色的那个边框就会形成一个三角形

23.为什么 li与 li 元素之间有看不见的空白间隔，如何解决？

这个空白并不是 CSS 样式导致的，而是HTML 代码中的换行符或空格引起的。

解决：

1.删除html每个li中的空白

2.设置父元素font-size = 0

3.使用flex布局，gap = 0

24.精灵图（雪碧图）是什么，怎么使用？

通过将多个小图标或背景图像合并为一张大图，然后利用 CSS 的 background-position 属性来显示其中某一部分图像，从而减少 HTTP 请求次数，提高页面加载速度。

.icon {background-image: url('sprites.png'); /* 精灵图路径 */background-repeat: no-repeat;display: inline-block;
}.icon-home {width: 20px;  /* 小图宽度 */height: 20px; /* 小图高度 */background-position: 0 0; /* 小图在精灵图中的位置 */
}.icon-search {width: 20px;height: 20px;background-position: -30px 0; /* 向左偏移30px */
}