CSS - 宽高

  1. 初试
  2. 像素
  3. body不能设置宽高
  4. 百分比

  • 作者：KK

  • 发表日期：2016.1.26

初试

网页上有很多东西都是有宽度高度的,通过css的width和height属性来设置宽高,以后你也会很频繁地接触这两个属性,实例:

<body>
<style type="text/css">
div{
	background:red;
	width:400px;
	height:400px;
}
</style>
<div>页面内容</div>
</body>

像素

400px,50px...这些值在前面出现过几次了,这里正式介绍一下吧,就像我所说的,它们的意思是400像素和50像素的意思,其实数字后面不一定是px,可以是em和cm等不同单位的,但实际上CSS中我本人都从来只写过px和em的,其它单位都没了解过...你也不用懂太多,至少知道像素就好了,然后要用到时再上网搜索CSS尺寸单位

像上面的width和height属性描述宽高时,需要说明多宽呀,所以我们就说400像素宽度咯,或者377什么的你自己给个数字他就行了,但是单位要是px两个字母才是像素的.你可以尝试一下换成cm单位,这个就是我们生活中所接触的厘米

后面我会在适当时候再向你介绍em这个单位,也会用得上它的

body不能设置宽高

你应该发现我上面演示代码中的CSS选择器是div而不是body,因为body一般是不能修改它的宽高的,body就是整个网页内容区域.要显示个小区域的红色块,我只能在body里加一个div再上样式

百分比

我们再在div里套多一个div设置不同的宽高先

<body>
<style type="text/css">
.div1{
	background:red;
	width:400px;
	height:400px;
}

.div2{
	background:green;
	width:300px;
	height:113px;
}

.div3{
	background:yellow;
	width:200px;
	height:57px;
}
</style>
<div class="div1">
	第1个div
	<div class="div2">
		第2个div<br/><br/>
		<div class="div3">第3个div</div>
	</div>
</div>
</body>

看到了吧,我们为两个div分别添加不同的class属性值,然后样式里通过class选择器为它们设定不同的颜色和尺寸,你已经看到了大框包小框的效果

但接下来才是我要说明的东西----宽高百分比,请尝试将.div3的样式改成这样:

.div3{
	background:yellow;
	width:100%;
	height:57px;
}

这里是将width这个宽度属性的值改成了100%,意思是占满父容器的宽度,.div3的父容器就是包住它的上一个标签正是.div2,同时你也可以试下将.div2的宽度改成100%,由于.div2的父容器就是.div1,所以.div2在宽度100%下会占满整个.div1的400像素宽度

而另外,你还可以改成90%或者78%之类的,你喜欢,自己多试下吧~