CSS 面试题答案

1. CSS盒模型是什么？标准盒模型和IE盒模型的区别？

CSS盒模型是CSS中用于布局的基本概念，它将每个HTML元素视为一个矩形盒子，包含内容区、内边距、边框和外边距。

标准盒模型：

元素的宽度 = 内容区宽度
元素的总宽度 = 内容区宽度 + 内边距 + 边框 + 外边距
对应 box-sizing: content-box（默认值）

IE盒模型：

元素的宽度 = 内容区宽度 + 内边距 + 边框
元素的总宽度 = 设定的宽度 + 外边距
对应 box-sizing: border-box

2. CSS选择器的优先级规则？

CSS选择器的优先级从高到低依次为：

内联样式（style属性）：优先级 1000
ID选择器（#id）：优先级 100
类选择器（.class）、属性选择器（[attr]）、伪类选择器（:hover）：优先级 10
元素选择器（div）、伪元素选择器（::before）：优先级 1
通配符选择器（*）、继承的样式：优先级 0

计算规则：

相同优先级的选择器，后定义的覆盖先定义的
可以使用 !important 提升优先级（但应尽量避免使用）

3. CSS定位(position)的几种类型及其区别？

CSS定位有以下几种类型：

static（默认）：元素按照正常文档流排列，不受top、left、right、bottom属性影响
relative：元素相对其正常位置进行定位，不脱离文档流，其他元素位置不受影响
absolute：元素相对于最近的非static定位祖先元素定位，脱离文档流
fixed：元素相对于浏览器窗口定位，脱离文档流，滚动时位置固定
sticky：元素在滚动到指定位置前表现为relative，滚动后表现为fixed

4. 如何实现水平垂直居中（至少 5 种方法）？

Flexbox布局：

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid布局：

css

.container {
  display: grid;
  place-items: center;
}

绝对定位 + transform：

css

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

绝对定位 + margin auto：

css

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

**绝对定位 + margin负边距：

css

