将div的宽、高按比例设置有什么效果

在添加div时,对它的大小(宽、高)有两种设置方法:固定值和百分比。

1)若div的宽高为固定值,则该div的显示效果会随着其父div的缩放而变化。如下所示:

.fixed{
	width:200px;
	height:100px;
	background:#F00;
}

画面大小随缩放发生变化

2)若div的宽、高值为百分比,且其父div的宽、高值也为百分比,body的宽高默认未设置为指定值时,则该div的显示不会因为浏览器的缩放而变化如下所示:

	<style type="text/css">
	body{
		background:#093;
		margin:0px; /*body的margin默认是8px*/
		border:0px solid #CF0;
	}
	.one{
		background:#F33;
		width:50%;
		height:0;
		padding-bottom:20%
	}
	.two{
		background:#00f;
		width:30%;
		height:0;
		padding-bottom:30%;
	}
	</style>
	
<body>
    <div class="one">
    	<div class="two"></div>
    </div>
</body>

画面大小没有随缩放发生变化
原理:将div的高度height设置为0,这样它的内容就会溢出,需要将其padding-bottom也设置为百分比(该值取的也是其父div的宽度比例),这样这个div的高度也成比例了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值