前端高频考题（css）

wayhome在哪
251 阅读6分钟

一、css盒模型

  • 标准盒模型：margin、border、padding、width
  • IE盒模型：margin、width（border + padding）

通过css如何转换盒子模型

  • box-sizing：content-box（标准）/ border-box（IE）

绝大多数场景推荐标准盒子模型，因其符合现代 Web 开发规范，逻辑清晰且兼容性良好

二、line-height和height

  • line-height：每一行文字的高，如果文字换行则整个盒子的高度会增大（行数*行高）
  • height：一个死值，盒子的高度

三、css的选择符？哪些属性可以继承？

  • 通配符（*）
  • id选择器（#）
  • 类选择器（.）
  • 标签选择器（div、p、h...）
  • 相邻选择器（+）
  • 后代选择器（ul li）
  • 子元素选择器（>）
  • 属性选择器（a[href]）

css哪些属性可以继承

  • 文字系列：font-size、color、line-height、text-align...
  • 不可继承属性：border、padding、margin...

四、css优先级算法如何计算？

  • 优先级比较：
  1. !important
  2. 内联样式
  3. ID 选择器（#id）
  4. 类选择器（.class）、属性选择器（[attr]）、伪类（:hover）
  5. 标签选择器（div、p）、伪元素（::before）
  6. 通配符选择器（*）、关系选择器（+、>、空格）、否定伪类（:not()）
  7. 继承样式
  • css权重计算
    • 内联样式：1000
    • id选择器：100
    • 类选择器：10
    • 标签&伪元素：1
    • *、+、>：0

五、用css画一个三角形

  • 用border画
div{
    width:0;
    height:0;
    border-left:100px solid #ccc;
    border-right:100px solid transparent;
    border-top:100px solid transparent;
    border-bottom:100xp solid transparent;
}

六、一个盒子不给宽高如何水平垂直居中

  • 方法一
.container{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
.main{
    background:red;
}
  • 方法二
.container{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
.main{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
    background:red;
}
  • 方法三
.parent {
  display: grid; /* 将父容器设为 Grid 容器 */
  place-items: center; /* 同时设置水平和垂直居中（等价于 align-items: center; justify-items: center;） */
  height: 300px; /* 需指定高度 */
}

.child {
  /* 子元素无需额外设置 */
}

七、对BFC规范的理解

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

  • 了解BFC：块级格式化上下文
  • BFC的原则：如果一个元素具有BFC，那么内部元素再怎么造，都不会影响到外面的元素
  • 如何触发BFC：
    • float：left
    • overflow：hidden

八、清除浮动的方式

  • 触发BFC
ul{
    list-style:none;
    border:10px solid #ccc;
    overflow:hidden;
}
ul li{
    float:left;
    width:100px;
    height:100px;
    background:red
}
  • after方式
ul{
    list-style:none;
    border:10px solid #ccc;
}
ul:after{
    content:'';
    display:block;
    clear:both;
}
ul li{
    float:left;
    width:100px;
    height:100px;
    background:red
}

九、position有哪些值？分别是根据什么定位的？

定位方式参考对象是否脱离文档流滚动行为
static正常文档流否随页面滚动
relative自身正常位置否随页面滚动
absolute已定位祖先元素是随祖先元素滚动
fixed浏览器视口是固定不动
sticky正常位置 + 视口阈值否（滚动时切换）到达阈值前随滚动，到达后固定

relative和absolute区别

  1. relative不脱离文档流、absolute脱离文档流
  2. relative相对于自身定位、absolute相对于第一个有relative的父元素定位
  3. relative如果有left、right、top、bottom -> left、top
  4. absolute如果有left、right、top、bottom -> left、right、top、bottom

十、双飞翼布局(左右固定中间自适应)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     *{
      margin:0;
      padding:0;
     }
     #container > div{
      float:left;
     }
     #center{
      width:100vw;
      height:100vh;
      background-color: pink;
     }
     #left{
      height:100vh;
      width:200px;
      margin-left:-100%;
      background-color: red;
     }
     #right{
      height:100vh;
      width:200px;
      margin-left:-200px;
      background-color: blue;
     }
  </style>
