有了盒子，自然就不缺猫了，然后就能过上幸福的生活（一只老鼠幻想猫什么的，真的好么？
我们来看看我们的盒元素吧：
<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）作为单位肯定是没问题的，em 和 rem 也是可以的（但比较少），百分比（%）要记住是相对于父元素的。
但这仅仅是常用的而已，还有许多复杂的单位，我们后面用到的时候再展开，慢慢去讲。
基本上所有块元素都可以设置宽和高，而行内元素就不行了。行内元素会非常呆萌的向你说：我就这么多内容呀，那我就占这么大地方！地方少了，我会呆不下的，地方大了，多吃多占，凑不要脸……
HTML 元素本身也具有宽和高的属性（HTML 属性，不是 CSS），不过现在我们已经很少使用了。一般也就在图片和表格中，还会再遇见。比如：
<img src="123.jpg" width="300px" height="300px">不过如果没有特殊的原因，还是建议把所有样式相关的东西写到 CSS 中，这样便于管理和修改。
然后对于图片元素会有一个特殊的地方，因为这个内容本身具有一个宽高，就是图片的尺寸。我们再设置宽高，图片会按照我们设定的尺寸而进行拉伸。
如果我们只设置一个宽度，或者只设置一个高度呢？那么图片会等比例缩放到符合我们所设定的尺寸。这时候其实相当于另一个值被设定为了 auto，就是让浏览器看着办。
不过图片这个元素有些特殊，你会发现它同时具有块元素和行内元素的特性，这个我们后面再去认识。
暂无评论内容