html 网页盒子模型案例

HTML网页盒子模型是用来描述HTML元素在页面布局中的结构，它包括四个部分：内容(content)、内边距(padding)、边框(border)和外边距(margin)。一个简单的例子就是理解一个div元素的基本布局：

假设有一个基本的HTML div:

<div class="box" style="width: 200px; height: 200px; border: 1px solid black;">
   <p>这是内容</p>
</div>

在这个例子中：
- **内容** (content) 占据了整个div区域，宽度和高度为200px。
- **内边距** (padding) 可能会增加元素内部空间，如果样式设置了`padding: 20px;`，那么实际的内容区域将减小到160px（200 - 40 = 160）。
- **边框** (border) 是围绕内容区域的一圈线，这里是1px实线，增加了总共4px的空间（上下左右各1px）。
- **外边距** (margin) 可以添加在边框之外，如果设置`margin: 20px;`，那么整个div的实际位置将会比边框区域还要向外扩展40px。

这就是一个简单的盒子模型应用实例。