网页制作css复习
CSS 复习要点
基础语法与选择器
CSS 规则由选择器和声明块组成，声明块包含属性和值。常见选择器包括元素选择器（p）、类选择器（.class）、ID选择器（#id）和后代选择器（div p）。伪类（:hover）和伪元素（::before）用于特殊状态或内容。
盒模型
每个元素被视为一个盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。通过box-sizing属性可切换标准模型（content-box）和边框模型（border-box）。
布局技术
浮动（float）用于传统布局，需配合clear清除浮动。Flexbox（display: flex）提供弹性容器与项目对齐方式（justify-content、align-items）。Grid（display: grid）通过行列模板实现复杂布局。
定位
position: static为默认流，relative相对自身偏移，absolute相对最近非static祖先定位，fixed相对视口固定。z-index控制层叠顺序。
响应式设计
媒体查询（@media）根据屏幕尺寸调整样式，如：
@media (max-width: 768px) {
body { font-size: 14px; }
}使用相对单位（%、vw、rem）增强适应性。
动画与过渡
transition平滑属性变化（如transition: all 0.3s ease）。@keyframes定义复杂动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: fadeIn 2s; }常见属性示例
- 文本：
font-family、line-height、text-align - 背景：
background-color、background-image、background-size - 边框：
border-radius、box-shadow
调试技巧
浏览器开发者工具（F12）检查元素样式，实时修改并查看效果。使用border: 1px solid red临时高亮元素辅助布局调试。
性能优化
减少冗余代码，合并相同样式。避免过度使用高开销属性（如box-shadow）。预处理器（Sass/Less）提升代码可维护性。
