上一章说的就是一个排队的问题,因为一切比喻都是蹩脚的,所以也不要太较真。在我们还不了解这些东西的时候,能够快速的给我们一个初步的感受,对于后面的理解,多少是有帮助的。

我们可以看出来,块元素,好像就是一个方块。这倒是真的,不过这个方块里面还可以盛纳东西……那这不就是个盒子吗?

对啊,这就是个盒子。你就把他们当成盒子就好,这就是我们在 CSS 中的盒模型。用盒子来作为模型,去讲述这些(块级)元素。

但是如果你多想一点,你会发现块元素非常适合网页排版,这就像是砖块,快速搭建页面。又像是书架,可以摆放各种东西。但是目前我们所学的标签都有具体的意义,好像不能随心所欲的去使用。所以在这里我们要讲一个没有什么意义的标签——<div>

反正它就是一个块元素,空白的,没有其他特征的,也没有什么意义的。有的时候我们称它为一个容器。

有那么一段,在招聘网站招聘前端的时候,都要写上这么一条要求:熟悉 div+css 布局。有人说这个叫法很不专业,但是 H5 这么不专业到无法解释的词汇也流行过了,就不想多解释这些了。等我们学完之后,你再自己去下结论吧。

反正就是这么个东西,因为它没有意义,那我们多用它几次也没所谓,这就很方便。当然也不要一味的滥用,在什么时候,适度都是一个最好的选择。

那么块元素用来布局很方便,行内元素呢?行内元素主要是用来对类似文字的东西进行修饰。不过我们学过的各种行内元素,也都是带有意义的。如果有一些修饰并不是这些意义,或者它纯粹就是装饰,毫无意义。怎么办呢?

像上面一样,我们也有一个空白的,没有其他特征的,也没有什么意义的,行内元素标签——<span>


这两个标签都很干净,本身没有什么默认样式,除了一个默认是块级元素,一个默认是行内元素。简直就像一张白纸一样,让我们可以自由的发挥,这个感觉特别好。

不过感觉虽好,可不要上瘾哦。如果有标签可以表达出这个元素的含义,那么优先选用合适的标签。在没有合适标签的时候,再考虑使用这些空白标签。

这几章我们要讲到的理论比较多,这是一种准备工作。我们先把理论讲清楚,有了这个基础,我们才可以做后面的讨论。理论准备好了,我们就拿理论去进行实战,在练习中体会它究竟是怎样的。那时候出了问题,我们也可以以这些理论为基础进行思考,分析到底是哪里出了差错。

【本章助记卡片:卡片 for 第四十六章