面试官：问几个简单的CSS吧

什么是盒模型？

可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。 默认width只是内容宽度，不是整体大小。 W3C 标准盒模型：box-sizing: content-box 内容的宽高度不包含 border 和 padding

属性 width, height 只包含内容 content ，不包含 border 和 padding。 width = 内容的宽度 height = 内容的高度

实际占用空间大于设定的宽高。 IE 盒模型：box-sizing: border-box 内容的宽高度包含 border 和 padding

属性 width, height 包含 border 和 padding，指的是 content+padding+border。 width = border + padding + 内容的宽度 height = border + padding + 内容的高度

这种模式的优势在于：

可以确切知道每个元素会占据多少空间，特别适合做栅格系统、卡片布局等需要精确控制尺寸的场景。

使用技巧

如果不想让 padding 或 margin 改变盒模型定义的宽高，则使用 border-box 尽量使用标准的W3C模型(需在页面中声明 DOCTYPE 类型)，这样可以避免多个浏览器对同一页面的不兼容

若不声明 DOCTYPE 类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox 等会将其解释为 W3C 盒子模型； 若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模型。

css有哪些选择器？以及优先级？ 层叠（Cascading）是CSS的一个核心机制，它决定了当多个样式规则应用到同一个元素时，哪些规则会生效，以及生效的顺序。 常见的 css 选择器

• 元素选择器（Element Selector）：选择指定元素类型的所有元素（p）
• 类选择器（Class Selector）：选择具有指定类名的元素，使用"."符号表示（.class）
• ID选择器（ID Selector）：选择具有指定id的唯一元素，使用"#"符号表示（#myId）
• 属性选择器（Attribute Selector）：选择具有指定属性或属性值的元素（[type="text"]）
• 后代选择器（Descendant Selector）：选择指定元素的后代元素，使用空格分隔，例如div p选择所有div元素内部的p元素。
• 直接子元素选择器（Child Selector）：选择指定元素的直接子元素，使用">"符号表示，例如div > p选择所有div元素的直接子元素p。
• 伪类选择器（Pseudo-class Selector）：选择具有特定状态或行为的元素，例如:hover选择鼠标悬停的元素。
• 伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，例如::before选择元素的前面插入内容。

选择器优先级和权重列表

注意点：

• CSS 选择器的特殊性（Specificity，权重） 遵循位权计算规则，存在层级壁垒，低层级选择器的数量无论堆叠多少，都永远无法跨越层级超过高层级选择器，这是和普通「数字加法」最本质的区别。
• 高位权重只要有值，低位权重堆到无穷大也无法超越。
• 同权重时，「后声明」覆盖「先声明」
• 继承的样式权重为 0， 会被子元素自身的任意选择器覆盖

重绘与回流的区别？ 重绘（Repaint）和回流（Reflow）是与浏览器渲染引擎相关的概念，它们可以影响网页的性能。 回流 先画「骨架」—— 确定每个元素的位置、大小、间距（比如盒子的宽高、top/left、margin）； 如果骨架变了（如盒子宽度变化），就需要重新计算所有相关元素的位置和尺寸，这个过程就是回流。 常见操作：（只要改变元素的几何属性，就会触发回流）

• 修改元素尺寸、位置、字体、文本
• 增减 / 修改 DOM 节点
• 修改浏览器窗口
• 读取某些布局属性：offsetWidth/offsetHeight/clientWidth/getComputedStyle()（浏览器为了获取准确值，会强制触发回流）。
• 使用 JavaScript 计算样式或布局。

重绘 骨架不变，只改「外观」—— 比如改颜色、背景、阴影、透明度。 只需要在原有骨架上重新上色，不用动结构，这个过程就是重绘。 常见操作：只改视觉样式，不碰布局，仅触发重绘

修改颜色、阴影、透明度、背景图、光标等

性能优化：减少不必要的回流/重绘 批量修改，减少多次回流

合并样式修改