.container {
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

table-cell布局：

css

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

5. CSS 选择器有哪些类型、优先级如何计算？

选择器类型：

基础选择器：元素选择器、ID选择器、类选择器、通配符选择器
组合选择器：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
属性选择器：[attr]、[attr=value]、[attr^=value]、[attr$=value]、[attr*=value]
伪类选择器：:hover、:active、:focus、:nth-child()等
伪元素选择器：::before、::after、::first-letter、::first-line

优先级计算：

内联样式：1000
ID选择器：100
类、属性、伪类选择器：10
元素、伪元素选择器：1
通配符、继承：0

6. 相邻块级元素的垂直 margin 为什么会重叠？如何避免？

原因：CSS规范中，相邻块级元素的垂直margin会发生重叠，取较大值作为最终margin。

避免方法：

使用 padding 代替 margin
为元素添加 border
为元素添加 overflow: hidden 创建BFC
使用 Flexbox 或 Grid 布局
将其中一个元素包裹在另一个元素中，创建新的块级上下文

7. 弹性盒子中 flex: 0 1 auto 表示什么意思？

flex: 0 1 auto 是 flex 属性的默认值，它包含三个部分：

flex-grow: 0：元素不放大，不占据剩余空间
flex-shrink: 1：元素可以缩小，当空间不足时会收缩
flex-basis: auto：元素的初始大小由内容决定

8. 对比下px、em、rem有什么不同？

px：绝对单位，固定大小，不受其他因素影响
em：相对单位，相对于父元素的字体大小，具有继承性
rem：相对单位，相对于根元素（html）的字体大小，便于响应式设计

9. CSS3有哪些新增的特性？

选择器：nth-child()、nth-of-type()、:not()等
盒模型：box-sizing、border-radius、box-shadow
背景：background-size、background-origin、background-clip
渐变：linear-gradient、radial-gradient
过渡：transition
变换：transform
动画：animation
弹性布局：flexbox
网格布局：grid
媒体查询：@media
字体：@font-face
多列布局：column-count、column-gap

10. style标签写在body前和body后的区别是什么？

写在body前：CSS会在HTML解析前加载，避免页面闪烁，推荐使用
写在body后：CSS会在HTML解析后加载，可能导致页面闪烁，不推荐使用

11. 请描述margin边界叠加是什么及解决方案？

margin边界叠加：相邻的块级元素的垂直margin会发生重叠，取较大值作为最终margin。

解决方案：

使用 padding 代替 margin
为元素添加 border
为元素添加 overflow: hidden 创建BFC
使用 Flexbox 或 Grid 布局
将其中一个元素包裹在另一个元素中，创建新的块级上下文

12. 说说你对媒体查询的理解？

媒体查询是CSS3的特性，允许根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式。

基本语法：

css

@media media-type and (media-feature) {
  /* 样式规则 */
}

常用媒体特性：

width/height：视口宽度/高度
device-width/device-height：设备屏幕宽度/高度
orientation：设备方向（portrait/landscape）
resolution：设备分辨率

13. 什么是回流（重排）与重绘？如何减少？

回流（重排）：当DOM元素的位置、大小、结构发生变化时，浏览器需要重新计算元素的几何位置和布局，这个过程称为回流。

重绘：当DOM元素的样式（如颜色、背景）发生变化，但不影响布局时，浏览器需要重新绘制元素，这个过程称为重绘。

减少方法：

避免频繁操作DOM
使用DocumentFragment批量操作DOM
避免频繁修改样式，使用class批量修改
避免使用table布局
使用CSS transform代替top/left等属性
为元素设置固定宽度和高度，减少布局计算
使用will-change属性提示浏览器优化

14. CSS 性能优化方法有哪些？

减少CSS文件大小：压缩CSS文件，移除无用代码
合理使用选择器：避免过于复杂的选择器，提高选择器效率
使用CSS预处理器：如Sass、Less，提高代码可维护性
避免使用@import：使用link标签代替，减少HTTP请求
使用CSS变量：便于维护和主题切换
避免使用!important：保持样式优先级的清晰
使用CSS动画代替JavaScript动画：性能更好
合理使用display属性：避免频繁切换display属性
使用flexbox和grid：更高效的布局方式
避免使用expression：在IE中会影响性能

15. 常见的 CSS 兼容性问题与解决方案有哪些？

盒模型差异：使用 box-sizing: border-box 统一盒模型
IE浏览器的透明度：使用 filter: alpha(opacity=50) 兼容IE
IE浏览器的浮动问题：使用 clear: both 清除浮动
IE浏览器的margin加倍：为浮动元素添加 display: inline
响应式布局兼容性：使用媒体查询和弹性布局
字体兼容性：使用 @font-face 引入自定义字体
CSS3特性兼容性：使用浏览器前缀，如 -webkit-、-moz-、-ms-

16. CSS 预处理器（Sass/Less/Stylus）的作用与区别是什么？

作用：

提供变量、嵌套、混合、继承等特性，提高CSS代码的可维护性
支持模块化开发，便于代码组织
提供数学运算、函数等高级特性

区别：

Sass：使用缩进语法或SCSS语法，功能丰富，社区活跃
Less：使用CSS类似的语法，学习成本低，依赖JavaScript
Stylus：语法灵活，支持多种写法，功能强大

17. PostCSS 的作用是什么？

PostCSS是一个CSS处理工具，它可以：

自动添加浏览器前缀
转换现代CSS语法到兼容版本
提供插件系统，支持各种CSS处理功能
优化CSS代码，提高性能
支持CSS模块化和组件化开发

18. 如何实现响应式图片？

使用max-width：

css

img {
  max-width: 100%;
  height: auto;
}

使用picture元素：

html

<picture>
  <source media="(max-width: 768px)" srcset="small.jpg" />
  <source media="(max-width: 1200px)" srcset="medium.jpg" />
  <img src="large.jpg" alt="Responsive image" />
</picture>

使用srcset属性：

html

<img
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="large.jpg"
  alt="Responsive image"
/>

19. 如何适配 Retina 屏高清图片？

使用2x图片：为Retina屏提供高分辨率图片

使用srcset属性：

html

<img
  srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x"
  src="image.jpg"
  alt="HD image"
/>

使用CSS媒体查询：

css

@media (-webkit-device-pixel-ratio: 2), (device-pixel-ratio: 2) {
  .logo {
    background-image: url(logo@2x.png);
    background-size: 100px 50px;
  }
}

使用SVG：SVG是矢量图，在任何分辨率下都清晰

20. 如何实现图片自适应容器？

基本方法：

css

img {
  max-width: 100%;
  height: auto;
}

使用object-fit：

css

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或 contain、fill等 */
}

