http://wiki.huihoo.com/wiki/?action=history&feed=atom&title=CSS%2Ftutorials%2Flesson12 2026-07-22T02:24:30Z 本wiki的该页面的版本历史 MediaWiki 1.19.2 http://wiki.huihoo.com/wiki/?title=CSS/tutorials/lesson12&diff=40532&oldid=prev 2010-10-17T00:19:56Z

<p>以内容&#039;{{top news}} ==第12课：高度和宽度== 到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽...&#039;创建新页面</p> <p><b>新页面</b></p><div>{{top news}}<br /> <br /> ==第12课：高度和宽度==<br /> 到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。<br /> *设定宽度[width]<br /> *设定高度[height]<br /> <br /> ==设定宽度[width]==<br /> 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。<br /> <br /> 下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子：<br /> <br /> div.box {<br /> width: 200px;<br /> border: 1px solid black;<br /> background: orange;<br /> }<br /> <br /> [[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson12-ex1.html 显示示例]<br /> <br /> ==设定高度[height]==<br /> 注意上一个例子，盒子里内容的长短决定了盒子的高度。你可以通过height属性来设定一个元素的高度。比方说，我们要把上面那个例子中的盒子高度设定为500像素：<br /> <br /> div.box {<br /> height: 500px;<br /> width: 200px;<br /> border: 1px solid black;<br /> background: orange;<br /> }<br /> <br /> [[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson12-ex2.html 显示示例]<br /> <br /> ==小结==<br /> 第[[CSS/tutorials/lesson9|9]]、[[CSS/tutorials/lesson10|10]]、[[CSS/tutorials/lesson11|11]]和12课向你介绍了CSS的盒状模型。就像你所看到的，盒状模型为你提供了许多新的选择。之前，可能你一直在用HTML表格（table）来进行页面布局；但是现在，你应该已经具备采用CSS和盒状模型来进行更加精确而优雅、并且符合W3C标准的页面布局的能力了。<br /> <br /> {{comment}}<br /> <br /> [[Category:CSS]]</div>

Allen