一、CSS盒模型
-
CSS盒模型组成 包含内容区域（Content）、内边距（Padding）、边框（Border）、外边距（Margin）。
-
Border-box vs Content-box
border-box：宽高包含内容、内边距、边框（IE传统模型）。content-box：宽高仅指内容区域（W3C标准模型）。
-
W3C标准盒模型 内容 → 内边距 → 边框 → 外边距。
-
盒模型计算方式
- 宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右边距
- 高度 = 内容高度 + 上下内边距 + 上下边框 + 上下边距
box-sizing属性
content-box（默认）：按标准模型计算。border-box：宽高包含内边距和边框。inherit：继承父元素值。
二、CSS选择器与优先级
- CSS选择器类型
- 类型选择器（
h1）、类选择器（.class）、ID选择器（#id）、属性选择器（[type="text"]）、伪类（:hover）、伪元素（::before）、后代选择器（div p）、兄弟选择器（h1 + p）等。
-
优先级规则 权重从高到低：
!important> ID选择器 > 类/属性/伪类 > 元素选择器 > 通配符*。 -
CSS3新增伪类
- 结构伪类：
:nth-child(),:first-of-type() - 状态伪类：
:disabled,:checked - 否定伪类：
:not() - 示例：
button:hover { background-color: red; }
三、布局与定位
- 元素居中方法
- Flexbox：
justify-content: center; align-items: center; - Grid：
place-items: center; - 定位法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 表格布局：
display: table-cell; text-align: center; vertical-align: middle;
- Flex布局
- 原理：基于弹性盒子模型，自动调整子元素排列和对齐。
- 属性：
flex-direction,justify-content,align-items,flex-wrap。 - 场景：响应式布局、导航栏、多列布局。
- Grid布局
- 特点：二维网格布局，精确控制行列。
- 应用场景：复杂表格、瀑布流布局、响应式设计。
- 圣杯布局实现
- 使用Flexbox：
.container { display: flex; } .left { flex: 1; } .right { flex: 2; } - 双飞翼布局：通过负外边距和辅助列实现。
position属性
relative：相对于自身位置偏移。absolute：相对于最近的非static祖先元素。fixed：相对于视口固定。
- 浮动与清除浮动
- 方法：
clear: both;、overflow: auto;、::after { content: ""; clear: both; }。
- BFC触发条件
float不为noneposition为absolute/fixeddisplay为table-cell/table-captionoverflow不为visible
display属性值
inline：行内元素block：块级元素inline-block：兼具行内和块级特性
- 行内与块级元素差异
- 行内元素：不独占一行，无法设置宽高。
- 块级元素：独占一行，可设置宽高。
四、动画与过渡
- CSS动画 vs 过渡
- 动画（
@animation）：定义复杂的时间轴控制多个属性变化。 - 过渡（
@transition）：针对单个或多个属性的变化效果。
animation/transition/transform区别
animation：完整的动画序列控制。transition：单一事件触发的过渡效果。transform：仅影响元素的位置和形状（不影响布局）。
-
简单动画示例
css@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } .box { animation: move 2s linear; }
五、样式与兼容性
- 浏览器兼容性策略
- 前缀法：
-webkit-border-radius - Polyfills：引入库（如
react-app-polyfill） - 特性检测：Modernizr
- CSS Hack类型
- 条件Hack：
<!--[if IE]> - 属性Hack：
input{voice-family:+"\x01";} - 选择符Hack：
*html {}
- IE低版本的
hasLayout问题
- 触发条件：设置
zoom: 1或height: 1%强制触发布局。
- 重置CSS原因及方法
- 原因：消除浏览器默认样式差异。
- 方法：
* { margin: 0; padding: 0; box-sizing: border-box; }
display: nonevsvisibility: hidden
none：元素完全不可见且不占位。hidden：元素不可见但仍占位。
- 渐进增强 vs 优雅降级
- 渐进增强：优先基础功能，逐步添加高级特性。
- 优雅降级：先实现完整功能，再兼容旧浏览器。
-
Chrome显示小字
css.small-text { -webkit-font-smoothing: antialiased; font-size: 12px; /* 需设置实际最小值 */ }
六、移动端与适配
- 移动端适配方法
- 视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 媒体查询：
@media (max-width: 768px) { ... } - REM单位：基于根字体大小动态调整。
- 响应式设计实现
- 使用相对单位（rem/em）、流式布局、弹性盒子/Flexbox/Grid。
七、其他CSS特性
-
CSS变量使用
css:root { --primary-color: #blue; } .button { background-color: var(--primary-color); } -
CSS3新增属性
transform（旋转、缩放）animation（动画控制）opacity（透明度）perspective（透视效果）
-
三角形创建
css.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } -
CSS Sprites原理 将多个图片合并为一张图，通过
background-position切换显示区域。 -
@import缺陷
- 加载顺序慢，影响首屏性能。
- 不支持媒体查询。
- CSS属性简写规则
padding: 10px 20px 30px 40px（上右下左）margin: auto（自动居中）
- 可继承属性
color,font-family,font-size,line-height,text-align等。
margin与padding使用场景
margin：控制元素与外部的间距。padding：控制元素内容与边框的间距。
pxvsem
px：绝对单位，固定尺寸。em：相对单位，基于父元素字体大小。
- 图片导出格式选择
- PNG-8：透明背景小图
- PNG-24/32：高质量图片
- JPG：压缩率高的照片类图片
- 浏览器内核类型
- Trident（IE）
- Gecko（Firefox）
- WebKit（Chrome/Safari）
- Blink（Chrome 58+）
八、性能与渲染
- 重绘（Repaint）与回流（Reflow）
- 重绘：仅更新元素样式（不影响布局）。
- 回流：元素位置或尺寸变化，触发重新布局。
- 优化：避免频繁修改布局属性（如
width），使用transform替代left/top。
- Div+CSS布局优势
- 结构清晰，易于维护。
- 支持响应式设计。
- 提升搜索引擎SEO友好性。