网页制作css复习
CSS 复习要点
基础语法与选择器
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成，声明块包含属性和值。
选择器 {
属性: 值;
}常用选择器包括：
- 元素选择器：
p { color: red; } - 类选择器：
.classname { font-size: 16px; } - ID选择器：
#idname { background: blue; } - 后代选择器：
div p { margin: 10px; } - 伪类选择器：
a:hover { color: green; }
盒模型
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}盒模型分为标准盒模型和IE盒模型，可通过box-sizing属性切换：
box-sizing: content-box（默认，宽度仅包含内容）box-sizing: border-box（宽度包含内容、内边距和边框）
布局技术
浮动布局：通过float属性实现元素横向排列，需注意清除浮动。
.item {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}Flexbox布局：弹性布局，适合一维布局。
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}Grid布局：网格布局，适合二维布局。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}响应式设计
使用媒体查询（Media Queries）适配不同设备屏幕。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}动画与过渡
过渡（Transition）：平滑改变属性值。
.button {
transition: background 0.3s ease;
}
.button:hover {
background: #ff0000;
}动画（Animation）：通过关键帧定义复杂动画。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}常见问题与调试
- 样式冲突：使用更具体的选择器或
!important（慎用）。 - 浏览器兼容性：使用前缀如
-webkit-、-moz-。 - 调试工具：浏览器开发者工具（F12）检查元素和样式。
最佳实践
- 使用外部样式表（
<link rel="stylesheet" href="style.css">）。 - 遵循模块化原则，避免全局样式污染。
- 使用CSS预处理器（如Sass/Less）提升开发效率。
通过以上内容系统复习CSS核心概念和技术，可快速掌握网页样式设计的关键点。
