前端面试题-CSS篇

1.请说一下css的盒模型的详情。

盒子组成：内容content、内边距padding、边框border、外边距margin

标准盒模型/box-sizing：content-box：content+padding+border+margin

IE盒模型/box-sizing：border-box：margin+content（border+padding）

2.请说明一下css选择器的优先级。

css的特性：继承性、层叠性、优先级

优先级：写样式的时候，多个样式权重高就是哪个样式

标签、类/伪类/属性、全局选择器、行内样式、id、！important

！important>行内样式>id>类/伪类/属性>标签>全局选择器

！important（权重无限）

复制代码

/* 任何样式声明后添加 !important */
.button {
  color: red !important;  /* 这个规则会覆盖所有其他color设置 */
  background: blue;
}

行内样式（权重1000）

复制代码

<!-- 直接在HTML元素的style属性中编写 -->
<div style="color: blue; font-size: 16px;">内容</div>
<p style="margin: 10px 0; padding: 5px;">段落</div>

id（权重100）

复制代码

/* 语法：#id名称 */
#main-header {
  background: #333;
  color: white;
}

#sidebar .menu-item {
  padding: 8px;
}

#user-profile.active {
  border: 2px solid green;
}

类/伪类/属性（权重10）class

复制代码

/* 语法：.类名 */
.btn {
  padding: 10px 20px;
}

.btn.primary {
  background: blue;
}

.container .item {
  margin: 10px;
}
/* 基于元素状态的动态选择器 */
a:hover {
  color: red;  /* 鼠标悬停 */
}

input:focus {
  border-color: blue;  /* 获取焦点时 */
}

li:nth-child(2n) {
  background: #f5f5f5;  /* 偶数行 */
}

.form-group:not(.disabled) {
  opacity: 1;  /* 排除.disabled类 */
}
/* 根据HTML属性选择元素 */
input[type="text"] {
  border: 1px solid #ccc;
}

a[href^="https://"] {
  color: green;  /* href以https://开头 */
}

div[class*="container"] {
  max-width: 1200px;  /* class包含container */
}

[data-tooltip] {
  position: relative;  /* 有data-tooltip属性 */
}

标签（权重1）

复制代码

/* 使用HTML标签名 */
body {
  margin: 0;
  font-family: Arial;
}

h1, h2, h3 {
  color: #333;
}

ul > li {
  list-style: none;
}

section p {
  line-height: 1.6;
}

全局选择器（权重0）

复制代码

/* * 选择所有元素 */
* {
  box-sizing: border-box;  /* 常用重置 */
  margin: 0;
  padding: 0;
}

/* :where() 权重为0的伪类 */
:where(.container, .wrapper) p {
  margin: 1em 0;  /* 不影响特异性 */
}

3.隐藏元素的方法有哪些？

display:none;//元素在页面中消失，不占据空间

opacity:0;//设置元素透明度为0，元素不可见，占据元素位置

visibility:hidden;//让元素消失，占据空间位置

position:absolute;//从位置踢出去

4.请说明一下px和rem的区别

px像素，绝对单位长度

rem，相对单位长度，相对于html根节点的font-size的值

复制代码

font-size：60%

1rem = 10px

5.重绘和重排有什么区别？

重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小

重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制

浏览器的渲染机制

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

对DOM的样式进行修改，比如color和background--color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，就只触发了重绘。

6.让一个元素水平垂直居中的方式有哪些？

复制代码

<div class="father">
<div class="son"></div>
</div>

1.定位+margin

核心原理父容器设置 position: relative（开启相对定位，作为子元素绝对定位的参考）；子元素设置 position: absolute（绝对定位脱离文档流），同时top/right/bottom/left 全设为 0；子元素设置 margin: auto，浏览器会自动分配上下左右的外边距，实现完美居中。

复制代码

.father{
width:400px;
height:400px;
border:1px solid;
position:relative;
}
.son{
position:absolute;
width:200px;
height:200px;
background-color:red;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}

特点 ✅ 优点：兼容性极佳（支持 IE8+）、写法规范；

❌ 缺点：必须给子元素设置固定的宽高，否则子元素会被拉伸至充满父容器。

2.定位+transform

核心原理父容器仍需设置 position: relative；子元素 position: absolute + top: 50% + left: 50%：此时子元素左上角会对齐父容器的中心；子元素追加 transform: translate(-50%, -50%)：基于自身宽高向左、向上平移 50%，最终实现整体居中。

