深入理解父元素与子元素的width关系

　　对于这一部分内容，如果理解准确，可以更容易控制布局，节省不必要的代码，这里将简单研究。

　

第一部分：父子元素都是内联元素

　　代码演示如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>fortest</title>
  5.     <style>
  6.         /*第一种情况：父元素与子元素均为内联元素时*/
  7.         span{
  8.             width:200px; /*失效，因为内联元素不可设置width和height*/
  9.         }
  10.         a{
  11.             width: %; /*失效，内联元素设置100%也是毫无意义的*/
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <span><a href="">父子元素width关系</a></span>
  17. </body>
  18. </html>

　　这时，我们在审查元素时可以发现，span和a的width（和height）的宽度是auto，即宽度是由其内容撑起来的，故为auto。

第二部分：父子元素都是块级元素

　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>fortest</title>
  5.     <style>
  6.         div.parent{
  7.             width: 500px;
  8.             height: 300px;
  9.             background: #ccc;
  10.         }
  11.         div.son{
  12.             width: %;
  13.             height: 200px;
  14.             background: green;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="parent">
  20.         <div class="son"></div>
  21.     </div>
  22. </body>
  23. </html>

　　这时，子元素设置为了父元素width的100%，那么子元素的宽度也是500px；

　　但是如果我们把子元素的width去掉之后，就会发现子元素还是等于父元素的width。也就是说，对于块级元素，子元素的宽度默认为父元素的100%。

补充：这里解释的不够清楚。实际上，当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值，下面的例子亦是如此。感谢博友laden666666的建议。

　　毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。

第三部分：父元素是块级元素、子元素是内联元素

　　　第一种情况：内联元素是一般的类型（img、input除外）

　　　　　毫无疑问，这种情况下，同样子元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。

　　　第二种情况：内联元素是input和img这样的可以设置width和height的类型

　　　　　对于这种情况可能稍显复杂，首先应当明白：为什么img是内联元素还可以设置它的宽和高呢？因为除了我们常常理解的块级元素和内联元素的分类方法，还有一种替换元素和不可替换元素的分类方法，可以将之分为替换元素和不可替换元素。

　　　　a) 替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容的元素。

　　　　　例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。(X)HTML中的　　　　<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：<img src=”cat.jpg” />  <input type="submit" name="Submit" value="提交" />  浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

　　　　b) 不可替换元素(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

　　　　<p>这是一个段落</p>，这个段落p就是一个不可替换元素，那么其中这是一个段落会被全部显示。

　　　　当时img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。

　　      而如果我们只设置了其高度，不设置宽度看看其表现时怎么样的吧，如下所示（原始图片的大小为1920X1080的图片）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>fortest</title>
  5.     <style>
  6.         div.parent{
  7.             width: 500px;
  8.             height: 300px;
  9.             background: #ccc;
  10.         }
  11.         img{
  12.             height: 100px;
  13.             background: green;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="parent">
  19.         <img class="son" src="http://img2.3lian.com/2014/c7/12/d/77.jpg"></img>
  20.     </div>
  21. </body>
  22. </html>

　　　　效果如下所示：

　　

　　由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。  同样， 如果只设置width，那么height也会等比例改变。   如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了，如下所示：

　　

　　而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。

　　

第四部分：同为块级元素的父元素与脱离文档流的子元素

　　第一种情况：float:left和float:right

　　　　如果将子元素设置为float:left或float：right，这时它就脱离了文档流，代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>fortest</title>
  5.     <style>
  6.         div.parent{
  7.             width: 500px;
  8.             height: 300px;
  9.             background: #ccc;
  10.         }
  11.         div.son{
  12.             float: right;
  13.             height: 100px;
  14.             background: red;　　
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="parent">
  20.         <div class="son"></div>
  21.     </div>
  22. </body>
  23. </html>

　　这时，我们就只能看到父元素，而通过审查元素可知，子元素为0X100，浮动在父元素的最右边。

　　第二种情况：position:absolute或position:fixed

　　　　同样，这种情况也是脱离正常文档流，导致width为0。

　　第三种情况:positon:relative

　　　　这种情况下，子元素并没有脱离文档流，所以此时width就成了默认的100%,宽度为500px。

第五部分：同为块级元素的子元素和脱离文档流的父元素

　　第一种情况：position:absolute或position:fixed

　　　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>fortest</title>
  5.     <style>
  6.         div.grand{
  7.             position: relative;
  8.             width: 1000px;
  9.             height: 600px;
  10.             background:pink;
  11.         }
  12.         div.parent{
  13.             position: absolute;
  14.             top:50px;
  15.             left: 50px;
  16.             width: 500px;
  17.             height: 300px;
  18.             background: #ccc;
  19.         }
  20.         div.son{
  21.             right: 10px;
  22.             height: 100px;
  23.             background: red;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="grand">
  29.       <div class="parent">
  30.           <div class="son"></div>
  31.       </div>
  32.     </div>
  33.  
  34. </body>
  35. </html>

　　效果如下：

　　

　　也就是说，这时，子元素同样是默认的100%相对与父元素，fixed时情况相同。

第二种情况:float:right或float:left

　　同上一种情况。

第三种情况:position:relative

　　同上面两种情况。

也就是说，父元素脱离文档流对子元素没有影响。

　　如果这篇文章有不足之处和遗漏之初希望大家批评指正。

　　注：原创文章，未经博主允许，不得转载。

深入理解子元素的width与父元素的width关系的更多相关文章

  1. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  2. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  3. CSS/块级元素与内联元素的深入理解

    今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:

  4. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  5. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  6. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  7. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  8. 在子页面操作父页面元素和iframe说明

    实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们 ...

  9. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

随机推荐

  1. 基于RFID恢复信号场

    学习RFID的核心是什么?难处在哪?:https://www.zhihu.com/question/26799106

  2. 编写高质量代码改善C#程序的157个建议——建议72：在线程同步中使用信号量

    建议72:在线程同步中使用信号量 所谓线程同步,就是多个线程在某个对象上执行等待(也可理解为锁定该对象),直到该对象被解除锁定.C#中对象的类型分为引用类型和值类型.CLR在这两种类型上的等待是不一样 ...

  3. 浅谈tcp_nodelay的作用

    今天在用nginx作web缓存的时候,发现在http里加入这样个参数,能有效的提高数据的实时响应性,那就是tcp_nodelay.下面我们来说说tcp_nodelay的原理: TCP_NODELAY和 ...

  4. 洛谷P1501 [国家集训队]Tree II（打标记lct）

    题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...

  5. python3操作Excel openpyxl模块的使用

    python 与excel 安装模块 本例子中使用的模块为: openpyxl 版本为2.4.8 安装方法请参看以前发表的文章(Python 的pip模块安装方法) Python处理Excel表格 使 ...

  6. Xamarin.Forms中 Navigation,NavigationPage详解

    1.Xamarin Forms下有四个成员类:Element,VisualElement,Page,NavigationPage 基类为Element,继承的子类分别是VisualElement,Pa ...

  7. 数独·唯一性技巧（Uniqueness）-2

    Hidden Rectangle(隐藏矩形) 在由候选数(AB)组成.可能形成UR结构的4格中,有2-3格存在额外的候选数,此时若以不存在额外候选数的一格为起点,检查其对角格所在的行和列,若该行和列其 ...

  8. C#设计模式系列：代理模式（Proxy Pattren）

    一.引言 在软件开发过程中,有些对象有时候会由于网络或者其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让 ...

  9. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  10. Java中获取运行代码的类名、方法名

    以下是案例,已运行通过 package com.hdys; /* * 1.获取当前运行代码的类名,方法名,主要是通过java.lang.StackTraceElement类 * * 2. * [1]获 ...