HTML基础教程（二十二）网站布局之使用＜div＞ 元素：别瞎摆了！你的网页布局是“div”说了算：从菜鸟到布局大师的速通指南

第一章：遇见“div”——那个默不作声的布局之王

想象一下，你要建造一座现代化的小镇。

你会需要房子、商店、公园和道路。但在这之前，你需要什么？你需要一块块空地，来规划哪里建住宅区，哪里是商业中心，哪里留作绿化带。

在HTML的世界里，<div>（division的缩写，意为“划分、区域”）就是这块万能的地皮！它本身几乎没有任何默认样式，不像<p>标签自带上下边距，也不像<h1>标签字体巨大。它就像一个透明的、无形的容器，其唯一的存在价值就是——为你划分出一块专属区域，让你在里面为所欲为！

为什么是它成为了布局的霸主？让我们回首那段“黑暗”的往事。在Web的远古时期，人们曾用<table>来布局整个页面。导航栏是一个表格行，内容区是一个有三个单元格的表格行……那简直像是在用手术刀砍树，不仅笨重、代码冗余，而且语义性极差，维护起来更是噩梦。

<div>的横空出世，带来了结构与表现分离的革命性思想。我们用语义化的标签（如<header>, <nav>, <main>）和<div>来搭建页面的结构（骨架），然后用CSS来控制它的表现（皮囊）。这就好比先盖好毛坯房（div布局），再根据心情精装修（CSS样式），灵活度直接拉满！

所以，下次当你看到一个清爽漂亮的网页时，请在心里向无数个默默无闻的<div>致敬。它们就是幕后那群排好队、撑起一切的无名英雄。

第二章：解锁“div”的超能力——读懂它的内心戏（盒子模型）

要想驾驭<div>，你必须和它心灵相通，而沟通的桥梁就是CSS盒子模型（Box Model）。这是<div>布局的核心哲学，不理解它，你写的CSS就会像在迷宫里瞎转。

每一个<div>都是一个四层夹心盒子，从内到外分别是：

1. 内容（Content）：最核心的