理解 CSS 中 height 与 width

Photo by Peter Thomas on Unsplash

CSS 中 height 与 width 是初学者比较容易误用的属性。在实际使用这过程

中,我发现其实它们的用法涉及到了两个基本的概念:盒子模型与元素类型。

对于开发者来说,只有明确了这两个概念的定义,才能掌握 height 与 width

的用法。

盒子模型

在默认的显示模式下,我们可以把一个元素看成一个盒子。这个盒子包含了

margin(边距)、border(边框)、padding(填充)、content(内容)四

个部分。而一个盒子的实际宽、高就是对应方向上四个元素的尺寸之和。更多

关于盒子模型的内容可以看 W3C 标准 ,这里不具体展开。

这里我们第一个遇到的鸿沟就是,我们平常谈论的 height 与 width 并不是指

元素这个盒子实际的宽、高尺寸,而是指盒子模型中 content(内容)部分的

宽与高。明确了这一点,我们继续。

元素类型

根据元素自带换行属性与否,我们可以将元素分为 block element (块级元

素)和 inline element (内联元素/行内元素)。常见的块级元素有 <p>、

<div>,内联元素有 <span> <img> 等。 当然,块级元素与内联元素可以通过

CSS 进行控制,这边不具体展开。

height 与 width 的最大傲娇之处在于,他们只能作用于域块级元素。对于内联

元素来,其宽高仅与其包含的内容的尺寸一致 。这样的好处是我们可以用内联

元素方便地来操作行内文本,而不用手动去设置这些行内文本的宽高。

元素 width

终于可以来看看 width 与 height 这俩属性了。回忆我们之前那的盒子模型,

CSS 中的 width 指的是此元素的(content)内容宽度,总宽度是指宽度方向

上 margin、border、padding、content 尺寸之和。常用值如下。

auto:这是 width 默认取值。此时元素总宽度总是等于其父元素内容宽度

100%:若设定元素 width 为 100%,其内容宽度等于其父元素内容宽度

inherit:inherit 意味着此时 width 继承于父元素 。假如父元素中 width 设

定为 100%,那么子元素 width 也是 100%,假如父元素 width 设定为 auto,

子元素 width 也是 auto 。

元素 height

CSS 中的 height 指的是此元素的内容高度。总高度是指高度方向 上 margin、

border、padding、content 尺寸之和。常用值如下。

auto:这也是 height 默认取值。 此时元素内容高度由子元素总高度决定。

100%:若设定元素 height 为 100%,其内容高度等于其父元素内容高度

inherit:inherit 意味此时 height 继承于父元素。类似 width: inherit。

总结

width 与 height 作用于块级作用域,且代表的是盒子模型中内容部分的尺寸。

对这两个值在默认 auto 取值时的表现需要特别加以注意。

参考链接

Block and inline——斯坦福教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注