HTML5与CSS3基础教程:为段落、表单等设置高度和宽度

摘要:可以为很多元素设置高度和宽度,如分块内容、段落、列表项、div、图像、video、表单元素等。同时,可以为短语内容元素(默认以行内方式显示)设置display: block;或display: inline-block;,再对它们设置宽度或高度。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)
第四节:对默认样式进行重置或标准化(抹平不同浏览器之间的样式差异)
第五节:盒模型(用CSS分控制每一个盒模型)
第六节:控制元素的显示类型和可见性(用CSS改变元素默认显示类型)

11.7 设置元素的高度和宽度

可以为很多元素设置高度和宽度,如分块内容、段落、列表项、div、图像、video、表单元素等(参见图11.7.1~图11.7.3)。

同时,可以为短语内容元素(默认以行内方式显示)设置display: block;或display: inline-block;,再对它们设置宽度或高度。(关于display属性的更多信息,参见11.6节。)

blob.png

图11.7.1 最终,页面会有两栏,一栏是main里的内容,一栏是class="sidebar"的div里的内容。这些规则分别对它们设置了固定的宽度(如图11.7.2和图11.7.3所示)

blob.png

图11.7.2 这里将main的宽度设置为600px以适应图像的宽度。现在,无论浏览器窗口的宽度是多少,页面主区域的宽度会始终保持600px不变。文字会自动折行,不会超过图像的宽度

blob.png

图11.7.3 侧边栏以About Me模块开头。目前,我们的页面只有一列,可以看到main内容的尾部位于侧边栏的上方。还可以看到,侧边栏的宽度(目前设置为300px)只有main的宽度的一半

1. 设置元素高度或宽度的步骤

(1) 输入width: w,其中的w是元素内容区域的宽度,可以表示为长度(带单位,如px、em等)或父元素的百分数。或者使用auto让浏览器计算宽度(这是默认值)。

(2) 输入height: h,其中的h是元素内容区域的高度,只能表示为长度(带单位,如px、em等)。或者使用auto让浏览器计算高度(这是默认值)。

blob.png

提示:内边距、边框和外边距都不包含在宽度或高度的数值里(参见11.5节及本节后面的“宽度、外边距和auto”部分)。11.5节

还介绍了对元素设置box-sizing: border-box;(如图11.7.4所示),让宽度和高度包含内边距和边框的方法。

blob.png

图11.7.4 可以使用*通配符对所有元素应用border-box的规则。当然,也可以单独对元素应用该规则(用你需要的选择器替换*即可)。带有-webkit-和-moz-这些奇怪前缀的属性可以让这些规则在旧的Android和iOS设备上起作用,同时在Firefox上也能正常工作。

提示:百分数是相对于父元素的宽度的,而不是相对于元素本身的原始宽度的。例如,假设div宽度为100像素,将其内部的某个元素的宽度设为70%,则这个子元素的宽度为70像素,你在下一章还能看到这方面的

例子。

提示:不能为显示为行内元素的元素(如短语内容)设置高度或宽度,除非为它们设置display: inline-block或display: block。关于display属性的更多信息,参见11.6节。

提示:还有min-width、min-height、max-width和max-height属性用来设置最小和最大尺寸。max-width属性是为流式布局(下一章会讲到一个流式布局的例子)设置宽度限制的绝佳工具。在那个例子中,对包围整个页面的.page div设置了max-width: 960px;。同时,main和.sidebar均使用百分数宽度,因此页面在小一些的屏幕上会较窄,在大一些的屏幕上则较宽,但不会超过960像素,哪怕屏幕非常大。另外,参考补充材料“为什么min-height通常比height更适用”。

提示:width和height不是继承的。

2. 宽度、外边距和auto

如果不显式设置宽度和高度,浏览器就会使用auto。对于大多数默认显示为块级元素的元素,width的auto值是由包含块的宽度减去元素的内边距、边框和外边距计算出来的,参见图11.7.5和图11.7.6。简单说来,包含块的宽度指的是父元素给元素留出的宽度。

blob.png

图11.7.5 在这个例子中,将父元素div的width设为300像素。这将是我们的包含块。然后,两个段落各个边上都有10像素的外边距、8像素的内边距及3像素宽的边框。第一个段落的宽度是自动设置的,因为auto是width的默认值(除非指定其他的值)。第二个段落(在HTML中带有class="second")设为200px

例如,位于200像素宽的空间里的p元素的auto宽度为200像素。但如果为其设置padding-right: 10px,则auto宽度为190像素。 

对于图像这样的元素,auto宽度等于它们固有的宽度,即外部文件的实际尺寸(如本章示例页面中最大的图像,大小为600×365)。行内元素会完全忽略width属性(即不能为em、cite等元素设置宽度,除非将它们设置为display: inline-block或display: block)。关于display,参见11.6节。

如果手动设置width、margin-left和margin-right值,但这些值加上边框和内边距的值不等于包含块的大小,有的属性就需要作出让步。实际上,浏览器会优先考虑width,确保右边的间距大于你设置的margin-right(参见图11.7.6中底部的段落)。

如果手动设置width,但将某个外边距设为auto,那么这个外边距将进行伸缩以弥补不足的部分。

blob.png

图11.7.6 如果width是auto(就像第一个段落那样),它的值就是由包含块(黄褐色区域)的宽度减去元素自身的外边距、内边距和边框计算出来的。如果width是手动设置的(就像最后一个段落那样),则右外边距常常会进行调整以填补不足的空间

不过,如果手动设置width,并将左右外边距都设为auto,那么两个外边距就将设为相等的最大值,这样会导致元素居中。例如,.page { margin: 0 auto; }会使对应的元素在页面居中显示。这也是我对示例页面所做的设置,参见图11.7.6和图11.10.7。

blob.png