2024 css 面试题带答案，万字总结

最新推荐文章于 2025-03-10 17:02:16 发布

simahe

最新推荐文章于 2025-03-10 17:02:16 发布

阅读量2k

点赞数 38

分类专栏：前端面试题带答案文章标签： css面试题 css面试题带答案

本文链接：https://blog.youkuaiyun.com/simahe/article/details/143717024

版权

前端面试题带答案专栏收录该内容

3 篇文章

订阅专栏

一、CSS 基础问题

1. 什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页展示样式的语言。主要作用是：控制网页的外观和布局。

2. CSS 主要作用有哪些？

设置样式，布局和定位，动画效果，响应式设计等；

3. CSS 怎么添加到网页中？

行内样式：p style="font-size: 12px; ">行内样式：</p>
嵌入样式：<style type="text/css"> h1 {font-size:16px;} </style>
链接样式：link href="styles.css" rel="stylesheet" type="text/css" />
@import 指令: @import url(css/styles2.css)

4. CSS 的三大特性

css 三大特性：层叠、继承、优先级。

层叠性：行内、嵌入、外链等应用到某个元素时，按照特定的规则叠加确定最终使用哪个值。
继承性：某些样式可以被子元素继承，简化样式、提高代码重用性，优化代码量。
优先级：!important 最大,来源优先级（行内-嵌入-外链），选择器优先级(id>class>element)

5. 你是怎么判断元素使用哪个样式？

根据层叠性： css 样式来源，层叠规则，计算特指度。（下面 6、7、8）

6. CSS 样式来源？

浏览器默认样式表：
用户默认样式表：一个作用是修正浏览器默认样式表。
外链样式表
嵌入样式
行内样式

7. CSS 层叠规则

层叠规则一：根据 css 样式来源，找到每个元素和属性的所有声明。
层叠规则二：按照顺序和权重排序。浏览器依次检查 5 个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性。最终属性被设定成什么值，就用什么值来显示。
层叠规则三：按特指度排序。（看 8）
层叠规则四：顺序决定权重。特指度也相同，则位置最靠下（或后声明）的规则胜出。

简单点说，先找到所有声明，合并、覆盖，算特指度，特指度一样，后写胜出。

8. CSS 计算特指度

引用《css 权威指南》

“ICE”公式计算:

选择符中有一个 ID，就在 I 的位置上加 1；
选择符中有一个类，就在 C 的位置上加 1；
选择符中有一个元素（标签）名，就在 E 的位置上加 1；
得到一个三位数。

P                                    0-0-1特指度=1
p.largetext                          0-1-1特指度=11
p#largetext                          1-0-1特指度=101
body p#largetext                     1-0-2特指度=102
body p#largetext ul.mylist           1-1-3特指度=113
body p#largetext ul.mylist li        1-1-4特指度=114

查理版简单层叠要点三条规则:

规则一：包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。

9. CSS 选择器有哪些类型，以及优先级？

1、!important：不建议别人使用。
2、ID 选择器：如 #idName；
3、类选择器：如 .className；
4、元素选择器：如 p, div 等；
5、属性选择器：如 [type="text"]
伪类：一个冒号（:）表示伪类，如 :hover、:first-child、:nth-child(n) 等；
伪元素：两个冒号（::）表示 CSS3 新增的伪元素，如 p::first-letter）。

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

可继承:主要文本相关属性，如文字颜色与大小（color、font-size等），列表样式（list-style），可见性（visibility）；
不可继承：大多数 CSS 属性是不可继承的，比如宽高、定位，背景相关属性（background）
控制继承：强制继承父元素（color: inherit;）,强制设置默认值(color: initial;),父元素有就继承，没有使用默认值(color: unset;)

11.常用的布局方案？

table：数据表格，邮件等；
传统布局（float）：盒模型、清除浮动、居中、BFC 等问题；
Flexbox:一维布局，居中、响应式等问题;
grid:二维布局
position 布局:relative 相对谁，居中问题。
响应式布局：媒体查询(@media (min-width: 600px))，em、rem、vw、vh等问题；

11.说说什么是 CSS 盒子模型？

CSS 盒子模型包含内容区域（Content)、内边距（padding）、边框（border）和外边距（margin）。盒子模型的总宽度和高度的计算方式取决于使用的盒子模型的类型box-sizing: content-box|border-box|inherit；。外边距由较宽的外边距决定两个元素最终离多远。

   +-----------------------+
   |        Margin         |
   |   +---------------+   |
   |   |    Border     |   |
   |   |   +-------+   |   |
   |   |   | Padding |   |
   |   |   |  +---+  |   |
   |   |   |  |   |  |   |  Content
   |   |   |  +---+  |   |
   |   |   +-------+   |
   |   +---------------+   |
   +-----------------------+

