第12课:高度和宽度

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

  1. 设定宽度[width]
  2. 设定高度[height]

设定宽度[width]

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

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

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

设定高度[height]

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

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

来试试吧!

Tips:You can change the code before run.

小结

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5252.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 下午2:56
下一篇 2020年2月25日 下午3:43

99%的人还看了以下文章

  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    8.8K0
  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    2.5K0
  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    9.0K0
  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    9.0K0
  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    10.3K0
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    3.4K0

发表回复

登录后才能评论