您的位置:CSS5 > CSS笔记 >

阿里云 2核CPU 4G内存 3M带宽云服务器 669元/3年

默认div宽度认识与div的宽度设置

发布日期:2019-10-22 23:03:07 来源:CSS5

默认情况下任何元素标签都是有宽度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>我这个没有设置class和id的宽度为100%,即父级宽度相同480px</div>
</div>

4、最小宽度

min-width:300px
实际上这个与宽度width是两个CSS单词,单都是控制宽度的样式。

.min{width:100%;min-width:300px}

<div class=”min”>设置宽度100%,但最小宽度为300px</div>

假如这个div是最外层的div,那么他宽度就会随浏览器宽度而有不同宽度,那么浏览器宽度分辨率缩小最小小于了300px,这时这个div设置最小宽度就起作用了,也就是这个div缩小最小宽度300px。

5、最大宽度

与最小宽度相反为最大宽度,代码
max-width

用法:
.max{max-width:500px}

当一个div不设置固定宽度,直接设置最大宽度后,这个div最大宽度值就是这个div最大的固定宽度,当父级小于最大宽度时,这个div宽度是自适应缩小的。

标签(Tag): div 宽度
本文分享URL地址:https://www.css5.com.cn/biji/1594.shtml

作者:CSS5原创

上一页:上一篇:div字体大小_div内文字大小改变css代码
下一页:下一篇:div高度_用CSS设置div高度