CSS基础与进阶

简介

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。通过CSS，我们可以将网页的内容（HTML）与表现（样式）分离，使网页更加美观和易于维护。掌握CSS是前端开发的重要技能之一。

选择器
- 元素选择器: 直接选择HTML元素，如 p { color: red; }
- 类选择器: 选择具有特定class属性的元素，如 .highlight { background: yellow; }
- ID选择器: 选择具有特定id属性的元素，如 #header { height: 100px; }
- 属性选择器: 根据属性选择元素，如 input[type="text"] { width: 200px; }
盒模型
- Content: 元素的实际内容
- Padding: 内边距，内容与边框之间的空间
- Border: 边框，围绕内容和内边距
- Margin: 外边距，元素与其他元素之间的空间
- box-sizing属性控制盒模型的计算方式
布局方式
- Normal Flow: 正常文档流
- Float: 浮动布局
- Position: 定位布局（relative、absolute、fixed）
- Flexbox: 弹性布局
- Grid: 网格布局

选择器增强
- 伪类选择器: :nth-child()、:not() 等
- 属性选择器增强: [attr^=value]、[attr$=value] 等
- 兄弟选择器: + 和 ~
视觉效果
- 阴影效果: text-shadow 和 box-shadow
- 圆角边框: border-radius
- 渐变背景: linear-gradient 和 radial-gradient
- 透明度: opacity 和 rgba()
动画和过渡
- Transition: 属性变化时的过渡效果
- Animation: 关键帧动画
- Transform: 元素的变形（旋转、缩放、倾斜等）