使用背景图片：

css

.container {
  background-image: url(image.jpg);
  background-size: cover;
  background-position: center;
}

21. 如何处理移动端 1px 边框问题？

使用伪元素 + transform：

css

.border {
  position: relative;
}
.border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: 0 0;
}

使用媒体查询：

css

@media (-webkit-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #000;
  }
}

使用box-shadow：

css

.border {
  box-shadow: 0 0 0 1px #000;
}

22. 移动端适配方案有哪些？

媒体查询：根据不同屏幕尺寸应用不同样式
弹性布局：使用flexbox和grid布局
rem布局：根据根元素字体大小调整元素大小
vw/vh布局：使用视口单位
响应式图片：根据屏幕尺寸加载不同分辨率的图片
设备像素比适配：使用媒体查询和高分辨率图片

23. 如何实现等高布局？

Flexbox布局：

css

.container {
  display: flex;
}
.item {
  flex: 1;
}

Grid布局：

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

table布局：

css

.container {
  display: table;
}
.item {
  display: table-cell;
}

伪元素 + padding：

css

.container {
  overflow: hidden;
}
.item {
  padding-bottom: 1000px;
  margin-bottom: -1000px;
}

24. !important 的作用是什么？使用时需注意什么？

作用：!important 用于提升CSS规则的优先级，使其覆盖其他所有规则。

注意事项：

尽量避免使用 !important，因为它会破坏CSS的层叠规则
只有在覆盖第三方库的样式或解决特定问题时使用
过多使用 !important 会使代码难以维护
可以通过提高选择器优先级来代替使用 !important

25. 组合选择器（后代、子、相邻、兄弟）的语法与区别是什么？

后代选择器：A B，选择A元素内的所有B元素（包括子元素、孙元素等）
子选择器：A > B，选择A元素的直接子元素B
相邻兄弟选择器：A + B，选择A元素后面紧邻的B元素
通用兄弟选择器：A ~ B，选择A元素后面的所有B元素

26. 属性选择器的用法有哪些？

[attr]：选择具有attr属性的元素
[attr=value]：选择attr属性值等于value的元素
[attr^=value]：选择attr属性值以value开头的元素
[attr$=value]：选择attr属性值以value结尾的元素
[attr=value]*：选择attr属性值包含value的元素
[attr~=value]：选择attr属性值包含value单词的元素
[attr|=value]：选择attr属性值以value开头或以value-开头的元素

27. 清除浮动的方法有哪些？为什么需要清除浮动、各自优缺点是什么？

为什么需要清除浮动：当子元素浮动后，父元素的高度会塌陷，影响后续元素的布局。

清除浮动的方法：

使用clear: both：
- 优点：简单直接
- 缺点：需要额外添加元素
使用overflow: hidden：
- 优点：代码简洁，无需额外元素
- 缺点：可能会隐藏溢出内容
使用伪元素：
css
```
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}
```
1
2
3
4
5
- 优点：无需额外元素，语义清晰
- 缺点：代码稍多
使用display: flow-root：
- 优点：现代方法，语义清晰
- 缺点：浏览器兼容性较差

28. 如何实现两栏布局（左侧固定，右侧自适应）？

浮动布局：

css

.left {
  float: left;
  width: 200px;
}
.right {
  margin-left: 200px;
}

Flexbox布局：

css

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}

Grid布局：

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

29. 如何实现三栏布局（中间自适应，两侧固定）？

浮动布局：

css

.left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: 200px;
}
.center {
  margin: 0 200px;
}

Flexbox布局：

css

.container {
  display: flex;
}
.left,
.right {
  width: 200px;
}
.center {
  flex: 1;
}

Grid布局：

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

绝对定位：

css

.container {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
  width: 200px;
}
.right {
  position: absolute;
  right: 0;
  width: 200px;
}
.center {
  margin: 0 200px;
}

30. 什么是流式布局、弹性布局、网格布局？

流式布局：使用百分比宽度，使元素随容器大小变化而变化，是早期的响应式布局方法。

