【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:;
padding:;
}
#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的默认值】的更多相关文章
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- 分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...
- css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
- MVC4中给TextBoxFor设置默认值和属性
例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value=" ...
- MVC4中给TextBoxFor设置默认值和属性(同时设置js事件)
例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value=" ...
- php与js中函数参数的默认值设置
php函数参数默认值设置: <?phpfunction test($val=3){ echo $val."<br/>";}test(11);test();?& ...
- EF架构~在T4模版中为所有属性加默认值
回到目录 在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...
- Django的model中日期字段设置默认值的问题
之前写过这样一个model: class MonthlyFeeMember(models.Model): worker = models.ForeignKey(Student, verbose_nam ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
随机推荐
- python cx_Oracle install
Ubuntu install python-cx_Oracle 1: install alien tools . sudo apt-get install alien 2: dowload fol ...
- 修改app名字
一张图说明问题 如果没有成功clean一下,或者卸载掉原有的重新生成一下 如果要修改路径名和工程名有个复杂的方法 http://blog.sina.com.cn/s/blog_a42013280101 ...
- 测试gcc的优化选项
一.测试准备及原理 测试代码: static void wait(volatile unsigned long dly) { ; dly--); } int main(void) { unsigned ...
- Find The Multiple（poj 1426）
Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...
- C#技术分享【PDF转换成图片——13种方案】（2013-07-25重新整理）
原文:C#技术分享[PDF转换成图片--13种方案](2013-07-25重新整理) 重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 写在最前面:为了节约大家时间,撸主把最常 ...
- SORT ORDER BY STOPKEY
select * from ( select * from ( select a.*,rownum rn from page a where object_id >1000 and owner= ...
- Ubuntu 中使用 谷歌日历
简介 对于经常使用待办类软件的人来说,谷歌日历是个不错的选择.但每次,都要登录网页去查看,对于我这样的懒人来说似乎麻烦了些. 所以在网上找了个叫做 Calendar Indicator 的软件. 效果 ...
- 贪心(数据结构)：COGS 468. [NOI2010]超级钢琴
★★★☆ 输入文件:piano.in 输出文件:piano.out 简单对比 时间限制:2 s 内存限制:512 MB 超级钢琴 [问题描述] 小Z是一个小有名气的钢琴家,最近C博士送 ...
- JavaScript 调试常见报错以及修复方法
(看到一篇调试JS很有用的文章,收藏一下) JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助.有个查找错误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 ...
- LA 3263 欧拉定理
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...