你知不知道HTML元素都是装在盒子里的？

不管你要用HTML显示什么内容，统统都会被放到一个长方形的盒子里。但浏览器呈现给我们的是一个二维世界，二维世界里的盒子跟我们这个世界的盒子不一样。二维世界里的盒子虽然只有宽和高两个维度，但从能装东西这个角度来说，那确实是盒子。...



请点击上面的智慧健身关注！

不管你要用HTML显示什么内容，统统都会被放到一个长方形的盒子里。但浏览器呈现给我们的是一个二维世界，二维世界里的盒子跟我们这个世界的盒子不一样。二维世界里的盒子虽然只有宽和高两个维度，但从能装东西这个角度来说，那确实是盒子。

你在浏览器界面上看到的所有HTML元素都是装在盒子里的，不过你可能看不到盒子，要仔细观察才能发现一些蛛丝马迹。而且这个盒子还不止一层，足足有三层，大概是这个样子的：



图一：盒子模型示意图 （源自Introduction to the CSS box model）

你要显示的内容在最里面，然后外面有一个

padding

层，接下来是

border

层，最外一层叫

margin

。这三层里有可能可以直接看到的只有

border

，其它两层虽然你可以感觉到它们的存在，但从视觉上来说，它们是完全透明的。

在继续往下看之前，先考虑两个问题：

1. 为什么要搞个盒子？
2. 这个盒子关我啥事儿？

第一个问题说来话长，如果确实像知道，还是去找制定CSS标准的那帮人，或者做浏览器的聊聊吧。说实话我也不知道为啥。

第二个问题，先假设你要买一套400*100的房子（像素，不是米！），规格说明是这样的：

div {



width: 400px;



height: 100px;



border: 6px solid #949599;



margin: 20px;



padding: 20px;

}

你一看

width

和

height

没问题，就一蹦一跳地去交钱了。结果算账的时候，你发现开发商要跟你收492*192的钱，你是不是想问候他老母？但还没等你开口，他就拿出设计图：



图二、盒子模型设计图（源自Opening the Box Model）

然后甩给你两个公式：

width = margin-right +

             border-right + 

             padding-right + 

             width + 

             padding-left +

             border-left + 

             margin-left

height = margin-top + 

              border-top + 

              padding-top + 

              height + 

              padding-bottom + 

              border-bottom + 

              margin-bottom

并且还没等你看明白，就拿出计算器一通按，然后笑眯眯地看着你，请你自己看492和192是怎么来的。

• Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20
• Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

简单来说，宽度要把所有横向的数都加起来，不能漏掉

margin

、

border

和

padding

的

left

和

right

；高度要把竖向的所有数都加起来，不能漏掉

margin

、

border

和

padding

的

top

和

bottom

。

所以说，你本来只想放一个400px*100px的图片，但浏览器却要给你492px*192px，如果你毫无心理准备，肯定会有点小激动吧。因此在设计页面时，一定要掌握盒子模型，要知道还有公摊面积这回事儿。不过这里只是简单介绍了一下，要深入了解，可以到两张图片的出处去看一下。

另外，chrome浏览器的开发者工具可以查看所有页面元素的盒子。也可以点击查看原文，里面有个小程序的链接，能调节几个关键的属性值，你可以直观地感受下。

    关注 智慧健身