CSS和CSS3区别对比
CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：
一、核心概念与版本关系
-
CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。
-
CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如Flexbox、Grid、动画等），增强了样式控制能力与开发效率。
二、功能与特性对比
| 对比维度 | CSS | CSS3 |
|---|---|---|
| 选择器 | 基础选择器（元素、类、ID） | 新增属性选择器、伪类（:nth-child、:valid）、伪元素（::before、::after）及通用兄弟选择器（~） |
| 盒模型 | 仅支持content-box（宽度不含内边距和边框） | 新增box-sizing: border-box，允许宽度包含内边距和边框，简化布局计算 |
| 布局 | 传统流布局（依赖float、clear） | 引入弹性盒模型（Flexbox）和网格布局（Grid），实现二维灵活布局与响应式设计 |
| 视觉效果 | 基础边框、背景色 | 支持渐变（linear-gradient）、圆角（border-radius）、阴影（box-shadow）、多背景（background-image多重定义） |
| 动画与交互 | 无原生动画支持 | 新增过渡（transition）、动画（animation+@keyframes）、变换（transform） |
| 响应式设计 | 需手动调整或依赖JavaScript | 支持媒体查询（@media）、视口单位（vw, vh），直接适配不同设备 |
| 颜色与字体 | 基础颜色（命名、十六进制）、有限字体 | 支持透明度（rgba、hsla）、自定义字体（@font-face） |
| 其他特性 | 无模块化设计 | 模块化拆分（如Flexbox、Grid独立规范），支持CSS变量、多列布局（column-count）等 |
三、性能与兼容性
-
性能：CSS3通过硬件加速（如动画、变换）提升了渲染效率，减少了对JavaScript的依赖。
-
兼容性：CSS3特性需浏览器支持，早期需添加前缀（如
-webkit-、-moz-），但现代浏览器已普遍支持。
四、实际应用差异
-
代码示例：
- CSS：传统圆角需图片或JavaScript，布局依赖
float。.box {width: 200px;padding: 10px;border: 5px solid #000;/* 传统布局 */float: left; } - CSS3：直接使用圆角、阴影，布局用Flexbox。
.box {width: 200px;padding: 10px;border-radius: 10px;box-shadow: 2px 2px 5px rgba(0,0,0,0.3);/* Flex布局 */display: flex;justify-content: center; }
- CSS：传统圆角需图片或JavaScript，布局依赖
-
维护性：CSS3的模块化设计使得样式更易管理，支持渐进增强（旧浏览器降级显示，新浏览器启用新特性）。
五、总结
-
CSS：是样式表的基础，适用于简单页面的样式控制。
-
CSS3：在CSS基础上大幅增加了布局、动画、交互等能力，是现代网页设计的标配，但需注意浏览器兼容性。
两者本质是继承关系，CSS3并非完全颠覆CSS，而是扩展其功能并提升开发效率。