复制代码

.father {
  position: relative; /* 关键：父相 */
}
.son {
  position: absolute; /* 关键：子绝 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 关键：自身偏移 */
}

特点 ✅ 优点：子元素无需固定宽高（自适应宽高也能居中）、兼容性好（IE9+），是最常用的居中方案之一；

✅ 额外优势：支持子元素动态改变宽高，居中效果不会失效。

3.flex布局

核心属性作用： display: flex：将父容器转为弹性容器； justify-content: center：控制子元素水平方向居中； align-items: center：控制子元素垂直方向居中。

复制代码

.father{
display:flex;
justify-content:center;
align-items:center;
}
/* 子元素无需任何额外样式，直接居中 */

特点 ✅ 优点：写法极简、功能强大，子元素宽高可固定 / 自适应，支持多个子元素同时居中，适配所有现代浏览器；✅ 行业主流：目前前端开发中最推荐的居中方案，兼顾简洁性和灵活性；

❌ 缺点：兼容 IE10+（IE9 及以下不支持），但现代项目已无需考虑老旧 IE。

4.grid布局

核心原理 Grid 是二维布局模型，place-items 是复合属性，等价于 align-items + justify-items，直接控制子元素在网格容器中水平、垂直双居中。

复制代码

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

特点 ✅ 优点：写法最简洁（一行代码搞定）、子元素宽高无要求，支持多子元素居中，适配现代浏览器；

✅ 优势：Grid 擅长复杂二维布局，若项目本身用 Grid 布局，此方案是最优解；

❌ 缺点：兼容 IE11+（兼容性略低于 Flex）。

5.table布局

核心原理利用表格的天然特性实现居中：表格单元格（td）默认支持 vertical-align: middle（垂直居中），配合 text-align: center（水平居中）即可实现效果。需要两步转换：父容器转为「表格单元格」：display: table-cell；子元素转为「行内块元素」：display: inline-block（让水平居中生效）。

复制代码

.father {
  display: table-cell; /* 关键1：转为表格单元格 */
  text-align: center; /* 关键2：子元素水平居中 */
  vertical-align: middle; /* 关键3：子元素垂直居中 */
}
.son {
  display: inline-block; /* 关键：转为行内块，适配text-align */
}

7.css哪些属性可以继承，哪些不可以继承

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

子元素可以继承父类元素的样式

1.字体的一些属性：font

2.文本的一些属性：line-height

3.元素的可见性：visibility：hidden

4.表格布局的属性：border-spacing

5.列表的属性：list-style

6.页面样式属性：page

7.声音样式的属性

8.border: 1px solid red;border-width: 1px 1px 0 0;是什么意思，能讲一下相关知识要点吗？

核心结论：这是 CSS 中「边框宽度（border-width）」的简写形式，表示给元素设置四个方向的边框宽度，取值遵循 CSS 边距类属性的「顺时针方向规则」。第一个值 1 → 「上边框 (border-top)」宽度为 1px；第二个值 1 → 「右边框 (border-right)」宽度为 1px；第三个值 0 → 「下边框 (border-bottom)」宽度为 0（无边框）；第四个值 0 → 「左边框 (border-left)」宽度为 0（无边框）。

CSS border 完整复合属性的「三要素」（缺一不可） border 是 CSS 边框的完整复合属性，想要边框正常显示，必须同时包含 3 个核心值，顺序可任意，语法格式：

复制代码

border: [边框宽度] [边框样式] [边框颜色];

复制代码

/* 正常写法 */
broder:1px 1px 0 0 solid red;
/* 上、右边框1px实线，下、左边框无，边框颜色继承文字色 */
border: 1px 1px 0 0 solid;
/* 上、右边框1px红色实线，下、左边框无（推荐，语义更清晰） */
border: 1px solid red;
border-width: 1px 1px 0 0;

1.核心基础：CSS 边距类属性「顺时针简写规则」

规则 1：4 个值 → 上 → 右 → 下 → 左（顺时针，核心）

复制代码

/* 上1px、右2px、下3px、左4px */
border-width: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;

规则 2：3 个值 → 上 → 左右 → 下

复制代码

/* 上1px、左+右2px、下3px */
border-width: 1px 2px 3px;

规则 3：2 个值 → 上下 → 左右

复制代码

