欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

你知不知道HTML元素都是装在盒子里的?_html/css_WEB-ITnose

程序员文章站 2022-05-17 14:08:17
...
不管你要用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浏览器的开发者工具可以查看所有页面元素的盒子。 这里还有个小程序 ,可以调节几个关键的属性值,你可以直观地感受下。