弹性布局（Flexbox）：一维布局模型，通过flex属性控制元素的伸缩和排列，适用于行或列的布局。

网格布局（Grid）：二维布局模型，通过网格线将页面划分为行和列，可以精确控制元素在网格中的位置和大小。

31. 什么是 sticky 定位？

sticky定位是CSS3的新特性，它结合了relative和fixed定位的特点：

当元素在视口中时，表现为relative定位
当元素滚动到指定位置时，表现为fixed定位
常用于导航栏、侧边栏等需要固定的元素

使用方法：

css

.element {
  position: sticky;
  top: 0;
}

32. flex布局有哪些属性？功能含义是什么？

容器属性：

display: flex：启用flex布局
flex-direction：设置主轴方向（row、row-reverse、column、column-reverse）
flex-wrap：设置是否换行（nowrap、wrap、wrap-reverse）
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）

项目属性：

flex-grow：设置项目的放大比例
flex-shrink：设置项目的缩小比例
flex-basis：设置项目的初始大小
flex：flex-grow、flex-shrink、flex-basis的简写
align-self：设置单个项目的交叉轴对齐方式
order：设置项目的排列顺序

33. 如何实现单行和多行文本溢出省略？

单行文本溢出省略：

css

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

多行文本溢出省略：

css

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

34. 如何自定义字体（@font-face）？

css

@font-face {
  font-family: 'MyFont';
  src:
    url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}

35. 什么是视口（viewport）？如何设置？

视口是浏览器显示网页的区域，对于移动设备来说，视口通常小于设备屏幕尺寸。

设置视口：

html

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

参数说明：

width=device-width：视口宽度等于设备宽度
initial-scale=1.0：初始缩放比例为1
maximum-scale=1.0：最大缩放比例为1
user-scalable=no：禁止用户缩放

36. 设备像素、CSS 像素、DPR、PPI 的区别是什么？

设备像素：物理像素，屏幕上实际的像素点
CSS像素：逻辑像素，CSS中使用的像素单位
DPR（设备像素比）：设备像素与CSS像素的比值，DPR = 设备像素 / CSS像素
PPI（像素密度）：每英寸的像素数量，衡量屏幕清晰度

37. box-sizing: content-box 和 box-sizing: border-box 的区别是什么？

content-box：标准盒模型，元素宽度 = 内容区宽度，总宽度 = 内容区宽度 + 内边距 + 边框 + 外边距
border-box：IE盒模型，元素宽度 = 内容区宽度 + 内边距 + 边框，总宽度 = 设定的宽度 + 外边距

38. margin 可以设置负值吗？有什么效果？

是的，margin可以设置负值，效果如下：

margin-top负值：元素向上移动
margin-left负值：元素向左移动
margin-right负值：右侧元素向左移动
margin-bottom负值：下方元素向上移动

39. CSS3 渐变有哪些类型？如何使用？

线性渐变：

css

.linear-gradient {
  background: linear-gradient(to right, red, blue);
}

径向渐变：

css

.radial-gradient {
  background: radial-gradient(circle, red, blue);
}

重复渐变：

css

.repeating-linear-gradient {
  background: repeating-linear-gradient(to right, red, blue 10%, red 20%);
}

40. CSS3 过渡（transition）的用法是什么？

css

.element {
  transition: property duration timing-function delay;
}

参数说明：

property：要过渡的CSS属性（如all、width、height等）
duration：过渡持续时间（如1s、500ms等）
timing-function：过渡速度曲线（如ease、linear、ease-in、ease-out、ease-in-out等）
delay：过渡延迟时间（如0s、500ms等）

41. CSS3 变换（transform）有哪些功能？

translate：平移元素
rotate：旋转元素
scale：缩放元素
skew：倾斜元素
matrix：矩阵变换
perspective：透视效果
transform-origin：设置变换原点

42. CSS3 动画（animation）的用法是什么？

css

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element {
  animation: myAnimation 1s ease-in-out infinite alternate;
}

参数说明：

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画速度曲线
animation-delay：动画延迟时间
animation-iteration-count：动画重复次数（如infinite无限次）
animation-direction：动画方向（如normal、reverse、alternate等）
animation-fill-mode：动画结束后保持的状态（如none、forwards、backwards等）
animation-play-state：动画播放状态（如running、paused）

