默认div宽度和高度

本文介绍了div元素的默认宽度,通常为100%且等于其父级宽度。探讨了如何通过百分比、固定宽度、随父级宽度、最小宽度和最大宽度来设置div的宽度,提供了相关CSS代码示例。
摘要由CSDN通过智能技术生成

默认情况下任何元素标签都是有宽度css样式的。

一、认识div默认宽度

div默认的宽度多少?

答案:默认宽度为100%,父级宽度多少它宽度就多少。

 

比如一个盒子宽度设置550px,里面一个div默认未设置宽度和未设置float,未设置padding等,在没有设置任何CSS属性情况下这个div宽度就是等于父级宽度550px。

 

比如一个html布局中,body默认宽度是100%(浏览器宽度多少宽度就多少),如果body里第一个div未设置任何CSS样式情况下,这个div宽度就是默认宽度100%。

 

二、div宽度设置

1、百分比宽度

用法:

.wai{width:500px}

.bfb{width:80%}

<div class=”wai”>

<div class=”bfb”>我宽度为80%</div>

</div>

设置class=bfb的div宽度为80%,那么这个div的宽度等于父级class=wai的宽度*80%即,500*80%=400px。

得到class=bfb的百分比80%的div宽度为400px

百分比宽度 也是自适应宽度。

2、固定宽度

上面第一个实例已经用过了固定宽度。

.gu{width:330px}

<div class=”gu”>这个div固定宽数为330px</div>

3、随父级宽度相同

.fu{width:480px}

<div class=”fu”>

<div&g

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值