【CSS中width、height的默认值】

对于初学者来说，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的宽度了。

转载于:https://www.cnblogs.com/heyode/p/5973960.html

【CSS中width、height的默认值】相关推荐

css中width、height、margin、padding默认值总结
默认值 left top right bottom width height: 默认值为 auto margin padding: 默认值为 0 百分比参照于谁 width ...
我应该在CSS中使用px或rem值单位吗？
本文翻译自:Should I use px or rem value units in my CSS? I am designing a new website and I want it to be ...
MYSQL中TIMESTAMP类型的默认值
MYSQL中TIMESTAMP类型的默认值 MYSQL中TIMESTAMP类型可以设定默认值,就像其他类型一样. 1.自动UPDATE 和INSERT 到当前的时间: 表: ---------- ...
C++中函数参数的默认值
文章目录 1 C++中函数参数的默认值 1.1 C++中函数参数的默认值 1.2 函数默认参数的规则 2 函数占位参数 2.1 函数占位参数 2.2 函数占位参数的意义 1 C++中函数参数的默认值 ...
TfidfVectorizer中的参数norm默认值是l2
TfidfVectorizer中的参数norm默认值是l2,而不是一直以为的None; 注释中的解释: norm是可选 ,而不是None值:如果默认为None,就会用default=None:对比图中 ...
css中width是什么意思,css width是什么意思
width是宽度的意思,它是CSS中的一个用于设置元素宽度的属性. width属性设置元素的宽度. width属性定义元素内容区的宽度,在内容区外面可以增加内边距.边框和外边距:行内非替换元素会忽略这 ...
css 中动态获取宽度,css中的calc动态计算长度值
1 场景 css的样式中,存在动态计算长度的需求. 2 方案使用css中的calc函数动态计算css中的长度值. 语法: calc(expression) 参数说明: 值描述 expression ...
mysql修改表中某个字段的默认值
Mysql中用SQL增加.删除字段,修改字段名.字段类型.注释,调整字段顺序总结在网站重构中,通常会进行数据结构的修改,所以添加,删除,增加mysql表的字段是难免的,有时为了方便,还会增加修改表或 ...
EF架构~在T4模版中为所有属性加默认值
回到目录在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...

【CSS中width、height的默认值】

【CSS中width、height的默认值】相关推荐

最新文章

热门文章