content-box: 默认值。总宽度 = width + padding-left + padding-right + border-left + border-right;
border-box ：总宽度 = width
inherit 指定 box-sizing 属性的值，应该从父元素继承

12.怎么浮动，浮动有什么问题，怎么清除浮动？

浮动属性允许元素向左（left）或右（right）浮动，使其在其包含块的文本流周围。一般来说，浮动的元素都会被从其原本的流位置移除。

浮动问题：

脱离文档流，导致布局问题。
父容器高度塌陷（即父元素无法包围浮动的子元素）。

清除浮动

方法一：为父元素添加 overflow:hidden,BFC ？
方法二：浮动后面添加<div style="clear: both;"></div>
方法三：伪元素清除浮动

.container::after {
  content: '';
  display: block;
  clear: both;
}

12. 什么是 BFC

BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。作用有 3 条

包含内部浮动：解决 float 引起的父容器高度塌陷问题；
排除外部浮动: 解决重叠问题，设置自适应两栏布局。
阻止外边距重叠：避免margin重叠问题.

怎样触发 BFC

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

13. 什么是 Flexbox

Flexbox（Flexible Box Layout）一维布局。只需将容器的 display 属性设置为 flex 或 inline-flex
13-1 flex 容器的主要属性：

flex-direction: 定义主轴的方向（row, row-reverse, column, column-reverse）。
flex-wrap: 控制子元素是否换行（nowrap, wrap, wrap-reverse）。
flex-flow: 是 flex-direction 和 flex-wrap 的简写。
justify-content: 在主轴上对齐子元素（flex-start, flex-end, center, space-between, space-around）。
align-items: 在交叉轴上对齐子元素（flex-start, flex-end, center, baseline, stretch）。
align-content: 在多行上对齐（flex-start, flex-end, center, space-between, space-around, stretch）。

13-2 子元素的主要属性有哪些？

flex-grow: 定义项目的增长比例（默认为 0）。
flex-shrink: 定义项目的缩小比例（默认为 1）。
flex-basis: 定义项目在分配多余空间之前，占据的主轴空间（默认为 auto）。
flex: 是 flex-grow, flex-shrink, 和 flex-basis 的简写，方便用于快速定义。
align-self: 允许单个项目有不同的对齐方式，覆盖 align-items。

13-3 flex 响应式设计
可以使用 flex-grow 和 flex-shrink 属性

14. 如何实现两列布局？

使用 float:float: left;
使用 flex:display: flex;
使用 grid:display: grid;

15. 如何实现三列布局？

固定宽度：两边使用 float，中间使用 margin
固定宽度：两边使用 absolute，中间使用 margin 或者 absolute
flex： display: flex;,中间使用 flex-grow 和 flex-shrink 属性。
使用 display: table 实现： display: table,三列设置display: table-cell;
使用 display: grid 实现: display: grid; grid-template-columns: 300px auto 300px;
圣杯布局:中间先加载，左中右三个元素分别左浮动，负边距定位设置；
双飞翼布局:中间先加载，左中右三个元素分别左浮动，负边距定位设置；

16. `em`、`rem`、`vw` 、 `vh`

em：相对父元素的字体大小，适合细致控制间距和排版。
rem：相对根元素的字体大小，使用更为一致，便于管理全局样式。
vw：根据视口宽度调整，适合响应式布局。
vh：根据视口高度调整，适合适应屏幕的元素高度。

17. CSS 响应式设计

CSS 响应式设计是一种网页设计方法，网页能够根据不同设备的屏幕尺寸、分辨率和方向，自动调整布局和样式。可以使用流体网格布局、百分比尺寸、视口单位、媒体查询、Flexbox 布局和 Grid 布局等。

媒体查询：@media (min-width: 600px);
流式布局：em、rem、百分比（Bootstrap 的 12 栅格）等相对单位设定；
vw 和 vh方案
flex 方案
grid 方案

17. 居中对齐

17-1 行内元素水平居中

text-align: center; line-height: 300px;
display: table-cell;vertical-align: middle;

17-2 块级元素水平居中

宽高已知： margin: auto;
宽高未知：display: inline-block;
使用定位属性：
1、【宽高已知】父 position: relative; 子 position: absolute;left: 50%;top: 50%; margin-left: -50px; margin-top：-50px;
2、【宽高未知】父 position: absolute;left: 50%;top: 50%; transform: translateX(-50%); transform: translateY(-50%);
flexbox： display: flex;justify-content: center;

17-3 已知高度和宽度的元素,水平垂直居中

方案一：top: 0; right: 0; bottom: 0; left: 0; margin: auto;
方案二：left: 50%; top: 50%; margin-left: 元素宽度的一半 px; margin-top: 元素高度的一半 px;

17-4 未知高度和宽度的元素,水平垂直居中

方案一：left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
方案二：justify-content: center; align-items: center;
方案三：display: grid;justify-self: center;align-self: center;