💄 CSS 方向
共 47 道题目
CSS 伪类与伪元素的区别？
伪类（:hover / :nth-child 等）选中元素的某种状态，本质还是选中已有元素；伪元素（::before / ::after）选中元素中的虚拟子元素（不在 DOM 中）。推荐双冒号 :: 表示伪元素，单冒号 : 表示伪类。
说一下 CSS 盒子模型，以及标准情况和 IE 下的区别？
标准盒模型：width 只是内容宽度，总宽度 = margin + border + padding + width。IE 传统盒模型：width 包含 padding + border。用 box-sizing: border-box 可切换到 IE 模式，实战中一般全局设置 * { box-sizing: border-box; }。
rem、em、px 的区别？
px 是绝对像素，简单直观但不随根字号变化。em 相对当前/父元素字体大小，会级联放大。rem 相对 html 根元素字体大小，全局统一、方便做响应式。常见套路：html { font-size: 62.5%; } → 1rem = 10px。
BFC 是什么？触发条件和应用场景？
BFC = 块级格式化上下文，一个独立布局环境。触发方式：float、position: absolute/fixed、display: inline-block/flow-root、overflow 非 visible。用途：清除浮动、阻止外边距折叠、两栏自适应布局。
两栏 / 三栏布局有哪些常见写法？
Float：左右 float，中间不浮动。Flex：display: flex，中间 flex: 1。Grid：grid-template-columns: 200px 1fr 200px。面试让说三种就答：float + flex + grid。
什么情况会出现浏览器分层？
GPU 合成层可提高动画和绘制性能。触发条件：transform、opacity、will-change、position: fixed、video、canvas 等。好处是独立合成减少重绘，坏处是层数太多会增加内存占用和合成开销。
通过 <link> 引入 CSS 会阻塞页面渲染吗？JS 会吗？如何优化？
CSS 会阻塞首次渲染（浏览器要等 CSS 才能计算布局）；JS 默认同步脚本会阻塞 HTML 解析和渲染。优化 CSS：拆分关键 CSS、media 属性、Critical CSS 内联。优化 JS：defer/async、放底部、按需加载。
移动端 1px 问题怎么解决？
高分屏上 1px 会被设备像素比放大，看起来比设计稿粗。解决方法：transform: scaleY(0.5) 缩放伪元素边框、border: 0.5px（部分浏览器支持）、linear-gradient 或 box-shadow 模拟。
说一下 position 定位的几种方式和区别？
static：默认，按正常文档流。relative：相对自身原位置偏移，仍占空间。absolute：相对最近非 static 祖先定位，脱离文档流。fixed：相对视口定位，脱离文档流。sticky：在一定范围内跟随滚动，达到阈值后粘住。
iPhone Safari 中 fixed 底部输入框 + 软键盘问题？如何解决？
问题：软键盘弹出时 viewport 高度变化，fixed 元素位置错乱或被遮挡。方案：避免输入框使用 fixed，改用 absolute + JS 监听 focus/blur 调整位置；用外层容器 + padding-bottom；使用 visualViewport API。
CSS 预处理器（Less/Sass）有什么好处？
变量、嵌套、混入（mixin）、函数等让 CSS 更接近编程语言。可拆分模块按需 import，提高可维护性。通过编译输出兼容性 CSS。总结：组织大项目样式更舒服。
CSS 选择器的优先级如何计算？
行内 > ID > class/伪类/属性选择器 > 标签/伪元素 > 通配符。数字模型：inline(1,0,0,0)、id(0,1,0,0)、class(0,0,1,0)、标签(0,0,0,1)。同级比较，大的胜出；相同则后写的覆盖。
布局都有些什么？float 和 position 有什么区别？
布局手段：float、position、flex、grid、table、多列。float 本用于文字环绕，元素脱离常规流但仍占浮动流，需清除浮动。absolute/fixed 完全脱离文档流不占空间；relative 不脱离。
nth-child 和 nth-of-type 的区别？
:nth-child(n) 按所有子节点的顺序选，第 n 个子元素不管类型。:nth-of-type(n) 按同类型标签的顺序选，如第 n 个 li。中间混有其他标签时，nth-child 序号会被打乱。
<img> 是什么元素？
img 是替换元素（replaced element），默认是 inline-level。浏览器根据其自身内容决定尺寸，可以设置 width/height。参与基线对齐等行内排版。
Flex 布局中把几个元素分别放开怎么实现？
典型写法：justify-content: space-between 两端对齐中间平均分布。或第一个 margin-right: auto，最后一个 margin-left: auto，中间元素自然被撑开。
不知道高度的 div 怎么垂直居中？
Flex：display: flex; align-items: center;（配合 justify-content: center 可水平+垂直）。Grid：display: grid; place-items: center;。定位+transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。
Grid 布局有了解吗？
核心：二维网格布局，把页面划成行和列。常用属性：display: grid、grid-template-rows/columns、grid-template-areas、gap。应用：复杂后台布局、看板、表单布局、响应式卡片网格。
实现左右 100px 固定，中间自适应的三列布局？（至少三种）
Flex：左右 width:100px，中间 flex:1。Grid：grid-template-columns:100px 1fr 100px。Float+BFC：左右 float，中间 margin:0 100px。
Footer 固定在底部有哪些写法？
视口固定（永远吸底）：position:fixed; bottom:0。内容不足时吸底、溢出时跟随：min-height:100vh; display:flex; flex-direction:column; main 设 flex:1，footer 自然贴底。
CSS 画三角形的原理？
利用 border 特性：元素宽高为 0，设置四边边框，只保留一边有颜色其他透明，就形成三角形。
CSS 画扇形怎么做？
方法一：圆角 + border，正方形 border-radius:50%，只保留一侧 border 其他透明。方法二：conic-gradient 画饼图，配合 clip-path 或旋转控制扇形。
哪些 CSS 属性会继承？不继承的有哪些？
典型继承：font-*、color、text-align、line-height、visibility、list-style 等。不继承：margin、padding、border、width/height、position、display 等。可用 inherit/initial/unset/revert 控制。
CSS 动画与 JS 动画的性能区别？
CSS 动画浏览器可优化，尤其只改 transform/opacity 时可 GPU 合成，性能好。JS 动画灵活但频繁改 top/left/width 会触发布局重绘。简单动画用 CSS，复杂时间线用 JS + requestAnimationFrame。
移动端适配 1px、使用 transform 居中、left/top 动画 vs transform 动画？
1px 见第 8 题。为什么用 transform 居中/做动画：transform 不触发布局，只影响合成层，性能更好。margin-left/top 会参与布局计算，频繁修改更卡。
清除浮动有哪些方式？
给父元素 overflow:auto/hidden（触发 BFC）；在最后加空元素 clear:both；使用伪元素 .clearfix::after { content:''; display:block; clear:both; }。
上下固定，中间滚动布局如何实现？
header 和 footer 固定高度，中间区域 overflow:auto。Flex 写法：wrap 设 min-height:100vh、display:flex、flex-direction:column，header/footer 设 flex:0 0 auto，main 设 flex:1 1 auto、overflow:auto。
如何实现高度自适应？
利用 flex:1、height:100%、min-height:100vh 等让元素随容器增长。文本框自适应高度：textarea 配合 JS 监听 input 动态设置 style.height='auto'; height=this.scrollHeight+'px';。
CSS 重绘（Repaint）和回流（Reflow）的区别？
回流：布局变化，重新计算几何信息（更贵）。重绘：只外观变化（颜色、阴影）不改布局，仅重新填充像素。优化：尽量只改 transform/opacity，减少 DOM 测量、批量修改样式。
CSS 单位有哪些？
绝对：px、cm、mm、in。相对字体：em、rem。相对视口：vw、vh、vmin、vmax。其他：%、ch、ex。实战高频：px + rem + vw/vh + %。
多列等高布局怎么实现？
Flex：align-items:stretch，每列不同高度但背景看起来等高。Grid：列自动等高。老方案：用 display:table / table-cell。
CSS 如何实现动画？
过渡：transition: property duration timing-function delay。关键帧动画：@keyframes fade { from{opacity:0;} to{opacity:1;} } .box{ animation: fade 0.5s ease-out forwards; }。
如何用 CSS 画一个半圆？
宽度 100px、高度 50px、background: red、border-radius: 100px 100px 0 0（上半圆）。利用宽高比 + border-radius 组合。
行内元素和块级元素有什么区别？
块级：独占一行、可设置宽高、默认 width:100%（如 div/p/h1）。行内：不换行、宽高由内容决定，不能直接设置 width/height（如 span/a）。display:inline-block 兼具两者特点。
flex: 1 / flex: 1 1 auto / flex: 0 0 auto 分别什么意思？
flex: grow shrink basis。flex:1 等价 flex:1 1 0：能增长能收缩，初始宽度 0。flex:0 0 auto：不增不缩，宽度由内容或 width 决定。常用：中间自适应用 flex:1。
<link> 和 @import 区别？
<link> 是 HTML 标签，可并行加载，优先级高。@import 在 CSS 内再引入 CSS，会串行加载，性能更差，旧浏览器支持也一般。建议：生产环境尽量用 <link>。
只给 li 之间加右边框，最后一个不加怎么写？
li:not(:last-child) { border-right: 1px solid #eee; }。或者 li + li { border-left: 1px solid #eee; }。
常见 CSS 布局方式有哪些？
普通流 + display:block/inline/inline-block。float 布局。position 定位布局。Flex 布局。Grid 布局。多列（column-*）、表格布局等。
流式布局一般怎么做？
宽度用百分比/vw，随着屏幕变化自动伸缩。搭配 max-width/min-width 控制极端情况。再配合媒体查询 @media 做断点优化。
CSS 实现一个弹窗（Modal）的大致思路？
遮罩层：position:fixed; inset:0; background:rgba(0,0,0,0.45)。弹窗主体：position:absolute 或 Flex 居中，设置背景、圆角、阴影。关闭按钮：右上角 position:absolute。动画：opacity + transform(scale/translateY) 做淡入缩放。
说说 PNG8 / PNG24 / PNG32 的区别？PNG 压缩原理？
PNG8：最多 256 色（调色板），体积小。PNG24：真彩色 RGB（8×3bit），无透明。PNG32：PNG24 + 8bit Alpha 通道，支持半透明。压缩：先做滤波（预测+存差值），再用 DEFLATE（LZ77 + Huffman）无损压缩。
如何了解最新 CSS 的发展与状态？
文档：MDN、W3C/CSSWG 草案。支持：caniuse 查询兼容性。社区：State of CSS 调查、各浏览器 Dev Blog。实战：开 Demo 仓库试新特性（:has、容器查询、@layer、nesting 等）。
Tailwind CSS 和 PureCSS 各自优势/劣势？如何选择？
Tailwind：原子类多、开发快、可 Tree-shaking；缺点是类名长、语义差。PureCSS：极轻量的基础组件库，上手简单；但组件能力有限。中大型项目+设计体系用 Tailwind；小项目或只要少量样式用 PureCSS。
如何看待 Atomic CSS？
一类一义：每个类只负责一条样式，组合类构建 UI。优点：高度复用、体积小、统一设计 Token。缺点：HTML 类名多，可读性差；团队需要统一约定。结论：规模化团队+统一设计系统时收益最大。
如何看待 CSS-in-JS（含 UnoCSS / vanilla-extract / Styled Components / Emotion）？
优点：组件级作用域、动态样式、类型安全、与构建深度集成。缺点：部分方案有运行时开销；学习调试成本高。编译型（vanilla-extract、UnoCSS）更适合追求性能的生产环境。
写过什么 CSS 相关 CLI？如何提升团队 CSS 性能？
自建 CLI（Node + PostCSS）：统一 px→rem/vw 转换、自动去重合并、移除未使用样式、检查危险写法（过深选择器、!important 滥用）。接入 CI 每次 PR 自动跑，效果量化：CSS 减少 xx%、规范更统一。
最近 CSS 新特性你了解哪些？
选择器：:is/:where/:has/:focus-visible。布局：容器查询 @container、subgrid、aspect-ratio、gap 用于 flex。组织：@layer、原生 nesting、@scope 草案。颜色：lab()/lch()/color(display-p3)、color-mix()。动效：View Transitions、scroll-timeline。面试挑几条真用过的展开讲。