/* 上+下1px、左+右2px */
border-width: 1px 2px;

规则 4：1 个值 → 上下左右四边统一

复制代码

/* 上、右、下、左 都是1px */
border-width: 1px;

2.扩展 1：border-style 边框样式（必写，常用值）

复制代码

border-style: solid;    /* 实线（最常用） */
border-style: dashed;   /* 虚线 */
border-style: dotted;   /* 点线 */
border-style: double;   /* 双实线 */
border-style: none;     /* 无边框（默认值） */
border-style: hidden;   /* 隐藏边框（用于表格边框合并） */

3.扩展 2：「单方向边框」精准控制（开发高频用法）

复制代码

/* 格式：border-方向-属性: 值; */
border-top-width: 1px;    /* 仅上边框宽度 */
border-right-style: solid;/* 仅右边框样式 */
border-bottom-color: red; /* 仅下边框颜色 */

/* 极简写法（单方向完整边框，三要素合一，开发最常用） */
border-top: 1px solid red;    /* 仅上边框：1px红色实线 */
border-right: 2px dashed #000;/* 仅右边框：2px黑色虚线 */
border-bottom: 0;             /* 取消下边框 */
border-left: none;            /* 取消左边框 */

边框拆分简写

复制代码

/* 四边宽度统一，样式统一，颜色统一 */
border-width: 1px;
border-style: solid;
border-color: red;

/* 等价于完整复合写法 */
border: 1px solid red;

4.扩展 3：边框的「实用特殊技巧」（开发高频）

技巧 1：利用边框实现「三角形」（面试高频考点）

核心原理：将 3 个方向边框设为透明，仅保留 1 个方向边框，配合宽高为 0 实现，示例：

复制代码

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
  border-left: 20px solid transparent;
}

技巧 2：边框合并（表格专用）

表格相邻单元格会出现双边框，添加以下样式可合并为单边框：

复制代码

table {
  border-collapse: collapse; /* 合并表格边框 */
}

9.从css方面优化性能？

1.资源压缩与合并（基础必备，100% 要做）

优化方案压缩：移除 CSS 中的空白符、注释、无效代码，主流构建工具（Webpack/Vite/Rollup）会自动完成「代码压缩」，也可手动用在线工具（CSSNano、CleanCSS）压缩；合并：将多个零散的 CSS 文件合并为 1 个（构建工具自动分包 / 合并），减少 HTTP 请求数（HTTP1.1 中，浏览器对同域名并发请求数有限制）；生产环境必做：开启 Gzip/Brotli 压缩（服务器 / CDN 配置），CSS 文本类资源压缩率可达 70%+，体积大幅减小。

复制代码

// vite.config.js 生产环境自动压缩+分包
import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    minify: 'esbuild', // 开启CSS+JS压缩
    assetsInlineLimit: 4096, // 小资源内联，减少请求
  }
})

2.禁止使用 @import 引入 CSS

3.使用缓存：使用 HTTP 缓存功能可以加快加载速度。

4.减少使用 CSS 选择器：尽量使用简单的选择器，避免使用过于复杂的选择器。

10.有没有用过预处理器？

预处理器语言增加了变量、函数、混入等更强大的功能

SASS LESS

Sass/Less 核心增强功能（附语法对比）

二者核心能力高度一致，仅语法细节有差异，变量、混入、嵌套、函数是最常用的四大功能，也是你重点提及的核心，以下按「实用性优先级」讲解，附完整可运行语法示例。

核心 1：变量（最基础、最常用）核心价值：将颜色、字号、间距、公共路径等通用样式值统一声明为变量，实现「一处定义、全局复用、一键修改」，是样式规范化的基础。

Sass（Scss）变量语法（$ 符号声明）

复制代码

// 1. 全局变量（推荐定义在单独的_variables.scss文件中，全局引入）
$primary-color: #1677ff; // 主色调
$base-font-size: 14px;   // 基础字号
$container-width: 1200px;// 容器宽度
$img-path: "../assets/img/"; // 图片公共路径

// 2. 局部变量（仅当前选择器内生效）
.box {
  $local-color: #666; // 局部变量
  color: $local-color;
  font-size: $base-font-size;
  width: $container-width;
  background: url($img-path + "bg.png"); // 支持字符串拼接
}

Less 变量语法（@ 符号声明，与原生 CSS 变量更相似）

复制代码