45. animation 与 transition 的区别是什么？

transition：需要触发条件（如hover），只能从一个状态过渡到另一个状态
animation：可以自动播放，支持多个关键帧，更灵活

46. CSS3 弹性盒模型（Flexbox）是什么？

Flexbox是CSS3的一种布局模型，它提供了一种更灵活的方式来布局、对齐和分配容器内元素的空间，即使元素大小未知或动态变化。

特点：

一维布局（行或列）
支持元素的伸缩和对齐
自动处理元素的空间分配
响应式设计友好

47. Flexbox 常用属性有哪些？

容器属性：

display: flex：启用flex布局
flex-direction：设置主轴方向
flex-wrap：设置是否换行
justify-content：设置主轴对齐方式
align-items：设置交叉轴对齐方式
align-content：设置多行对齐方式

项目属性：

flex-grow：设置项目的放大比例
flex-shrink：设置项目的缩小比例
flex-basis：设置项目的初始大小
flex：flex-grow、flex-shrink、flex-basis的简写
align-self：设置单个项目的交叉轴对齐方式
order：设置项目的排列顺序

48. CSS3 网格布局（Grid）是什么？

Grid是CSS3的一种二维布局模型，它将页面划分为行和列，通过网格线来精确定位和调整元素的大小和位置。

特点：

二维布局（行和列）
支持复杂的布局结构
精确控制元素位置和大小
响应式设计友好

49. Flex 布局的主轴与交叉轴是什么？

主轴：flex-direction定义的方向，默认为水平方向（row）
交叉轴：与主轴垂直的方向，默认为垂直方向

flex-direction的值：

row：主轴为水平方向，从左到右
row-reverse：主轴为水平方向，从右到左
column：主轴为垂直方向，从上到下
column-reverse：主轴为垂直方向，从下到上

50. 什么是 BFC（块级格式化上下文）？

BFC是块级格式化上下文，是一个独立的渲染区域，内部元素的布局不会影响外部元素。

创建BFC的方法：

根元素（html）
浮动元素（float不为none）
绝对定位元素（position为absolute或fixed）
行内块元素（display为inline-block）
表格单元格（display为table-cell）
表格标题（display为table-caption）
溢出元素（overflow不为visible）
弹性元素（display为flex或inline-flex）
网格元素（display为grid或inline-grid）

BFC的作用：

解决margin重叠问题
清除浮动
防止元素被浮动元素覆盖
隔离内部布局

React 基础与核心思想

React 状态管理方案

React Hooks 深度解析

React 性能优化与新特性

渲染和性能

DOM/事件模型

异步/网络/安全

前端攻防安全

经典布局案例

CSS 面试题答案 ​

1. CSS盒模型是什么？标准盒模型和IE盒模型的区别？ ​

2. CSS选择器的优先级规则？ ​

3. CSS定位(position)的几种类型及其区别？ ​

4. 如何实现水平垂直居中（至少 5 种方法）？ ​

5. CSS 选择器有哪些类型、优先级如何计算？ ​

6. 相邻块级元素的垂直 margin 为什么会重叠？如何避免？ ​

7. 弹性盒子中 flex: 0 1 auto 表示什么意思？ ​

8. 对比下px、em、rem有什么不同？ ​

9. CSS3有哪些新增的特性？ ​

10. style标签写在body前和body后的区别是什么？ ​

11. 请描述margin边界叠加是什么及解决方案？ ​

12. 说说你对媒体查询的理解？ ​

13. 什么是回流（重排）与重绘？如何减少？ ​

14. CSS 性能优化方法有哪些？ ​

15. 常见的 CSS 兼容性问题与解决方案有哪些？ ​

16. CSS 预处理器（Sass/Less/Stylus）的作用与区别是什么？ ​

17. PostCSS 的作用是什么？ ​

18. 如何实现响应式图片？ ​

19. 如何适配 Retina 屏高清图片？ ​

20. 如何实现图片自适应容器？ ​

21. 如何处理移动端 1px 边框问题？ ​

22. 移动端适配方案有哪些？ ​

23. 如何实现等高布局？ ​

24. !important 的作用是什么？使用时需注意什么？ ​

25. 组合选择器（后代、子、相邻、兄弟）的语法与区别是什么？ ​

