有了盒子,自然就不缺猫了,然后就能过上幸福的生活(一只老鼠幻想猫什么的,真的好么?

我们来看看我们的盒元素吧:

<div id="box-1"></div>

这是一个空盒子,你把它写出来以后会发现并看不到它,不过我们可以感受到它。

在这里写一些文字
<div id="box-1"></div>
这里继续写一些文字

看看效果哦~

在这里写一些文字
这里继续写一些文字

这里并没有换行符,但它却分成了两行,请参照 第四十五章 讲个故事 的故事思考一下,这是为什么?

虽然这个块元素中没有任何的内容,但它还是占据了一个位置。默认的它就是占据整个的宽度,也就是宽度是 100%。要注意这个百分比是和父元素的宽度相比。

然后因为没有内容,它的高度是零。

当然我们看不见它,总觉得太不直观。那我就给它增加一个属性,来更真实的感受一下它的存在:


<div id="box-2"></div>

#box-2 {
  height: 100px;
}
在这里写一些文字
这里继续写一些文字

于是我们可以看到,这两行文字之间的空间变大了。那么这部分空间,就是被 div 占据了。我们虽然没有看见它,但是可以感受到它。

这种要靠感受去琢磨的东西实在太反人类了啊!

其实想看到它也很容易,虽然它是空的,但是我们可以给它一个背景色:


<div id="box-3"></div>

#box-2 {
  height: 100px;
  background: #EFEFEF;
}
在这里写一些文字
这里继续写一些文字

这样看得见摸得着的感觉,就会让我们觉得十分踏实。那为什么不一开始就这么做呢?有些时候,我明明写了某个元素,却找不到它,可能就是因为它的宽或者高是 0。这时候显示的不是一根细线,是彻底不显示,因为零表示没有。即便你设置了背景色也看不到它(当然有别的方法可以用,但是也当然会有更复杂的情况)。

我希望大家写代码和读代码的时候都不要着急,用一个非常平淡的心情去观察,自然会看到它的蛛丝马迹。这样才能够快速的去解决问题。

好啦说回来,这一章我们就是先观察一下这个盒子。然后我们看到了一个关于高度的属性,理所当然的,还有一个关于宽度的属性,width

这两者可以使用的取值比较多,那么用像素(px)作为单位肯定是没问题的,emrem 也是可以的(但比较少),百分比(%)要记住是相对于父元素的。

但这仅仅是常用的而已,还有许多复杂的单位,我们后面用到的时候再展开,慢慢去讲。

基本上所有块元素都可以设置宽和高,而行内元素就不行了。行内元素会非常呆萌的向你说:我就这么多内容呀,那我就占这么大地方!地方少了,我会呆不下的,地方大了,多吃多占,凑不要脸……

HTML 元素本身也具有宽和高的属性(HTML 属性,不是 CSS),不过现在我们已经很少使用了。一般也就在图片和表格中,还会再遇见。比如:

<img src="123.jpg" width="300px" height="300px">

不过如果没有特殊的原因,还是建议把所有样式相关的东西写到 CSS 中,这样便于管理和修改。

然后对于图片元素会有一个特殊的地方,因为这个内容本身具有一个宽高,就是图片的尺寸。我们再设置宽高,图片会按照我们设定的尺寸而进行拉伸。

如果我们只设置一个宽度,或者只设置一个高度呢?那么图片会等比例缩放到符合我们所设定的尺寸。这时候其实相当于另一个值被设定为了 auto,就是让浏览器看着办。

不过图片这个元素有些特殊,你会发现它同时具有块元素和行内元素的特性,这个我们后面再去认识。

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