第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%的人还看了以下文章

  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    4.5K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    7.6K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    6.9K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    4.8K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    13.5K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    10.0K0

发表回复

登录后才能评论