</head>
<body>
  <div id="container">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
  <style>
    body{
      height:100vh;
      margin:0;
      display:flex;
    }
    .left{
      width:200px;
      background-color: red;
    }
    .center{
      flex:1;
      background-color: pink;
    }
    .right{
      width:200px;
      background-color: blue;
    }
    
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</body>
</html>

十一、css reset是什么

  • reset.css 是一个css文件，用来重置css样式的。
  • normalize.css 为了增强跨浏览器渲染的一致性，一个css重置样式库

十二、css sprite是什么，有什么优缺点

  • 是什么：把多个小图标合成一张大图片

  • 优缺点

    • 优点：减少了http请求次数，提升了性能
    • 缺点：维护比较差（例如图片位置修改，图片宽高修改）

十三、display-none和visibility-hidden有什么区别

  • 占用位置的区别

    • display-none：是不占用位置的
    • visibility-hidden：虽然隐藏了，但是占用位置

  • 重绘重排

    • display-none：会触发重排和重绘，导致元素完全消失
    • visibility-hidden：仅触发重绘，元素仍保留占位空间
    • 产生重排：改变元素的位置
    • 产生重绘：改变样式

屏幕截图 2025-06-01 155528.png

十四、opacity和rgba的区别

  • opacity会继承父元素的opacity属性，而rgba设置的元素的后代元素不会继承透明属性

  • opacity 屏幕截图 2025-06-01 160427.png

  • rgba 屏幕截图 2025-06-01 160447.png

十五、flex的基本属性

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

十六、flex:1 flex:auto flex:0 flex:none

在 Flexbox 布局里，flex是一个复合属性，它综合了flex-grow、flex-shrink和flex-basis这三个属性。

  • flex-grow：定义元素在主轴方向上的扩张能力，默认值为0。
  • flex-shrink：定义元素在主轴方向上的收缩能力，默认值为1。
  • flex-basis：定义元素在分配空间前的初始大小，默认值为auto。
属性flex: 1 (1 1 0)flex: auto (1 1 auto)
初始大小基于0计算，忽略内容尺寸基于内容或width计算
剩余空间分配直接按比例分配全部空间先满足内容需求，再分配剩余空间
收缩行为内容可能被压缩（溢出）优先保持内容可见（避免溢出）
简写方式等价于主要特点
flex: 0flex: 0 1 0%不放大，允许收缩，初始尺寸为容器的 0%
flex: 1flex: 1 1 0%可放大（占剩余空间），允许收缩
flex: noneflex: 0 0 auto不放大、不收缩，尺寸由内容决定（固定尺寸）
flex: autoflex: 1 1 auto可放大、可收缩，初始尺寸由内容决定

十七、什么是 CSS Modules？解决了什么问题？

CSS Modules 是一种 “模块化 CSS” 方案，通过工具（如 Webpack、Vite）将 CSS 文件处理为 “模块”，每个模块的类名会被自动生成唯一的哈希值（如 .box → .box__3k2j5），避免不同文件中的类名冲突。

  • 全局样式冲突：传统 CSS 是 “全局作用域”，不同组件 / 文件中的相同类名（如 .box）会相互覆盖，尤其在大型项目中（多人协作、组件复用），冲突问题严重。
  • 样式污染：某组件的样式可能意外影响其他组件（如全局样式泄漏到局部）。
  • 类名命名困难：为避免冲突，传统 CSS 需写冗长的类名（如 .header-nav-item），CSS Modules 可简化命名（直接用 .item）。
  1. 配置 Webpack，启用 CSS Modules：
        // webpack.config.js
        module.exports = {
          module: {
            rules: [
              {
                test: /.css$/,
                use: [
                  'style-loader',
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true, // 启用 CSS Modules
                    },
                  },
                ],
              },
            ],
          },
        };

2. 在组件中使用：

    /* Box.css（CSS Modules 文件） */
    .box {
      width: 100px;
      height: 100px;
      background: #f00;
    }

<!---->

    // Box.jsx
    import styles from './Box.css'; // 导入 CSS Modules，styles 是一个对象

    function Box() {
      // 使用生成的唯一类名：styles.box → 实际为 .box__3k2j5
      return <div className={styles.box}></div>;
    }
avatar
文章
阅读
粉丝