前端八股文 - CSS 篇

1. 盒模型

1.1 标准盒模型 vs IE盒模型

• 标准盒模型（box-sizing: content-box）

  • width/height = 内容区域大小
  • 总宽度 = width + padding + border + margin

• IE盒模型（box-sizing: border-box）

  • width/height = 内容 + padding + border
  • 总宽度 = width + margin

1.2 外边距合并（Margin Collapse）

• 相邻块级元素的垂直外边距会合并
• 解决方案：
  • 只设置单边margin
  • 使用padding代替
  • 创建BFC

2. 选择器与优先级

2.1 选择器类型

• 基础选择器：*、tag、.class、#id
• 组合选择器： （后代）、>（子）、+（相邻兄弟）、~（通用兄弟）
• 属性选择器：[attr]、[attr=value]
• 伪类选择器：:hover、:nth-child()
• 伪元素选择器：::before、::after

2.2 优先级计算

• 内联样式（1000） > ID（100） > 类/伪类/属性（10） > 元素/伪元素（1）
• !important > 内联样式
• 相同优先级：后定义的生效

3. 布局方式

3.1 传统布局

• 文档流：block/inline/inline-block

• 浮动（float）

  • 脱离文档流
  • 需要清除浮动（clearfix）

• 定位（position）

  • static（默认）
  • relative（相对定位）
  • absolute（绝对定位）
  • fixed（固定定位）
  • sticky（粘性定位）

3.2 Flex布局

• 容器属性：

  • display: flex
  • flex-direction（主轴方向）
  • justify-content（主轴对齐）
  • align-items（交叉轴对齐）
  • flex-wrap（换行）

• 项目属性：

  • order（排序）
  • flex-grow（放大比例）
  • flex-shrink（缩小比例）
  • flex-basis（初始大小）
  • align-self（单独对齐）

3.3 Grid布局

• 容器属性：

  • display: grid
  • grid-template-columns/rows（定义行列）
  • gap（间距）
  • justify-items/align-items（单元格对齐）

• 项目属性：

  • grid-column/row（位置）
  • justify-self/align-self（单独对齐）

4. 响应式设计

4.1 媒体查询

@media (max-width: 768px) {/* 移动端样式 */
}

4.2 响应式单位

• vw/vh：视窗宽高百分比
• rem：相对于根元素字体大小
• em：相对于父元素字体大小

4.3 移动端适配方案

• viewport meta标签
• rem + flexible.js
• vw/vh方案

5. 动画与过渡

5.1 transition

.box {transition: property duration timing-function delay;
}

5.2 animation

@keyframes slide {from { transform: translateX(0); }to { transform: translateX(100px); }
}.box {animation: slide 2s ease infinite;
}

5.3 transform

• translate（位移）
• rotate（旋转）
• scale（缩放）
• skew（倾斜）

6. BFC与IFC

6.1 BFC（块级格式化上下文）

• 触发条件：

  • float不为none
  • position为absolute/fixed
  • display为inline-block/table-cell/flex
  • overflow不为visible

• 特性：

  • 内部盒子垂直排列
  • 不会与浮动元素重叠
  • 包含浮动元素
  • 阻止外边距合并

6.2 IFC（行内格式化上下文）

• 触发条件：display为inline/inline-block
• 特性：
  • 水平排列
  • 垂直对齐通过vertical-align控制

7. CSS3新特性

7.1 视觉增强

• border-radius（圆角）
• box-shadow（阴影）
• text-shadow（文字阴影）
• gradient（渐变）
• filter（滤镜）

7.2 变量

:root {--main-color: #06c;
}
.box {color: var(--main-color);
}

8. 性能优化

8.1 减少重绘与回流

• 使用transform代替top/left
• 使用visibility代替display:none
• 避免table布局
• 批量修改DOM

8.2 优化建议

• 避免嵌套过深的选择器
• 压缩CSS文件
• 使用CSS Sprites
• 合理使用GPU加速

9. 常见问题解决方案

9.1 垂直居中

• flex布局：align-items: center
• grid布局：place-items: center
• 绝对定位 + transform
• table-cell + vertical-align

9.2 1px边框问题

• transform scale
• viewport + rem
• border-image

9.3 多行文本省略

.ellipsis {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
}

10. CSS工程化

10.1 预处理器

• Sass/Less/Stylus
• 变量、嵌套、混合、函数等特性

10.2 后处理器

• PostCSS
• Autoprefixer（自动添加前缀）
• CSS Modules（局部作用域）

10.3 CSS-in-JS

• styled-components
• emotion
• 动态样式、主题支持