CSS

CSS知识点的结构化总结：

1. 响应式设计

• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 确保移动设备适配和禁止自动缩放

2. 背景设置

body {
  background-image: url("https://cdn.freecodecamp.org/curriculum/css-café/beans.jpg");
}

3. 布局与盒模型

• 使用article元素组织内容
• inline-block布局：

.item p {
  display: inline-block;
  margin: 5px 0;
}
.flavor {
  width: 75%;
}
.price {
  width: 25%;
}

• 处理inline-block元素间隙：在HTML中消除元素间的空格

4. 容器设置

.menu {
  max-width: 500px;
  padding: 20px;
}

5. 字体与排版

body {
  font-family: sans-serif;
}
h1, h2 {
  font-family: Impact, serif;
  font-size: 40px;  /* h1 */
  font-size: 30px;  /* h2 */
}
.established {
  font-style: italic;
}

6. 分隔线样式

hr {
  height: 2px;
  background-color: currentColor;
  border-color: currentColor;
}
.bottom-line {
  margin-top: 25px;
}

7. 链接状态处理

a {
  color: black;
}
a:visited {
  color: gray;
}
a:hover {
  color: brown;
}
a:active {
  color: white;
}

8. 边距调整

h1 {
  margin: 0 0 15px 0;
}

9. 其他重要技巧

• 使用组合选择器：.item p
• 使用伪类选择器（:hover /:visited /:active ）
• 响应式布局的百分比宽度控制
• 通过max-width限制容器最大宽度
• 使用currentColor继承当前颜色值