`const box = document.getElementById('box');

// 每改一个样式，触发一次回流 box.style.width = '200px'; box.style.height = '100px';

// 合并style属性 或 添加类名 box.style.cssText = 'width:200px; height:100px; margin:20px;'; // CSS：.box-new { width:200px; height:100px; margin:20px; } box.classList.add('box-new');`

2. 先「离线」修改 DOM，再「上线」 把元素从 DOM 树中移除，修改完成后再加回去（仅触发 2 次回流：移除 + 添加） const ul = document.getElementById('list'); // 1. 离线：移除DOM ul.style.display = 'none'; // 2. 批量修改（无回流） for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = Item ${i}`; ul.appendChild(li); } // 3. 上线：重新显示 ul.style.display = 'block';

避免频繁读取「触发回流的属性」 如下例所示：每次读 offsetWidth 都触发回流，共 100 次，如果先缓存属性值，则仅触发一次； ini 体验AI代码助手 代码解读复制代码const box = document.getElementById('box'); let width = 0; for (let i = 0; i < 100; i++) { width = box.offsetWidth; // 每次读取都强制回流 box.style.left = ${width + i}px; }

// 先读取一次，缓存值 const baseWidth = box.offsetWidth; let width = baseWidth; for (let i = 0; i < 100; i++) { width = baseWidth + i; // 用缓存值计算，不触发回流 ... }

利用「文档碎片（DocumentFragment）」批量添加 DOM 文档碎片是「虚拟 DOM 容器」，修改碎片内的元素不会触发页面回流，最后一次性添加到页面： ini 体验AI代码助手 代码解读复制代码// 创建文档碎片（离线容器） const fragment = document.createDocumentFragment(); // 批量添加元素到碎片（无回流） for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = Item ${i}; fragment.appendChild(li); } // 一次性添加到页面（仅1次回流） document.getElementById('list').appendChild(fragment);`

使用 CSS3 硬件加速，减少回流 / 重绘 给元素添加transform/opacity（现代浏览器）等属性时，浏览器会将元素放到「GPU 层」渲染，避免触发全局回流： `.box { position: absolute; top: 10px; /* 改top会触发回流 */ }

.box { transform: translateY(10px); /* 硬件加速，无回流 */ }`

核心区别：

回流是「布局重新计算」（耗性能），重绘是「外观重新渲染」（低消耗） 回流必触发重绘，重绘不触发回流；

水平垂直居中的方式有哪些？ position: absolute + transform: translate

传统方式，基于定位，这类方法兼容性最好，适用于所有现代浏览器和一些旧版浏览器。 这是最常用、最灵活的方法之一，不需要知道元素的具体宽高。

`.parent { position: relative; width: 400px; height: 300px; border: 1px solid #ccc; }

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

width: 150px; /* 子元素的宽高可以是固定的，也可以是自适应的 */ height: 100px; background-color: lightblue; }`

position: absolute + 负 margin

一种经典方法，但是需要知道子元素的固定宽高 兼容性极佳，元素脱离文档流。

.child { position: absolute; top: 50%; left: 50%; width: 150px; height: 100px; margin-top: -50px; /* -height / 2 */ margin-left: -75px; /* -width / 2 */ background-color: lightcoral; }

Flexbox 布局 (现代方法)

现代 css 布局的首选方案，简单直观 元素不脱离文档流，无需知道子元素宽高，还能处理更复杂的对齐和发布需求

.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 400px; height: 300px; border: 1px solid #ccc; }

Grid 布局 (更现代的方法) Grid 布局是二维布局系统，同样可以非常简单地实现居中。

元素不脱离文档流，代码更加简洁强大。 但兼容性没那么高，不支持 IE10 及以下版本。

`.parent { display: grid; place-items: center; /* 水平垂直居中，是 align-items 和 justify-items 的简写 */ width: 400px; height: 300px; border: 1px solid #ccc; }

.child { width: 150px; height: 100px; background-color: lightsalmon; } ` 其他 只作为拓展思路

margin: auto; table: text-align + vertical-align

——转载自：Sport