2025面试高频CSS合集

星星码
28 阅读5分钟

面试中常考的css相关问题。

也会存在代码阅读题。

下面问题梳理从细到粗。

1.盒子模型

提问：什么是盒子模型？

回答：CSS 盒子模型是描述基本的浏览器如何计算元素的尺寸和布局的方式。

    - 包含：content（内容） + padding（内边距） + border（边框） + margin（外边距）

盒子模型分为标准盒子模型和怪异盒子模型，具体的：

标准盒子模型：

- box-sizing: content-box; /* 默认 */
- width / height = content

怪异盒子模型：

    - box-sizing: border-box;
    - width / height = content + padding + border

2.BFC

提问：什么是BFC？ 回答：BFC（Block Formatting Context）是一个独立的布局环境，内部元素的布局不会影响外部元素，外部也不会影响内部。

提问：BFC的作用是什么？ 回答：解决margin塌陷；清除浮动（可以不用clearfix）；普通元素可能被float元素遮住，BFC元素会避开float；实现自适应的两栏布局；

        //实现BFC的方式
        overflow：hidden / auto / scrolll
        display：flow-root

常见的是阅读css代码题目，判断存在的margin塌陷问题：

  • 相邻兄弟margin塌陷（垂直方向），看似应该是50px，但是实际是30px，取了两个之间margin的最大值；

image.png

  • 父子元素margin塌陷 在父元素没有border/padding/bfc的情况下，子元素的垂直方向上的margin不会在父元素内部生效，而是跑到父元素的外部。

塌陷前：child的margin-top在parent的外部，child贴着parent的顶部，parent内部没有30px的红色间隔 明确child距离父元素顶部的距离是0px image.png

bfc解决塌陷

image.png

3.样式优先级

!important > 内联 style > ID选择器 > class选择器 > 标签选择器 > 通配符 > 继承

题目：说出下列字体的颜色（需要会权重计算）

    <div id="app" class="box">
      <p class="child" style="color: purple;">child</p>
    </div>

    p { color: red; }
    .box .child { color: blue; }
    #app p { color: green; }
    .child { color: orange !important; }

先看有没有!important，再看有没有style。确认没有内联样式后，再进行权重比较，#app是id选择器，.child类选择器，p标签选择器

4.字体单位

常见的

单位说明
px固定像素
em相对于当前元素字体大小
rem相对于根元素 html 的字体大小
vw视口宽度的 1%

5.考虑元素的样式继承问题

（能影响文字的，一般都会继承，和盒子、布局、位置有关的，基本都不能继承）

6.布局

提问：前端常见的布局方式主要有哪种？ 回答：普通文档流，定位布局，浮动布局，flex（一维）布局，grid（二维）布局

常考提问：flex-1是什么？ 回答：自适应撑满。 flex:1 = flex-grow 1 （剩余空间如何分） + flex-shrink 1 （剩余空间不够） + flex-basis 0（分配空间前的初始尺寸）

两栏布局 几种实现方式代码

    <div class="wrap">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>

  • float 特点：兼容性好，但需要清除浮动；左栏固定宽，右栏自适应

      .wrap {
    width: 100%;
  }

  /* 左栏固定 */
  .left {
    float: left;
    width: 200px;
    background: #eee;
  }

  /* 右栏自适应 */
  .right {
    margin-left: 200px; /* 与 left 宽度一致 */
    background: #ddd;
  }

  /* 清除浮动，避免父容器高度塌陷，给父元素单独加 */
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  • inline-block 特点:不需要清除浮动，对“空白字符敏感”，用font-size:0解决

      .wrap {
    font-size: 0; /* 去掉 inline-block 的空白间隙 */
  }

  .left, .right {
    display: inline-block;
    vertical-align: top;
    font-size: 16px; /* 还原文字大小 */
  }

  .left {
    width: 240px;  /* 左边固定宽度240px */
    background: #eee;
  }

  .right {
    width: calc(100% - 240px);   /*右边自适应 */
  }

    • table-cell 特点：左右列默认等高

      .wrap { display: table; width: 100%; }

      .left, .right { display: table-cell; vertical-align: top; }

      .left { width: 240px; /* 固定宽 */ background: #eee; }

      .right { background: #ddd; /* 自动占满剩余 */ }

  • 三栏布局

7.元素居中

  • 1. flex + justify-content + align-item，其中，justify-content是默认主轴方向水平；默认的主轴方向是水平的。

      .parent{
    display: flex;
    justify-content: center; /* 主轴（默认水平） */
    align-items: center;     /* 交叉轴（默认垂直） */
  }

image.png

  • 2. position相对位置： + transform （不参与文档流，由GPU合成层处理）

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

  • 3. position相对位置： + margin

      .parent{ position: relative; }

  .child{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 100px;
    margin-left: -100px; /* -width/2 */
    margin-top: -50px;   /* -height/2 */
  }

  • 4.grid居中

      .parent{
    display: grid;
    place-items: center; /* 同时水平+垂直 */
  }

8.一些额外的：如何让元素消失

不用死记硬背，记一下单词的意思就容易记住了。

方法DOM 是否存在是否重排是否重绘
display: none❌✅✅
visibility: hidden✅❌✅
opacity: 0✅❌✅

9.一些额外的：如何截断文末内容

  • 单行省略号 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  • 多行省略号 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

10.一些额外的：tailWindCSS （CV上有的话可以背一下）

  • 提问：tailwindCSS如何变成CSS？回答：通过 PostCSS + Tailwind CLI / Vite / Webpack 在构建时扫描代码： 1.postCSS插件会去扫描content配置里面指定的文件（例如js/html）; -> 2.收集实际用到的class名称，JIT按需生成对应的class名称； -> 3.输出到最终最终的css文件中
  • 提问：tailwindCSS有什么优缺点？答案： 优点：开发快、不用命名 class、体积小（JIT）、统一设计规范、可维护性好； 缺点：HTML 类名长、学习成本、不语义化、初期阅读困难
  • 提问：项目使用taildwindCSS的时候，如果在代码里写了之后样式不生效怎么办？（Tailwind 中 h-50 生效但 h-51 不生效，为什么？） 答案：Tailwind 是基于设计系统和 JIT 按需生成 CSS 的工具框架，默认只会生成配置文件中存在的尺寸值。如果 h-51 不在 theme.spacing 或高度配置中，就不会生成对应的 CSS 类，因此样式不会生效。
avatar
文章
阅读
粉丝