// 全局变量
@primary-color: #1677ff;
@base-font-size: 14px;
@container-width: 1200px;
@img-path: "../assets/img/";

.box {
  @local-color: #666; // 局部变量
  color: @local-color;
  font-size: @base-font-size;
  width: @container-width;
  background: url("@{img-path}bg.png"); // Less字符串拼接需用大括号包裹变量
}

核心 2：嵌套语法（还原 HTML 层级，精简代码 80%）核心价值：完全还原 HTML 的 DOM 层级结构，嵌套书写样式选择器，彻底告别原生 CSS 的「父级选择器重复书写」问题，代码可读性、维护性大幅提升。

复制代码

// 原生CSS需写：.container .header {} / .container .header:hover {} / .container .main .content {}
.container {
  width: 1200px;
  margin: 0 auto;
  
  // 嵌套子选择器（对应 .container .header）
  .header {
    height: 60px;
    background: $primary-color;
    
    // & 代表父选择器 .header（对应 .header:hover）
    &:hover {
      opacity: 0.9;
    }
    
    // & 拼接（对应 .header-title）
    &-title {
      color: #fff;
      font-size: 18px;
    }
  }
  
  // 嵌套多层子选择器（对应 .container .main .content）
  .main {
    flex: 1;
    .content {
      padding: 20px;
      color: #333;
    }
  }
}

核心 3：混入（Mixin）- 代码片段复用神器（你重点提及）核心价值：预处理器最核心的复用能力！将任意样式片段封装为「可调用的代码块」，支持传参、默认值，实现「动态样式复用」。核心场景：圆角、阴影、清除浮动、弹性布局、响应式适配等通用样式。

Sass（Scss）混入语法（@mixin 声明 + @include 调用）

复制代码

// 1. 无参混入（固定样式复用）
@mixin clear-fix { // 封装清除浮动样式
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

// 2. 有参混入 + 默认值（动态样式复用，最常用）
@mixin border-radius($radius: 4px) { // $radius为参数，默认值4px
  -webkit-border-radius: $radius; // 兼容旧浏览器
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin flex-center($direction: row) { // 封装弹性布局居中，默认横向
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

// 调用混入（直接复用样式，可传参覆盖默认值）
.box {
  @include clear-fix; // 调用无参混入
  @include border-radius(8px); // 传参调用，圆角8px
}
.card {
  @include flex-center(column); // 传参改为纵向居中
  @include border-radius; // 不传参，使用默认值4px
}

Less 混入语法（.mixin() 声明 + 直接调用，更简洁）

复制代码

// 1. 无参混入
.clear-fix() { // 括号可省略，但推荐加（避免编译为无用CSS类）
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

// 2. 有参混入 + 默认值
.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.flex-center(@direction: row) {
  display: flex;
  flex-direction: @direction;
  justify-content: center;
  align-items: center;
}

// 调用混入（直接写混入名即可，无需关键字）
.box {
  .clear-fix();
  .border-radius(8px);
}
.card {
  .flex-center(column);
  .border-radius();
}

核心 4：函数功能

1.内置函数（最常用，无需自定义）

Sass 内置函数（示例：颜色、数值、百分比计算）

复制代码

$primary: #1677ff;
.box {
  color: darken($primary, 10%); // 主色调加深10%
  background: lighten($primary, 20%); // 主色调变浅20%
  opacity: fade-out($primary, 0.3); // 透明度降低30%
  width: percentage(0.8); // 0.8 → 80%（数值转百分比）
  height: round(24.5px); // 24.5px → 25px（四舍五入）
}

Less 内置函数（语法与 Sass 近似，功能更精简）

复制代码

@primary: #1677ff;
.box {
  color: darken(@primary, 10%);
  background: lighten(@primary, 20%);
  width: percentage(0.8);
}

2.自定义函数（复杂场景，按需封装）

Sass 自定义函数（@function 声明 + @return 返回）

复制代码

// 自定义：计算响应式宽度（总宽度 - 边距）
@function calc-width($total, $margin) {
  @return $total - 2 * $margin;
}
.box {
  width: calc-width(1200px, 20px); // 计算结果：1160px
}

Less 自定义函数（function 声明，语法更接近 JS）

复制代码

// 自定义：计算响应式宽度
.calc-width(@total, @margin) {
  @return: @total - 2 * @margin;
}
.box {
  width: .calc-width(1200px, 20px);
}