css

1. CSS盒模型

CSS盒模型是网页布局的基础概念，描述了每个元素在页面中所占空间的计算方式。

• 标准盒模型：width 和 height 只包含内容区域，不包括 padding、border 和 margin
• IE盒模型：width 和 height 包含内容、padding 和 border，但不包括 margin
• 可通过 box-sizing 属性切换：
  • content-box（标准盒模型）
  • border-box（IE盒模型）

2. CSS选择器优先级

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

1. !important（最高优先级，应谨慎使用）
2. 内联样式（style属性）- 权重1000
3. ID选择器 - 权重100
4. 类选择器、属性选择器、伪类 - 权重10
5. 元素选择器、伪元素 - 权重1
6. 通配符选择器 - 权重0

相同优先级时，后定义的样式会覆盖先定义的。

3. 隐藏元素的方法

常用的隐藏元素方法包括：

• display: none - 元素不渲染，不占据空间
• visibility: hidden - 元素不可见，但仍占据空间
• opacity: 0 - 元素透明，仍占据空间且可交互
• position: absolute; left: -9999px - 将元素移出可视区域
• clip-path: polygon(0 0, 0 0, 0 0, 0 0) - 裁剪元素使其不可见
• transform: scale(0) - 缩放为0

4. px和rem的区别

• px（像素）：
  • 绝对单位，固定大小
  • 不会根据用户设置或设备尺寸自动调整
• rem（根元素的字体大小）：
  • 相对单位，相对于HTML根元素的字体大小
  • 1rem等于根元素的font-size值
  • 更适合响应式设计，便于统一调整

5. 重绘和重排的区别

• 重排（Reflow）：
  • 重新计算元素的几何属性（位置、大小等）
  • 影响后续元素布局
  • 开销较大
• 重绘（Repaint）：
  • 仅重新绘制元素外观（颜色、背景等）
  • 不影响布局
  • 开销相对较小
• 重排一定会引起重绘，但重绘不一定引起重排

6. 水平垂直居中的方式

常见的居中方法包括：

1. Flexbox：

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

2. Grid：

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

3. 绝对定位 + transform：

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

4. 绝对定位 + margin：

   .element {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: fit-content;
     height: fit-content;
   }
   

7. CSS属性的继承性

• 可继承属性：

  • 文本相关：color、font-family、font-size、line-height等
  • 列表相关：list-style、list-style-type等
  • 表格相关：border-collapse等

• 不可继承属性：

  • 盒模型相关：width、height、margin、padding、border等
  • 定位相关：position、top、left、right、bottom等
  • 背景相关：background、background-color等

8. CSS预处理器

CSS预处理器是增强CSS功能的工具，常见的有：

• Sass/SCSS：

  • 支持变量、嵌套、混合（mixin）、函数等
  • 提供更强大的编程能力

• Less：

  • 类似Sass，语法更接近原生CSS
  • 支持变量、嵌套、混合等

• Stylus：

  • 更加灵活的语法
  • 支持省略大括号和分号

预处理器的优势：

• 提高代码复用性和可维护性
• 支持模块化开发
• 提供编程特性（变量、函数等）
• 减少重复代码