前端高频考题（css）

一、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优先级算法如何计算？

优先级比较：

!important
内联样式
ID 选择器 （#id）
类选择器 （.class）、属性选择器 （[attr]）、伪类（:hover）
标签选择器 （div、p）、伪元素 （::before）
通配符选择器 （*）、关系选择器 （+、>、空格）、否定伪类 （:not()）
继承样式

css权重计算
- 内联样式：1000
- id选择器：100
- 类选择器：10
- 标签&伪元素：1
- *、+、>：0

五、用css画一个三角形

用border画

css 复制代码

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;
}

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

方法一

css 复制代码

.container{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
.main{
    background:red;
}

方法二

css 复制代码

.container{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
.main{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
    background:red;
}

方法三

css 复制代码

.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

css 复制代码

ul{
    list-style:none;
    border:10px solid #ccc;
    overflow:hidden;
}
ul li{
    float:left;
    width:100px;
    height:100px;
    background:red
}

after方式

css 复制代码

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区别

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

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

xml 复制代码

<!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>

xml 复制代码

<!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：仅触发重绘，元素仍保留占位空间
- 产生重排：改变元素的位置
- 产生重绘：改变样式

十四、opacity和rgba的区别

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

十五、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: 0`	`flex: 0 1 0%`	不放大，允许收缩，初始尺寸为容器的 0%
`flex: 1`	`flex: 1 1 0%`	可放大（占剩余空间），允许收缩
`flex: none`	`flex: 0 0 auto`	不放大、不收缩，尺寸由内容决定（固定尺寸）
`flex: auto`	`flex: 1 1 auto`	可放大、可收缩，初始尺寸由内容决定

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

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

全局样式冲突 ：传统 CSS 是 "全局作用域"，不同组件 / 文件中的相同类名（如 .box）会相互覆盖，尤其在大型项目中（多人协作、组件复用），冲突问题严重。
样式污染：某组件的样式可能意外影响其他组件（如全局样式泄漏到局部）。
类名命名困难 ：为避免冲突，传统 CSS 需写冗长的类名（如 .header-nav-item），CSS Modules 可简化命名（直接用 .item）。

配置 Webpack，启用 CSS Modules： // webpack.config.js module.exports = { module: { rules: [ { test: /.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, // 启用 CSS Modules }, }, ], }, ], }, };

在组件中使用：

css 复制代码

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

javascript 复制代码

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

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