对于初学者来说，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的默认值】的更多相关文章

  1. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  2. 分别在javascript和JSP中动态设置下拉列表默认值

    一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...

  3. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  4. MVC4中给TextBoxFor设置默认值和属性

    例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value="  ...

  5. MVC4中给TextBoxFor设置默认值和属性(同时设置js事件)

    例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value="  ...

  6. php与js中函数参数的默认值设置

    php函数参数默认值设置: <?phpfunction test($val=3){   echo $val."<br/>";}test(11);test();?& ...

  7. EF架构~在T4模版中为所有属性加默认值

    回到目录 在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...

  8. Django的model中日期字段设置默认值的问题

    之前写过这样一个model: class MonthlyFeeMember(models.Model): worker = models.ForeignKey(Student, verbose_nam ...

  9. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

随机推荐

  1. unix 环境高级编程-读书笔记与习题解答-第二篇

    第四节 输入与输出 上次的笔记中写到的 open, read, write, lseek 以及close ,都是不带缓存的IO函数,这些函数都使用文件描述符进行工作. 上一篇笔记用到的 read(ST ...

  2. JavaScript生成器+随机数的使用

    function* getIndex(indexList){ var len = indexList.length; var m; while(indexList.length > 0){ m ...

  3. 关于ios object-c 类别-分类 category 的静态方法与私有变量，协议 protocol

    关于ios object-c 类别-分类 category 的静态方法与私有变量,协议 protocol 2014-02-18 19:57 315人阅读 评论(0) 收藏 举报 1.category, ...

  4. iOS-MVVM--备用

    我会修改一个关键架构,并将其带入我从那时起就在开发的各种应用,即使用一种叫做 Model-View-ViewModel 的架构替换 Model-View-Controller. 所以,MVVM 到底是 ...

  5. [BZOJ 3238] [AHOI 2013] 差异 【后缀数组 + 单调栈】

    题目链接:BZOJ - 3238 题目分析 显然,这道题就是求任意两个后缀之间的LCP的和,这与后缀数组的联系十分明显. 求出后缀数组后,求出字典序相邻两个后缀的LCP,即 Height 数组. 那么 ...

  6. 【Java】Java Socket编程(1)基本的术语和概念

    计算机程序能够相互联网,相互通讯,这使一切都成为可能,这也是当今互联网存在的基础.那么程序是如何通过网络相互通信的呢?这就是我记录这系列的笔记的原因.Java语言从一开始就是为了互联网而设计的,它为实 ...

  7. IOS中用模型取代字典的好处

    使用字典的坏处 一般情况下,设置数据和取出数据都是用“字符串类型的key”,编写这些key时,编译器不会有任何友情提示,需要手敲 dict[@“name”]=@“Kevin”; NSString *n ...

  8. poj 1273 Drainage Ditches (网络流 最大流)

    网络流模板题. ============================================================================================ ...

  9. 图解linux下top命令的使用

    top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 本文通过一个运行中的 ...

  10. linux新内核中关闭硬盘的DMA

    vortex86 SIS550 Minit-5250E瘦客户机,使用CF卡启动,显示不支持DMA. 搜索得新内核已基本不再使用ide=nodma参数了,查到这篇文章:“Debian下关闭CF卡的DMA ...