盒模型的概念及使用

首先，我们要先了解什么是盒模型。盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)，如下图：

我们先在H5中定义一个元素


查看代码之后，如下：

可以看见实际内容去变小了，但是元素实际所占区域还是没变，这就是怪异盒模型，而我们的按钮标签就是一个典型的怪异盒模型，例子如下：
创建一个按钮

在浏览器中显示如下：

然后查看代码：

可以看见内容区变小了，但是元素实际所占区域还是没有变，这就是典型的怪异盒模型。

甘洪波
2020年2月23日