CSS 入门全解析

一、CSS 是什么？

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的样式与布局。如果说 HTML 构建网页的“骨架”，那 CSS 就是给这具骨架“穿衣服”。

它能定义：

• 字体颜色 / 背景颜色
• 宽高 / 边距 / 内边距
• 布局方式（flex/grid）
• 动画 / 过渡 等动态效果

---

二、CSS 的基本语法结构

选择器 {
  属性名: 属性值;
}

✅ 例如：

p {
  color: red;
  font-size: 16px;
}

含义是：把所有

段落标签的字体颜色设置为红色，字体大小为 16px。

---

三、常见选择器讲解

选择器	含义	示例
元素选择器	选择某个标签	div
类选择器	选择 class	.box
id选择器	选择 id	#header
组合选择器	多个元素	div, p
后代选择器	某元素内的子级	.menu li
属性选择器	根据属性值选择	input[type="text"]

✅ 示例：

/* 所有 class 为 box 的元素 */
.box {
  border: 1px solid #333;
  }

---

四、盒模型讲解（重点）

CSS 中的每个元素都像一个盒子，由以下部分构成：

• content：内容区域
• padding：内边距
• border：边框
• margin：外边距
  可视图示结构：

区域	说明
margin	元素与外部之间的距离
border	元素的边框
padding	内容与边框之间的内边距
content	元素的实际内容区域

✅ 示例：

.box {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px;
}

---

五、字体与颜色样式

h1 {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  font-family: "Arial", sans-serif;
}

常用单位：

• px：像素（绝对单位）
• em / rem：相对单位
• %：相对于父元素的百分比

---

六、布局方式

6.1 浮动布局（了解）

.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

6.2 Flex 弹性布局（推荐）

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

常用属性说明：

• justify-content: 主轴对齐（如 space-between）
• align-items: 交叉轴对齐
• flex-direction: 主轴方向（row/column）

6.3 Grid 网格布局（进阶）

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

---

七、过渡与动画

7.1 过渡 transition

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

7.2 动画 animation

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fade-in 1s ease-in-out;
}

---

八、实战示例：卡片组件样式

<div class="card">
  <h2>标题h2>
  <p>这里是内容区域p>
div>

.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.card:hover {
  transform: scale(1.05);
}

---

九、常见问题 Q&A

Q: 为什么设置宽度了还不生效？

A: 可能是 padding 或 border 撑大了盒子，需设置 box-sizing: border-box;

Q: px 和 rem 有啥区别？

A: rem 是相对根元素（html）的单位，更适合响应式布局。

Q: CSS 怎么引入？

A:

• 内联样式：
• 内部样式：放在