点此查看所有教程、项目、源码导航
本文目录
1. 前言2. 实例解析3. 小结1. 前言
之前我们讲过CSS的尺寸、边框、内边距、外边距。
其实这些都是占用网页空间，在CSS中，我们将网页元素占用的空间形容为一个盒子。
盒子模型是比较复杂的，在入门阶段大家做一个基础的理解就可以了。
2. 实例解析
我们直接通过一个实例来了解下盒子模型：
<head><meta charset="utf-8"><style>.box {margin: 50px;border: 10px solid blue;padding: 20px;background-color: green;}.content {background-color: yellow;}</style></head><body><div class="box"><div class="content">黄河远上白云间<br>一片孤城万仞山<br>羌笛何须怨杨柳<br>春风不度玉门关<br></div></div><hr></body>
效果如下：
我们具体介绍下，蓝色边框包围的部分，就是我们的盒子，我们使用.box类描述这个盒子。
由于外边距设置为了50px，所以这个盒子与上下左右的边距是50像素。
由于边框设置为了10px，所以蓝色边框上下左右部分，宽度都是10px。
最后由于内边距设置为了20px，所以盒子内部内容和盒子边框的距离，上下左右都是20px。
最后，里面是元素内容区域，我们指定其为黄色背景。
这就是盒子模型，一个元素占用的空间，其实是包含内容部分、内边距部分、边框部分、以及最容易遗漏的外边距部分。
看下图，各个红圈圈出来的部分，是box元素的外边距部分，也是被占用的空间（填不上其他东西，必须留出这些空间）。
3. 小结
大家一定要理解，一个元素占用的空间，其实是包含很多部分，不只是内容部分。
如果要精确描述的话：
元素的宽度=宽度(width)+左填充(padding-left)+右填充(padding-right)+左边框(border-left)+右边框(border-right)+左边距(margin-left)+右边距(margin-right)。
元素的高度=高度+上填充+下填充+上边框+下边框+上边距+下边距。
这就是盒子模型，大家记住盒子占用的空间，包含很多部分就行。
