1. CSS3新增了哪些特性？
CSS3新增了圆角、阴影、渐变、动画、变形、多列布局、弹性盒模型、媒体查询等特性。
一、选择器增强
-
属性选择器
/* 匹配属性值 */ input[type="text"] { ... } a[href^="https"] { ... } /* 以 https 开头的链接 */ a[href$=".pdf"] { ... } /* 以 .pdf 结尾的链接 */ -
伪类选择器
:nth-child(n) { ... } /* 第 n 个子元素 */ :not(.class) { ... } /* 排除某类元素 */ :checked { ... } /* 选中状态的表单元素 */ -
伪元素
::selection { ... } /* 用户选中的文本样式 */ ::placeholder { ... } /* 输入框占位符样式 */
二、视觉效果
-
圆角边框
border-radius: 10px; /* 统一圆角 */ border-radius: 5px 10px; /* 水平/垂直不同圆角 */ -
阴影效果
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* 盒子阴影 */ text-shadow: 1px 1px 2px #000; /* 文字阴影 */ -
渐变背景
background: linear-gradient(to right, red, blue); background: radial-gradient(circle, red, yellow); -
边框图片
border-image: url(border.png) 30 round;
三、动画与过渡
-
过渡效果
transition: all 0.3s ease-in-out; /* 属性变化平滑过渡 */ -
关键帧动画
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } animation: fadeIn 1s forwards;
四、布局革命
-
Flex 弹性布局
.container { display: flex; justify-content: center; /* 主轴对齐 */ align-items: center; /* 交叉轴对齐 */ } -
Grid 网格布局
.container { display: grid; grid-template-columns: 1fr 2fr; /* 列宽比例 */ gap: 10px; /* 间距 */ } -
多列布局
.text-columns { column-count: 3; /* 分 3 列 */ column-gap: 20px; /* 列间距 */ }
五、响应式设计
-
媒体查询（Media Queries）
@media (max-width: 768px) { /* 移动端样式 */ }
六、其他重要特性
-
盒模型控制
box-sizing: border-box; /* 元素宽高包含 padding 和 border */ -
2D/3D 变换
transform: rotate(45deg) translateX(20px); transform: perspective(500px) rotateY(30deg); -
自定义字体
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }
2. 水平垂直居中的方法
-
Flexbox 方案：
.parent { display: flex; justify-content: center; align-items: center; } -
绝对定位 + Transform：
.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } -
Grid 方案：
.parent { display: grid; place-items: center; }
3. 盒模型（Box Model）
- 标准盒模型：
width/height= 内容区域（content）。 - IE 盒模型：
width/height= 内容 + padding + border。 - 切换盒模型：
box-sizing: border-box（IE模型）或content-box（默认标准模型）。
4. BFC（块级格式化上下文）
-
作用：隔离内部元素，避免外边距合并，阻止浮动元素覆盖。
-
触发条件：
float非none；overflow非visible；display: inline-block/table-cell/flex；position: absolute/fixed。
5. 清除浮动的方法
-
设置父元素的高度：在已知子元素高度的情况下，可以在CSS中手动设置父元素的高度
-
空
div清除法（传统方案） ：在浮动元素末尾插入一个空div，通过 CSS 的clear:both属性清除浮动影响。 -
伪元素
::after清除（Clearfix Hack）：利用伪元素::after创建一个匿名元素，然后将其clear属性设置为both，可以达到清除浮动的目的。这是一种更为优雅的方式，不需要额外的HTML标记。.clearfix::after { content: ""; display: block; clear: both; } -
父元素触发 BFC：父元素设置
overflow: auto。
6. CSS 选择器优先级
优先级从高到低：
!important- 内联样式（如
style="..."） - ID 选择器（
#id） - 类/伪类/属性选择器（
.class,:hover,[type="text"]） - 元素/伪元素选择器（
div,::before） - 通配符（
*）
7. Flexbox 常见概念
-
主轴（main axis）与交叉轴（cross axis） ：由
flex-direction决定方向。 -
常用属性：
- 容器：
flex-direction,justify-content,align-items,flex-wrap。 - 子项：
flex-grow,flex-shrink,flex-basis。
- 容器：
8. CSS Grid 布局
-
二维布局：适合复杂网格结构。
-
基础用法：
.container { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
9. 响应式设计
-
媒体查询（Media Queries） ：
@media (max-width: 768px) { /* 移动端样式 */ } -
移动端适配：
<meta name="viewport" content="width=device-width, initial-scale=1.0">运行 HTML
-
单位选择：
rem（基于根字体）、vw/vh（视口比例）。
10. CSS 动画
-
过渡（Transition） ：平滑状态变化。
.box { transition: all 0.3s ease-in; } -
关键帧动画（Keyframes） ：
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }
11. 伪类与伪元素
- 伪类（Pseudo-class） ：定义元素状态，如
:hover,:nth-child(n)。 - 伪元素（Pseudo-element） ：创建虚拟元素，如
::before,::after。
12. CSS 优化策略
- 减少选择器复杂度（如避免嵌套过深）。
- 使用
transform和opacity实现动画（触发 GPU 加速）。 - 压缩 CSS 文件（如 Webpack 插件、PostCSS）。
13. 常见布局方案对比
-
圣杯布局/双飞翼布局：传统三栏布局，中间优先渲染。
-
Flex vs Grid：
- Flex：一维布局，按行或列排列。
- Grid：二维布局，适合复杂网格。
14. CSS 预处理器（Sass/Less）
-
优势：变量、嵌套、Mixin、函数等。
-
示例：
$primary-color: #333; .button { background: $primary-color; &:hover { background: darken($primary-color, 10%); } }
15.高频进阶问题
- z-index 工作原理：依赖定位元素和层叠上下文。
- CSS 变量（Custom Properties） ：
--var-name: value;，通过var(--var-name)使用。 - 移动端 1px 边框问题：使用
transform: scale(0.5)或媒体查询 +viewport缩放。
