原文链接: https://interview.poetries.top/docs/excellent-docs/2-CSS%E6%A8%A1%E5%9D%97.html

CSS

简版速记

高频考点速查，面试前 5 分钟扫一遍。

  • 盒模型：标准 content-box(width 不含 padding/border) vs 怪异 border-box(width 含 padding/border)；box-sizing 切换。
  • BFC：独立渲染区域。触发：overflow!=visible、float、position:absolute/fixed、display:inline-block/flex/grid、根元素。用途：清浮动、防 margin 重叠、两栏自适应。
  • 层叠上下文：触发于 position+z-index、opacity<1、transform、filter、flex 子项+z-index 等；同一上下文内 z-index 才可比。
  • 居中：不定宽高首选 flex(justify-content+align-items:center)、grid(place-items:center)、绝对定位+transform:translate(-50%,-50%)。
  • 选择器权重：!important > 内联(1000) > id(100) > class/属性/伪类(10) > 标签/伪元素(1) > 通配符(0)；同级后写覆盖先写。解析方向从右向左。
  • 清浮动：父级 overflow:hidden 触发 BFC，或 .clearfix::after{content:'';display:block;clear:both}(推荐)。
  • link vs @import：link 并行加载、可 JS 动态插入、功能多；@import 串行、阻塞、需 IE5+。
  • 单位：px绝对；em相对父字号；rem相对根字号；vw/vh视口 1%；vmin/vmax取较小/较大。
  • flex:1 = flex-grow:1 flex-shrink:1 flex-basis:0%；flex:auto=1 1 auto；flex:none=0 0 auto。
  • 回流 vs 重绘：回流(改几何:位置/尺寸/增删节点/读 offset 等)必触发重绘；重绘(改颜色等非几何)不一定回流。优化：批量改 class、transform/opacity 走合成层、读写分离、documentFragment。
  • 隐藏元素：display:none(脱流不交互)、visibility:hidden(占位不交互)、opacity:0(占位可交互)。
  • GPU 加速：transform、opacity、filter、will-change；注意层爆炸。
  • 省略号：单行 overflow:hidden;white-space:nowrap;text-overflow:ellipsis；多行 -webkit-line-clamp + display:-webkit-box + -webkit-box-orient:vertical。
  • 预处理器：Sass/Less/Stylus —— 变量($/@/=)、嵌套、mixin、作用域、模块化。
  • 三栏自适应：float+margin、float+calc、圣杯、双飞翼、flex、grid。
  • fixed 失效：祖先元素设了 transform/filter/perspective(非 none) 时，fixed 相对该祖先而非视口。

CSS CHEAT SHEET

目录

Last Updated:
Contributors: leeguooooo