CSS 入门全解析

CSS 入门全解析：从选择器到布局的全面教学

• [一、CSS 是什么？](#一、CSS 是什么？)
• [二、CSS 的基本语法结构](#二、CSS 的基本语法结构)
• 三、常见选择器讲解
• 四、盒模型讲解（重点）
• 五、字体与颜色样式
• 六、布局方式
• • [6.1 浮动布局（了解）](#6.1 浮动布局（了解）)
  • [6.2 Flex 弹性布局（推荐）](#6.2 Flex 弹性布局（推荐）)
  • [6.3 Grid 网格布局（进阶）](#6.3 Grid 网格布局（进阶）)
• 七、过渡与动画
• • [7.1 过渡 transition](#7.1 过渡 transition)
  • [7.2 动画 animation](#7.2 动画 animation)
• 八、实战示例：卡片组件样式
• [九、常见问题 Q&A](#九、常见问题 Q&A)
• • [Q: 为什么设置宽度了还不生效？](#Q: 为什么设置宽度了还不生效？)
  • [Q: `px` 和 `rem` 有啥区别？](#Q: px 和 rem 有啥区别？)
  • [Q: CSS 怎么引入？](#Q: CSS 怎么引入？)

一、CSS 是什么？

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

它能定义：

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

---

二、CSS 的基本语法结构

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

✅ 例如：

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

含义是：把所有 <p> 段落标签的字体颜色设置为红色，字体大小为 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:

• 内联样式：<div style="color:red">
• 内部样式：放在 <style> 标签中
• 外部样式：通过 <link rel="stylesheet" href="style.css"> 引入

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～

创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒：

转载请注明原文链接，商业合作请私信联系

感谢你的阅读！我们下篇文章再见～ 💕