1、布局基础：认识UI布局的核心原则，理解盒模型与流式布局

说实话，很多刚入行的同学一上来就追各种炫酷的动画框架，却连最基本的布局都写不稳。我见过太多「看起来还行，一换屏幕就崩」的页面了。今天咱们就把地基打牢——布局的核心原则、盒模型、流式布局，这三样东西搞明白了，后面30章你都会走得很顺。

1.1 布局的核心原则：别让用户「找东西」

UI布局说白了就一件事：让用户一眼看到最重要的东西。我个人习惯把布局原则归纳为三条：

对齐——元素之间要有「隐形线」连着。左对齐、右对齐、居中对齐，选一种就别乱换。我在项目中遇到过，一个表单里有的标签左对齐、有的右对齐，用户填表时眼睛来回扫，效率直接砍半。
间距——亲密的内容挨近点，无关的内容拉远点。你想想看，如果所有按钮都挤在一起，用户点错一个就得骂娘。
层级——重要的东西大一点、颜色深一点、位置靠前一点。不重要的就小一点、灰一点、藏深一点。

核心观点：好的布局不是「好看」，而是「好用」。用户不需要思考就知道下一步该点哪里，这就是布局的终极目标。

1.2 盒模型：每个元素都是一个「盒子」

盒模型是CSS布局的基石。每个HTML元素，本质上就是一个矩形盒子。这个盒子从内到外分四层：

层级	属性	说明
内容区	width / height	真正放文字、图片的地方
内边距	padding	内容与边框之间的「缓冲带」
边框	border	盒子的「皮肤」
外边距	margin	盒子与盒子之间的「社交距离」

嗯，这里要注意一个坑：盒模型有两种计算方式。默认的 content-box 模式下，你设的 width 只算内容区，padding 和 border 会往外撑。我曾经因为这个被坑惨了——明明设了 100px 宽的按钮，加上 10px padding 和 2px border，实际占了 124px，布局直接错位。

避坑指南：我建议所有项目一开始就全局设置 box-sizing: border-box;。这样 width 就包含了 padding 和 border，算尺寸时省心很多。

/* 推荐做法：全局统一盒模型 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 一个典型的卡片组件 */
.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 16px;
  /* 实际占用宽度：300px（含padding和border） */
}

1.3 流式布局：让页面「随波逐流」

流式布局（Flow Layout）是浏览器默认的布局方式。说白了就是：块级元素从上往下堆，行内元素从左往右排。你写一个 <div>，它自动占满整行；你写一个 <span>，它乖乖跟在前面内容的后面。

为什么会这样？因为浏览器渲染页面时，就像水流一样，元素一个接一个地「流」进视口。块级元素像大石头，一块一块往下落；行内元素像小石子，沿着缝隙往前挤。

个人经验：流式布局最适合「内容不确定」的场景。比如文章正文、商品列表——你不知道用户屏幕多宽，也不知道内容多长，让元素自然换行是最稳妥的。

<!-- 流式布局的典型例子 -->
<div class="container">
  <div class="item">块级元素1</div>
  <div class="item">块级元素2</div>
  <span>行内元素1</span>
  <span>行内元素2</span>
</div>

<style>
.item {
  width: 100%;  /* 块级默认占满 */
  margin-bottom: 10px;
}
span {
  margin-right: 8px;  /* 行内元素水平排列 */
}
</style>

1.4 知识体系总览

下面这张图把本章的核心逻辑串起来了。你可以把它当作「布局地图」，后面每学一个新布局方式，都可以往这张图上挂。

1.5 实战：写一个简单的卡片布局

光说不练假把式。咱们用刚学的知识，写一个产品卡片组件。注意看我是怎么把盒模型和流式布局用起来的。

<div class="card">
  <img src="product.jpg" alt="产品图" class="card-img">
  <div class="card-body">
    <h3 class="card-title">智能手表 Pro</h3>
    <p class="card-desc">续航14天，防水50米</p>
    <span class="card-price">¥299</span>
    <button class="card-btn">立即购买</button>
  </div>
</div>

<style>
/* 全局盒模型统一 */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 280px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px;
  /* 流式布局：块级元素自动占满父容器宽度 */
}

.card-img {
  width: 100%;
  display: block;  /* 去掉图片底部的空隙 */
}

.card-body {
  padding: 16px;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.card-desc {
  margin: 0 0 12px 0;
  color: #666;
}

.card-price {
  font-size: 22px;
  font-weight: bold;
  color: #e53935;
  margin-right: 12px;
}

.card-btn {
  padding: 8px 20px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
</style>

小技巧：图片底部总有个几像素的空白？那是行内元素默认的基线对齐导致的。给 <img> 加 display: block 或者 vertical-align: bottom 就能解决。我刚开始写页面时被这个坑过好几次。

好了，这一章的内容就这些。布局原则是「道」，盒模型是「术」，流式布局是「器」。道术器三者结合，你就能写出既好看又稳定的页面。下一章咱们聊聊更灵活的 Flexbox 布局——说实话，它是我日常开发中用得最多的布局方式。

📚 课程目录

1、布局基础：认识UI布局的核心原则，理解盒模型与流式布局

1.1 布局的核心原则：别让用户「找东西」

1.2 盒模型：每个元素都是一个「盒子」

1.3 流式布局：让页面「随波逐流」

1.4 知识体系总览

1.5 实战：写一个简单的卡片布局