CSS/tutorials/lesson12

来自开放百科 - 灰狐
2010年10月17日 (日) 00:19Allen (讨论 | 贡献)的版本

(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转到: 导航, 搜索

目录

第12课:高度和宽度

到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。

  • 设定宽度[width]
  • 设定高度[height]

设定宽度[width]

你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。

下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子:

div.box {
 width: 200px;
 border: 1px solid black;
 background: orange;
}

Icon-example.gif 显示示例

设定高度[height]

注意上一个例子,盒子里内容的长短决定了盒子的高度。你可以通过height属性来设定一个元素的高度。比方说,我们要把上面那个例子中的盒子高度设定为500像素:

div.box {
 height: 500px;
 width: 200px;
 border: 1px solid black;
 background: orange;
}

Icon-example.gif 显示示例

小结

91011和12课向你介绍了CSS的盒状模型。就像你所看到的,盒状模型为你提供了许多新的选择。之前,可能你一直在用HTML表格(table)来进行页面布局;但是现在,你应该已经具备采用CSS和盒状模型来进行更加精确而优雅、并且符合W3C标准的页面布局的能力了。

Comment-32x32.png

<discussion>characters_max=300</discussion>

分享您的观点
个人工具
名字空间

变换
操作
导航
工具箱