布局入门与 CSS

HTML 搭结构，CSS 负责把页面变好看。这一篇讲布局的核心概念和几种最常用的布局方式。

CSS 怎么用

三种引入方式：

<!-- 1. 行内样式：写在标签属性里 -->
<p style="color:red">红色文字</p>

<!-- 2. 内部样式：写在 head 的 style 里 -->
<style>
  p { color: blue; }
</style>

<!-- 3. 外部样式：单独 css 文件 -->
<link rel="stylesheet" href="style.css">

推荐用外部样式，便于维护。

选择器

/* 标签选择器 */
p { color: black; }

/* class 选择器 */
.card { border: 1px solid #ccc; }

/* id 选择器 */
#logo { width: 100px; }

盒模型

每个元素都是一个"盒子"，从内到外：内容 → 内边距(padding) → 边框(border) → 外边距(margin)。

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

两种常用布局

Flex 布局（最常用）

.container {
  display: flex;            /* 弹性布局 */
  justify-content: space-between; /* 水平分布 */
  align-items: center;      /* 垂直居中 */
}

Grid 布局

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 16px;
}

完整小例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .container { display: flex; gap: 16px; }
    .card {
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">卡片一</div>
    <div class="card">卡片二</div>
    <div class="card">卡片三</div>
  </div>
</body>
</html>

浏览器会显示三张并排的卡片。

提示

响应式布局（手机/电脑自适应）主要靠 CSS 的媒体查询 @media，进阶后再学。