26. 属性选择器的用法有哪些？ ​

27. 清除浮动的方法有哪些？为什么需要清除浮动、各自优缺点是什么？ ​

28. 如何实现两栏布局（左侧固定，右侧自适应）？ ​

29. 如何实现三栏布局（中间自适应，两侧固定）？ ​

30. 什么是流式布局、弹性布局、网格布局？ ​

31. 什么是 sticky 定位？ ​

32. flex布局有哪些属性？功能含义是什么？ ​

33. 如何实现单行和多行文本溢出省略？ ​

34. 如何自定义字体（@font-face）？ ​

35. 什么是视口（viewport）？如何设置？ ​

36. 设备像素、CSS 像素、DPR、PPI 的区别是什么？ ​

37. box-sizing: content-box 和 box-sizing: border-box 的区别是什么？ ​

38. margin 可以设置负值吗？有什么效果？ ​

39. CSS3 渐变有哪些类型？如何使用？ ​

40. CSS3 过渡（transition）的用法是什么？ ​

41. CSS3 变换（transform）有哪些功能？ ​

42. CSS3 动画（animation）的用法是什么？ ​

45. animation 与 transition 的区别是什么？ ​

46. CSS3 弹性盒模型（Flexbox）是什么？ ​

47. Flexbox 常用属性有哪些？ ​

48. CSS3 网格布局（Grid）是什么？ ​

49. Flex 布局的主轴与交叉轴是什么？ ​

50. 什么是 BFC（块级格式化上下文）？ ​

CSS 面试题答案

1. CSS盒模型是什么？标准盒模型和IE盒模型的区别？

2. CSS选择器的优先级规则？

3. CSS定位(position)的几种类型及其区别？

4. 如何实现水平垂直居中（至少 5 种方法）？

5. CSS 选择器有哪些类型、优先级如何计算？

6. 相邻块级元素的垂直 margin 为什么会重叠？如何避免？

7. 弹性盒子中 flex: 0 1 auto 表示什么意思？

8. 对比下px、em、rem有什么不同？

9. CSS3有哪些新增的特性？

10. style标签写在body前和body后的区别是什么？

11. 请描述margin边界叠加是什么及解决方案？

12. 说说你对媒体查询的理解？

13. 什么是回流（重排）与重绘？如何减少？

14. CSS 性能优化方法有哪些？

15. 常见的 CSS 兼容性问题与解决方案有哪些？

16. CSS 预处理器（Sass/Less/Stylus）的作用与区别是什么？

17. PostCSS 的作用是什么？

18. 如何实现响应式图片？

19. 如何适配 Retina 屏高清图片？

20. 如何实现图片自适应容器？

21. 如何处理移动端 1px 边框问题？

22. 移动端适配方案有哪些？

23. 如何实现等高布局？

24. !important 的作用是什么？使用时需注意什么？

25. 组合选择器（后代、子、相邻、兄弟）的语法与区别是什么？

26. 属性选择器的用法有哪些？

27. 清除浮动的方法有哪些？为什么需要清除浮动、各自优缺点是什么？

28. 如何实现两栏布局（左侧固定，右侧自适应）？

29. 如何实现三栏布局（中间自适应，两侧固定）？

30. 什么是流式布局、弹性布局、网格布局？

31. 什么是 sticky 定位？

32. flex布局有哪些属性？功能含义是什么？

33. 如何实现单行和多行文本溢出省略？

34. 如何自定义字体（@font-face）？

35. 什么是视口（viewport）？如何设置？

36. 设备像素、CSS 像素、DPR、PPI 的区别是什么？

37. box-sizing: content-box 和 box-sizing: border-box 的区别是什么？

38. margin 可以设置负值吗？有什么效果？

39. CSS3 渐变有哪些类型？如何使用？

40. CSS3 过渡（transition）的用法是什么？

41. CSS3 变换（transform）有哪些功能？

42. CSS3 动画（animation）的用法是什么？

45. animation 与 transition 的区别是什么？

46. CSS3 弹性盒模型（Flexbox）是什么？

47. Flexbox 常用属性有哪些？

48. CSS3 网格布局（Grid）是什么？

49. Flex 布局的主轴与交叉轴是什么？

50. 什么是 BFC（块级格式化上下文）？