CSS面试题2

文章目录

- [一、CSS 选择器及其优先级](#一、CSS 选择器及其优先级)
- - 伪元素作用
  - 伪类的作用
  - 伪类与伪元素区别
- [二、CSS 属性的继承性](#二、CSS 属性的继承性)
- - [1. 无继承性的属性](#1. 无继承性的属性)
  - [2. 有继承性的属性](#2. 有继承性的属性)
- [三、Display 属性详解](#三、Display 属性详解)
- - [1. 常用属性值及其作用](#1. 常用属性值及其作用)
  - [2. block、inline 与 inline-block 的区别](#2. block、inline 与 inline-block 的区别)
- 四、隐藏元素的方法对比
- [五、 CSS3 新特性与动画](#五、 CSS3 新特性与动画)
- - [1. CSS3 新功能](#1. CSS3 新功能)
  - [2. Transition (过渡) vs Animation (动画)](#2. Transition (过渡) vs Animation (动画))
  - [3. 伪类 (:) 与伪元素 (::)](#3. 伪类 (:) 与伪元素 (::))
- 六、伪类与伪元素的本质区别
- [七、文本溢出处理](#七、文本溢出处理)
- [八、布局单位与响应式](#八、布局单位与响应式)
- - [1. 常见单位](#1. 常见单位)
  - [2. CSS 预处理器与后处理器](#2. CSS 预处理器与后处理器)
- 九、用css实现单行多行文本的溢出
- - [1. 单行文本溢出省略](#1. 单行文本溢出省略)
  - [2. 多行文本溢出省略 (WebKit 方案)](#2. 多行文本溢出省略 (WebKit 方案))
- 十、Flexbox
- - [1. 容器与项目](#1. 容器与项目)
  - [2. 容器属性](#2. 容器属性)
  - [3. 项目属性](#3. 项目属性)
  - - flex
- 十一、BFC（块格式化上下文）
- - [BFC 的布局规则（原理）](#BFC 的布局规则（原理）)
  - [如何触发 BFC](#如何触发 BFC)
  - [BFC 的实际应用场景](#BFC 的实际应用场景)
- 十二、三栏布局的实现
- [十三、CSS 中隐藏元素的方法](#十三、CSS 中隐藏元素的方法)
- 十四、盒子模型
- - 盒子模型的组成部分
  - 两种盒子模型
  - - [1. 标准盒子模型 (Standard Box Model)](#1. 标准盒子模型 (Standard Box Model))
    - [2. 怪异盒子模型 / IE 盒子模型 (Border Box Model)](#2. 怪异盒子模型 / IE 盒子模型 (Border Box Model))
- 十五、Tailwindcss与传统css区别

一、CSS 选择器及其优先级

CSS 优先级由四个等级决定，通常表示为 (a, b, c, d) 权重。

选择器格式	类型	权重 (简易值)	示例
内联样式	Style 属性	1000	`style="color: red;"`
ID 选择器	#id	100	`#header`
类/属性/伪类	.class / [ref] / :hover	10	`.menu`, `li:last-child`
标签/伪元素	div / ::after	1	`div`, `li:after`
通配符/关系选择器	* / > / +	0	`*`, `ul > li`, `h1 + p`

注意事项：

!important：声明的样式优先级最高，应慎用

后来者居上：如果优先级相同，最后出现的样式生效

继承最低：继承得到的样式优先级最低（趋于 0）

来源顺序：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义 > 浏览器默认

伪元素作用

CSS伪元素用于在不改变HTML结构的情况下，为页面元素的特定部分添加样式和内容

常见类型与场景

内容插入 ：
- ::before：在内容前插入，常用于加图标、装饰线
- ::after：在内容后插入，常用于清除浮动或装饰
- 注：必须配合 content 属性
文本细分 ：
- ::first-letter：选中首字母，做"首字下沉"
- ::first-line：选中首行文字
用户界面 ：
- ::selection：修改用户鼠标划选文字时的背景色和文字色。
- ::placeholder：修改输入框占位符的样式

伪类的作用

伪类的作用是根据元素的状态或位置特征来选择元素，而不需要添加额外的类名或ID

用CSS代替JS去感知元素的动态状态和结构位置，实现交互反馈、样式美化和代码简化

常见类型与场景

用户交互状态 ：
- :hover：鼠标悬停
- :active：鼠标点击那一刻
- :focus：元素获得焦点（如输入框被选中）
结构性****伪类 ：
- :nth-child(n)：选择父元素下的第 n 个子元素
- :first-child / :last-child：选择第一个或最后一个子元素
- :not(selector)：排除掉符合条件的元素
表单/链接状态 ：
- :checked：选中的单选框或复选框
- :disabled：禁用的表单元素
- :visited：用户访问过的链接

伪类与伪元素区别

特性	伪类 (Pseudo-class)	伪元素 (Pseudo-element)
本质	描述元素的特殊状态	描述元素的特殊部分（虚拟节点）
语法	使用单冒号 : (如 :hover)	使用双冒号 :: (如 ::after)
DOM 影响	只是对现有元素添加类样式	相当于在 DOM 中添加了一个虚拟标签
数量限制	一个元素可以同时拥有多个伪类	一个元素通常只能定义一个 ::before 和一个 ::after

二、CSS 属性的继承性

1. 无继承性的属性

布局/盒子模型 ：display, width, height, margin, border, padding
背景/定位 ：background, position, float, clear, z-index, overflow
文本装饰 ：vertical-align, text-decoration, text-shadow, white-space

2. 有继承性的属性

字体系列 ：font-family, font-weight, font-size, font-style
文本系列 ：text-indent, text-align, line-height, word-spacing, letter-spacing, color
其他：visibility, cursor, list-style

三、Display 属性详解

1. 常用属性值及其作用

属性值	作用
`none`	元素不显示，并从文档流中移除
`block`	块类型。独占一行，可设宽高，默认宽度为父元素宽度
`inline`	行内元素。同行显示，不可设宽高，宽度由内容撑开
`inline-block`	行内块。同行显示，但可设置宽高
`inherit`	从父元素继承 display 值

2. block、inline 与 inline-block 的区别

block：独占一行，支持所有盒子模型属性（width/height/margin/padding）
inline ：同行显示。设置宽高无效，水平方向的 margin/padding 有效，垂直方向无效
inline-block：结合了两者的特性，既能同行显示，又能设置宽高

四、隐藏元素的方法对比

方法	占据空间	响应事件	触发机制
`display: none`	否	否	触发重排 (Reflow)
`visibility: hidden`	是	否	触发重绘 (Repaint)
`opacity: 0`	是	是	重绘
`position: absolute`	否	否	移出可视区
`clip-path: circle(0)`	是	否	裁剪隐藏
`transform: scale(0)`	是	否	缩放隐藏

五、 CSS3 新特性与动画

1. CSS3 新功能

选择器 ：如 :not(), 伪类增强
视觉：圆角 (border-radius), 阴影 (box-shadow), 线性渐变 (gradient)
布局：多列布局 (multi-column), Flex 布局 , Grid 布局
变换：transform（旋转、缩放、倾斜、平移）

2. Transition (过渡) vs Animation (动画)

Transition ：强调状态过渡，需要事件触发（如 :hover），只有起始和结束两个关键帧
Animation ：强调循环和复杂序列，无需触发事件，支持 @keyframes 定义多个关键帧

3. 伪类 (😃 与伪元素 (:😃

伪类：用于选择元素的特定状态（如 :hover, :active）
伪元素 ：用于创建不在 DOM 树中的虚拟元素（如 ::before, ::after）。CSS3 规范建议伪元素使用双冒号

六、伪类与伪元素的本质区别

维度	伪类 (Pseudo-classes)	伪元素 (Pseudo-elements)
逻辑本质	已有元素的特殊状态	不存在于 DOM 的虚拟元素
数量关系	一个元素可以同时拥有多个状态	通常用于选取元素的特定部分或生成额外内容
标准语法	单冒号 `:`	双冒号 `::`
是否产生新内容	❌ 否，只改变现有元素样式	✅ 是，可以插入新内容（需配合 `content`）
典型代表	`:hover`, `:active`, `:first-child`, `:nth-child`	`::before`, `::after`, `::first-line`, `::selection`

七、文本溢出处理

单行文本溢出：

css 复制代码

.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本溢出 (WebKit)：

css 复制代码

.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示行数 */
  overflow: hidden;
}

八、布局单位与响应式

1. 常见单位

px：绝对像素，物理像素与设备相关
%：相对于父元素对应属性的百分比
em：相对于父元素的字体大小
rem ：相对于根元素 (html) 的字体大小，响应式首选
vw/vh：相对于视口（Viewport）宽高的 1%

2. CSS 预处理器与后处理器

预处理器 (Sass/Less)：提供变量、嵌套、Mixin 等编程特性，提高代码复用性
后处理器 (PostCSS) ：如 autoprefixer，在编译后自动添加浏览器私有前缀，处理兼容性

九、用css实现单行多行文本的溢出

1. 单行文本溢出省略

原理是强制文本不换行，并将超出容器的部分隐藏，最后用省略号（...）代替

CSS 实现：

CSS 复制代码

.single-line {
  width: 200px;         /* 必须设置宽度 */
  overflow: hidden;      /* 隐藏超出部分 */
  white-space: nowrap;   /* 强制不换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}

2. 多行文本溢出省略 (WebKit 方案)

CSS 实现：

CSS 复制代码

.multi-line {
  width: 200px;
  display: -webkit-box;           /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;   /* 设置伸缩盒子的子元素排列方式：垂直 */
  -webkit-line-clamp: 3;          /* 限制显示的行数 */
  overflow: hidden;               /* 超出隐藏 */
  text-overflow: ellipsis;        /* 超出部分显示省略号 */
}

十、Flexbox

1. 容器与项目

Flexbox 由两个核心角色组成：

Flex Container（弹性容器） ：父元素。通过设置 display: flex 或 display: inline-flex 开启
Flex Items（弹性项目）：容器内的直接子元素

2. 容器属性

以下属性作用于父容器，决定子元素的整体排列规则：

属性	描述	常用值
flex-direction	定义主轴方向（水平或垂直）	row (默认), column, row-reverse
flex-wrap	定义如果一行排不下，是否换行	nowrap (默认), wrap
justify-content	主轴上的对齐方式	flex-start, center, space-between, space-around
align-items	交叉轴上的对齐方式（单行）	stretch (默认), center, flex-start
align-content	多行在交叉轴上的对齐方式	space-between, center

3. 项目属性

以下属性作用于子元素，决定单个项目的伸缩行为：

order：属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：定义项目的放大比例（如果有多余空间，项目占多少份）
flex-shrink：定义项目的缩小比例（如果空间不足，项目缩小多少）
flex-basis ：在分配多余空间之前，项目占据的主轴空间（默认 auto）
flex ：简写属性，通常建议使用 flex: 1（表示项目自动填满剩余空间）
align-self ：允许单个项目覆盖父容器的 align-items 设置

flex

flex: 0 1 auto 是属性 flex 的**默认值，**它是由三个子属性组成的简写，分别代表了弹性项目在空间分配时的行为规则

参数	属性	值	含义
第一个值	flex-grow	0	不放大。即使容器有剩余空间，该项目也不会扩展占据多余空间
第二个值	flex-shrink	1	收缩。如果容器空间不足，该项目会随其他项目一起等比例缩小，以防止溢出
第三个值	flex-basis	auto	自动基准。项目的初始大小取决于它自身的内容（width/height）或设定的尺寸

flex: 1 (即 flex: 1 1 0%)：

表现：它会尽可能地放大占据所有剩余空间，并且会平分空间。常用于等分列布局

flex: none (即 flex: 0 0 auto)：

表现：既不放大也不缩小，无论容器多大或多小，它都保持内容本身的尺寸

flex: auto (即 flex: 1 1 auto)：

表现：会根据内容大小作为基准，但既能放大填满剩余空间，也能在空间不足时缩小

十一、BFC（块格式化上下文）

BFC 是一个独立的隔离容器。容器内部的元素布局无论如何变化，都不会影响到外部元素；反之，外部元素也不会干扰 BFC 内部

BFC 的布局规则（原理）

当一个元素触发了 BFC 后，它会遵循以下渲染规则：

内部垂直排列： 内部的 Box 会在垂直方向上一个接一个地放置
垂直距离由 Margin 决定： 属于同一个 BFC 的两个相邻 Box 的上下外边距（Margin）会发生重叠（Collapse）
左边界对齐： 每个元素的左外边距与包含块的左边界相接触（即使有浮动也是如此）
不会与浮动元素重叠： BFC 的区域不会与浮动（float）元素产生的区域重叠（这是实现自适应两栏布局的关键）
独立隔离： BFC 是一个独立的容器，里外的元素互不干扰
计算高度包含浮动： 计算 BFC 的高度时，浮动元素也会参与计算（这解决了高度塌陷问题）

如何触发 BFC

根元素 ：<html>（天然的 BFC）
浮动元素 ：float 值为 left 或 right
绝对定位元素 ：position 值为 absolute 或 fixed
特定的 display 属性 ：inline-block、table-cell、flex、grid 等
溢出处理 ：overflow 值不为 visible（如 hidden、auto、scroll）

BFC 的实际应用场景

防止外边距重叠

现象： 两个垂直相邻的 div，上一个设 margin-bottom: 20px，下一个设 margin-top: 30px，结果它们之间的间距是 30px 而不是 50px。
解决： 将其中一个 div 包裹在另一个 BFC 容器中，由于它们不再属于同一个 BFC，重叠就会消失。

清除内部浮动 (高度塌陷)

现象： 父元素没设高度，子元素全部 float，导致父元素高度变为 0
解决： 给父元素设置 overflow: hidden 触发 BFC。根据规则，BFC 在计算高度时会包含浮动子元素

实现自适应两栏布局

现象： 左侧浮动，右侧文字会环绕在左侧元素下方
解决： 给右侧元素触发 BFC（例如 overflow: hidden）。此时右侧元素会变成一个矩形块，不与左侧浮动元素重叠，从而实现完美的侧边栏 + 自适应主内容的布局

十二、三栏布局的实现

Flex 布局

JavaScript 复制代码

.container {
  display: flex;
}
.left, .right {
  width: 200px;
  flex-shrink: 0; /* 防止被压缩 */
}
.main {
  flex: 1; /* 占据剩余所有空间 */
}

Grid 网格布局