CSS 基础：选择器、盒模型与布局入门

入门 · 第 2 篇 ·

CSS 是什么

CSS（Cascading Style Sheets，层叠样式表）负责控制 HTML 元素的视觉呈现——颜色、大小、位置、间距、动画等。如果说 HTML 是骨架，CSS 就是皮肤和衣服。

三种引入方式

/* 1. 内联样式（不推荐大量使用） */
<p style="color: red;">红色文字</p>

/* 2. 内部样式表 */
<style>
  p { color: red; }
</style>

/* 3. 外部样式表（推荐） */
<link rel="stylesheet" href="style.css">

推荐：始终使用外部样式表，将结构（HTML）与样式（CSS）分离，便于维护。

选择器

基础选择器

/* 元素选择器 */
p { color: #333; }

/* 类选择器 */
.highlight { background: yellow; }

/* ID 选择器 */
#header { font-size: 24px; }

/* 通配符选择器（慎用） */
* { margin: 0; padding: 0; }

组合选择器

/* 后代选择器（空格） */
.nav a { color: #fff; }

/* 子选择器（>） */
.nav > a { color: #fff; }

/* 相邻兄弟（+） */
h2 + p { margin-top: 0; }

/* 逗号分组 */
h1, h2, h3 { font-weight: bold; }

伪类选择器

a:hover { color: #0066cc; }
input:focus { outline: 2px solid blue; }
li:first-child { font-weight: bold; }
li:nth-child(even) { background: #f5f5f5; }

盒模型

每个 HTML 元素都是一个矩形盒子，由四层组成：

.box {
  width: 200px;          /* 内容宽度 */
  padding: 20px;         /* 内边距 */
  border: 1px solid #ccc;/* 边框 */
  margin: 10px;          /* 外边距 */
}

关键：默认 box-sizing: content-box，实际占据宽度 = width + padding + border。设置 box-sizing: border-box 后 width 包含 padding 和 border，更符合直觉。

* { box-sizing: border-box; }

常用属性速查

文字与字体

font-size: 16px;        /* 字号 */
font-weight: bold;       /* 粗细 */
line-height: 1.6;        /* 行高 */
text-align: center;      /* 水平对齐 */
color: #333;             /* 文字颜色 */

背景

background-color: #f5f5f5;
background-image: url(bg.jpg);
background-size: cover;
background-position: center;

边框与圆角

border: 1px solid #ddd;
border-radius: 8px;      /* 圆角 */

阴影

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

Flex 布局入门

Flexbox 是一维布局模型，非常适合导航栏、卡片排列等场景：

.container {
  display: flex;
  justify-content: space-between; /* 主轴分布 */
  align-items: center;            /* 交叉轴对齐 */
  gap: 16px;                      /* 项目间距 */
}

.item {
  flex: 1;  /* 等分剩余空间 */
}

实战：写一个简单卡片

<style>
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-width: 320px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: #666; font-size: 0.9rem; }
</style>

<div class="card">
  <h3>卡片标题</h3>
  <p>卡片描述内容。</p>
</div>

小结

本篇介绍了 CSS 的引入方式、选择器体系、盒模型原理和 Flex 布局基础。这些是 CSS 的核心知识，掌握后能应对大部分页面布局需求。

下一篇：CSS 布局实战：Flex 与 Grid 双布局体系