首页 > 代码库 > 【CSS中width、height的默认值】

【CSS中width、height的默认值】

2024-08-17 01:05:35   221人阅读

对于初学者来说，CSS中的width、height的默认值是很神奇的，因为经常看到如下这样的代码：明明只给一个#father标签（红色的div）设置了一个width，为啥它在浏览器中显示出来是有一个固定的height的呢。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

    <title>测试宽度</title>
    <style type="text/css">
        .body{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 500px;
            background: red;
        }
        #father .son{
            width: 100px;
            height: 100px;
            background: green;   
        }

    </style>
</head>
<body>
<div id="father">
    <div class="son">

    </div>
</div>
</body>
</html>

 

于是就去w3c上搜索，发现height的默认值都是auto，也就是说上一行代码中的height是默认值auto。那么为什么会编程100px的高度呢。

通过查阅资料得知，如果将height设为auto，那么该标签的高度将由它的子标签的高来决定。也就是说会子标签会撑开父级标签。上面代码就是因为.son的100px的高度撑开了父标签father的高度。

那么宽度是否也会被撑开呢？

于是自己继续做了一次实验：把father的width注释，运行后发现father的宽度和浏览器等宽。查资料发现对于div标签来说width默认是100%，就是和父级标签等宽。所以不设father的宽度，他就默认等于body的宽度了。

 

【CSS中width、height的默认值】


联系
我们