你知不知道HTML元素都是装在盒子里的?_html/css_WEB-ITnose
你在浏览器界面上看到的所有HTML元素都是装在盒子里的,不过你可能看不到盒子,要仔细观察才能发现一些蛛丝马迹。而且这个盒子还不止一层,足足有三层,大概是这个样子的:
图一:盒子模型示意图 (源自 Introduction to the CSS box model )
你要显示的内容在最里面,然后外面有一个 padding 层,接下来是 border 层,最外一层叫 margin 。这三层里有可能可以直接看到的只有 border ,其它两层虽然你可以感觉到它们的存在,但从视觉上来说,它们是完全透明的。
在继续往下看之前,先考虑两个问题:
- 为什么要搞个盒子?
- 这个盒子关我啥事儿?
第一个问题说来话长,如果确实像知道,还是去找制定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浏览器的开发者工具可以查看所有页面元素的盒子。 这里还有个小程序 ,可以调节几个关键的属性值,你可以直观地感受下。
上一篇: PHPMailer邮件发送实例与问题总结
下一篇: php 类 疑问