深入理解子元素的width与父元素的width关系
深入理解父元素与子元素的width关系
对于这一部分内容，如果理解准确，可以更容易控制布局，节省不必要的代码，这里将简单研究。
第一部分：父子元素都是内联元素
代码演示如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
/*第一种情况：父元素与子元素均为内联元素时*/
span{
width:200px; /*失效，因为内联元素不可设置width和height*/
}
a{
width: %; /*失效，内联元素设置100%也是毫无意义的*/
}
</style>
</head>
<body>
<span><a href="">父子元素width关系</a></span>
</body>
</html>
这时，我们在审查元素时可以发现，span和a的width（和height）的宽度是auto，即宽度是由其内容撑起来的，故为auto。
第二部分：父子元素都是块级元素
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
width: %;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</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的图片）：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
img{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<img class="son" src="http://img2.3lian.com/2014/c7/12/d/77.jpg"></img>
</div>
</body>
</html>
效果如下所示：
由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。 同样， 如果只设置width，那么height也会等比例改变。 如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了，如下所示：
而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。
第四部分：同为块级元素的父元素与脱离文档流的子元素
第一种情况：float:left和float:right
如果将子元素设置为float:left或float：right，这时它就脱离了文档流，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
float: right;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
这时，我们就只能看到父元素，而通过审查元素可知，子元素为0X100，浮动在父元素的最右边。
第二种情况：position:absolute或position:fixed
同样，这种情况也是脱离正常文档流，导致width为0。
第三种情况:positon:relative
这种情况下，子元素并没有脱离文档流，所以此时width就成了默认的100%,宽度为500px。
第五部分：同为块级元素的子元素和脱离文档流的父元素
第一种情况：position:absolute或position:fixed
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.grand{
position: relative;
width: 1000px;
height: 600px;
background:pink;
}
div.parent{
position: absolute;
top:50px;
left: 50px;
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
right: 10px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="grand">
<div class="parent">
<div class="son"></div>
</div>
</div> </body>
</html>
效果如下：
也就是说，这时，子元素同样是默认的100%相对与父元素，fixed时情况相同。
第二种情况:float:right或float:left
同上一种情况。
第三种情况:position:relative
同上面两种情况。
也就是说，父元素脱离文档流对子元素没有影响。
如果这篇文章有不足之处和遗漏之初希望大家批评指正。
注：原创文章，未经博主允许，不得转载。
深入理解子元素的width与父元素的width关系的更多相关文章
- 深入子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
- 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- CSS/块级元素与内联元素的深入理解
今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- 子元素z-index高于父元素兄弟元素z-index被遮挡问题
问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...
- Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
- 在子页面操作父页面元素和iframe说明
实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们 ...
- 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
随机推荐
- 【小梅哥FPGA进阶教程】第十一章 四通道幅频相可调DDS信号发生器
十一.四通道幅频相可调DDS信号发生器 本文由山东大学研友袁卓贡献,特此感谢 实验目标 实现多通道可调信号发生器 实验平台 芯航线FPGA核心板.ADDA模块 实验现象 实现基于FPGA的多通道可调信 ...
- hibernate缓存机制（转载）
缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...
- 使用Amazon Simple Queue Service(SQS) 实现简单的消息服务
一 引言 亚马逊Amazon作为云计算的领跑者推出了很多云服务,最近因为项目的原因,需要用到SQS服务,因此简要地写下这篇随笔,一来方便以后查阅,二来方便共享一些简单的操作. SQS即可以理解为一个 ...
- 自己动手设计并实现一个linux嵌入式UI框架
一直以来都是使用现成的UI框架,如微软的window.QT等,因为它有各种控件(如button.window.edit等)都已经封装实现好了.我们只要拿来用就是了,也一直认为它很神圣,没有深入了解它背 ...
- Ocelot Consul ACL
Ocelot允许您指定服务发现提供程序,并使用它来查找Ocelot正在将请求转发给下游服务的主机和端口.目前,这仅在GlobalConfiguration部分中受支持,这意味着所有ReRoute将使用 ...
- Commons包详解
Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.项目地址http://commons.apache.org/ Commons BeanUtils 提供 ...
- 徒手CPR心脏复苏
CPR 缩写于cardiopulmonary resuscitation. 在危难时刻,能救人救命,意义极其重大,赶紧学起来 成人的CPR 第一步:检查意识 靠近其耳朵,在两耳旁交替大声喊:「你怎么了 ...
- BZOJ 1562 [NOI2009] 变换序列
[NOI2009] 变换序列 [题解] 就是有一个序列,每个位置可以填两个数,不可重复,问最小字典序. 显然,可以建一个二分图,判合法就是找完美匹配. 那怎么弄最小字典序呢?有好多种解法,我这里给出了 ...
- hdu3089 Josephus again|快速约瑟夫环
题目链接:戳我 貌似是高一昨天的考试题T2?????感觉挺好玩的就搞了搞qwqwq 其实是HDU上面的题啦.... 对于普通的约瑟夫问题,大概是n个人围成一个环,从1开始报数,数到k,那个人出队,最后 ...
- python3 的zip（）函数
重点 https://blog.csdn.net/qq826364410/article/details/78259796 为啥会出现几个两个空列表????