深入理解父元素与子元素的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关系的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  9. jeecg项目子窗口获得父窗口元素id

    jeecg项目子窗口获得父窗口元素id, var parentWin = frameElement.api.opener;alert($(parentWin.document).find(" ...

随机推荐

  1. IO之同步、异步、阻塞、非阻塞

    Stevens在文章中一共比较了五种IO Model:    blocking IO    nonblocking IO    IO multiplexing    signal driven IO  ...

  2. CI框架学习——基本的用法(一)

    一.必备知识 1.如何访问你的页面 我在控制器下面建立了admin文件夹,此文件夹下有login.php 文件,我们现在要访问这个文件 http://localhost/gradesystem/ind ...

  3. CABasicAnimation 基本动画 分类: ios技术 2015-07-16 17:10 132人阅读 评论(0) 收藏

    几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...

  4. PowerShell学习小结

    1. 获取所有别名信息Get-Alias 2. 获取指定别名信息Get-Alias xx 3. 通过command name获得指定别名信息Get-Alias -Definition xx-xxx 4 ...

  5. 使用SSH搭建用户注册登录系统

    [转]http://blog.sina.com.cn/s/blog_a6a6b3cd01017c57.html 什么是SSH? SSH对应 struts spring hibernatestruts ...

  6. Grunt实现自动化单元测试

    http://www.tuicool.com/articles/rAnaYvn   直奔主题: 一.安装grunt-contrib-qunit npm install grunt-contrib-qu ...

  7. iOS 之 #import与#include的区别及@class

    #import 相比#include不会引起交叉编译. @class一般用于头文件中需要声明该类的变量时用到

  8. Canvas 图片灰度

    我们可以通过下面几种方法,将其转换为灰度: 1.浮点算法:Gray=R*0.3+G*0.59+B*0.11 2.整数方法:Gray=(R*30+G*59+B*11)/100 3.移位方法:Gray = ...

  9. 清理微信浏览网站的缓存,Cookie

    微信官方说明是取消关注,但是开发中发现取消关注缓存还是存在! 解决方法如下: 方法一: 用微信内置浏览器打开这个网页debugx5.qq.com ,就会有清除缓存的选项,如下图 方法二: 如果你用An ...

  10. Bootstrap入门(十八)组件12:徽章与巨幕

    Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展 ...