【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(默认值),宽度是自动的,随着内容的增加 ...
随机推荐
- ubuntu 安装 open in teminal
sudo apt-get install nautilus-open-terminalnautilus -q
- bzoj2096: [Poi2010]Pilots
Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...
- instancetype 与 id for Objective-C
instancetype.id.NSObject的区别 - simalone 1.instancetype只能用于方法的返回类型,而id用处和NSObject *类似. 2.instancetyp ...
- 持续集成之戏说Check-in Dance
尽管Thoughtworks的首席科学家Martion folwer 为“持续集成 ” 下了定义,但由于自身背景与经历的不同,每个人对其都有不同的理解.从狭义上讲,持续集成可以认为是一种基于某种或者某 ...
- MFC之MessageBox用法
一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口 ...
- George and Cards
Codeforces Round #227 (Div. 2) E:http://codeforces.com/contest/387/problem/E 题意:给你一个n个数的序列,然后给你一个标准序 ...
- IOS中UIButton和UIImageView的区别
1.使用场合 UIImageView:如果仅仅是为了显示图片,不需要监听图片的点击事件 UIButton:既要显示图片,又要监听图片等点击事件 2.相同点 都能显示图片 3.不同点 UIButton能 ...
- ASP.NET最常用的页面生命周期事件
PreInit:在页生命周期的早期阶段可以访问的事件.在PreInit事件后,将加载个性化信息和页主题. Init:在所有的控件都已初始化,且已应用所有外观设置后引发.使用该事件来读取或初始化控件属性 ...
- 详解Spring中的CharacterEncodingFilter
在项目中有很多让人头疼的问题,其中,编码问题位列其一,那么在Spring框架中是如何解决从页面传来的字符串的编码问题的呢?下面我们来看看Spring框架给我们提供过滤器CharacterEncodin ...
- LNMP一键安装脚本
#!/bin/bash #LNMP(Fastcgi) #CentOS + MySQL 5.5 #-- iptables -F iptables -X iptables -Z iptables -A I ...