剖析width、height继承
在CSS这个一切皆为框的世界里，我们今天再来探究探究width与height。
我靠，width与height有什么好探究的，不就是设定元素的宽、高吗？大不了还要区分标准盒子模型和IE盒子模型的区别，申明文档类型，统一盒子模型，不就over啦。哈哈，的确也是这样的，不过width、height还有一特性哦，那就是继承，子元素通过设置百分比可以继承父元素的宽高。
因为盒子模型有两种，所以呢，下面我们就来分别看一看，width和height在这两种盒子模型中，到底是怎么继承父元素的。
*为了方便大家看出效果，以下demo中，子元素的width和height都只继承父元素一半的宽高，也就是50%。
| 一、content-box下 |
当你申明文档类型<!DOCTYPE html>后，它默认是标准盒子模型，也就是box-sizing:content-box。
下面我们来写个demo，两个div嵌套，父div和子div的margin、border、padding皆为0。效果图见下：
<!DOCTYPE html>
<head>
<title>width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin:0;
padding:0;
}
.parent {
width:80px;
height:80px;
background:#9FCD82;
}
.child {
width:50%;
height:50%;
background:#C8ECCC;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
子div的宽高的确是父div的一半。
下面我们将父div的padding设置为10像素，其他一切样式保持不动，效果图如下：
咦，我靠，怎么看上去子div的宽高不是继承父div的50%呢？！！
打开chrome调试器，我们来探其究竟。在调试器中点击父div，可以看见下图。
图中的1（最外层的绿色）为父div的padding，值为10像素；2（深灰绿色的方框）为父div的内容区content；3（浅灰蓝色的方框）为子div。
可以明显的看出，子div是继承了父div内容区域content宽高的50%，而不是padding+content。
接下来，我们再将父div的border设置为10像素，其他的margin、padding都为0。子元素保持不变，效果见下图
可以明显的看出，子div的宽高还是继承了父div内容区域的宽高。
margin是控制元素周围空间的间隔，所以与width、height无关。
小结：
|
标准盒子模型(box-sizing: content-box) |
|||
|
块级元素 |
margin |
border |
padding |
|
父元素 |
\ |
有 |
有 |
|
子元素 |
无 |
无 |
无 |
|
子元素的宽高通过百分比，只继承父元素的内容区域 content，父元素的border、padding不予考虑 |
|||
接下来，我们来看看，设定父div的margin、border、padding为0，子div的padding 设置为10像素，打开chrome调试器，点击子元素，效果见下图：
<!DOCTYPE html>
<head>
<title>width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin:0;
padding:0;
}
.parent {
width:80px;
height:80px;
background:#9FCD82;
}
.child {
width:50%;
height:50%;
background:#C8ECCC;
padding:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
图中1（深绿色方框）为父div，2（浅绿色方框）为子元素的padding，3（蓝色方框）为子元素的内容区域content。
可以看出，子div的宽高继承了父div的宽高，但是子元素的padding不包含在其中。
咦，是不是和上面讲解的父元素padding有异曲同工之处，那border是不是也这样呢？
答案：是的。
不信，你看，当我设置子div的border为10px时，margin、padding为0；父div的margin、border、padding还是为0，效果图见下
小节：
|
标准盒子模型(box-sizing: content-box) |
|||
|
块级元素 |
margin |
border |
padding |
|
父元素 |
\ |
无 |
无 |
|
子元素 |
\ |
有 |
有 |
|
子元素的宽高通过百分比，只继承父元素的内容区域 content，子元素的border、padding不予考虑 |
|||
你可能会说，我靠，这不是标准盒子模型吗？
标准盒子模型中的width本来就没有包括border和padding好不好，是的上面我讨论的是标准盒子模型(box-sizing:content-box)，接下来我们来看看IE盒子模型(box-sizing:border-box)是不是也是这样的呢？
| 二、border-box下 |
当你申明文档类型<!DOCTYPE html>后，它默认是标准盒子模型，也就是box-sizing:content-box，所以你得css reset一下，变成box-sizing:border-box。
还是两个div嵌套，先来看看将父div的padding设置为10像素，margin、border皆为0；子div的padding、border、margin皆为0。效果图见下
<!DOCTYPE html>
<head>
<title>width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.parent {
width:80px;
height:80px;
background:#9FCD82;
padding:10px;
}
.child {
width:50%;
height:50%;
background:#C8ECCC;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
咦，这是怎么回事，不是继承50%吗，怎么这么少。
打开chrome调试器，点击父div，得到下图
看见没这就是将box-sizing设置为border-box的结果，width包括了content + padding + border，所以实际的content为60 x 60。
再点击子div，看看会得到什么图
看见没？30 x 30!!哈哈，原来子div的width/height是继承了父div的content宽高，而不是width、height。
我靠，这不是和标准盒子模型是一样的了吗。
我们再来看看border，我将父div的border设置为10像素，margin、border皆为0；子div的margin、border、padding皆为0。看看效果，图下
图中清晰可见，子div的width、height也是只继承了父div内容区域content的宽高。
小节
|
IE盒子模型(box-sizing: border-box) |
|||
|
块级元素 |
margin |
border |
padding |
|
父元素 |
\ |
有 |
有 |
|
子元素 |
无 |
无 |
无 |
|
子元素的宽高通过百分比，只继承父元素的内容区域 content，父元素的border、padding不予考虑 |
|||
接下来，我们来设定，父div的margin、border、padding皆为0，子div的padding 、border变动。
子div的padding设置为10像素，border、margin为0。效果图见下：
<!DOCTYPE html>
<head>
<title>width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.parent {
width:80px;
height:80px;
background:#9FCD82;
}
.child {
width:50%;
height:50%;
background:#C8ECCC;
padding:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
咦，怎么子div的宽高会继承父div的宽高50%呢？打开chrome调试器看一看，选中父div元素，得下图
选中子元素div，得下图
通过两张图片的对比，可以发现，原来子div的width、height继承了父div的宽高，但是子div的width、height包含了子div的padding。
那么border是不是也和padding一样呢？
答案：是的。
不信？我将子div的border设置为10像素，margin、padding皆为0；父div保持不变，请看下图
哈哈，是的吧。
小节
|
IE盒子模型(box-sizing: border-box) |
|||
|
块级元素 |
margin |
border |
padding |
|
父元素 |
\ |
无 |
无 |
|
子元素 |
\ |
有 |
有 |
|
子元素的宽高通过百分比，只继承父元素的内容区域 content，子元素的border、padding包含在子元素的宽高中。 |
|||
综上所述，width、height的继承如下：
|
属性 |
box-sizing: content-box |
box-sizing: border-box |
|
width |
子元素的width通过百分比，只继承父元素的内容区域 content的width，子父元素的border、padding都不参与其中 |
子元素的width通过百分比，只继承父元素的内容区域 content的width，子元素的border、padding参与其中 |
|
height |
子元素的height通过百分比，只继承父元素的内容区域 content的height，子父元素的border、padding都不参与其中 |
子元素的height通过百分比，只继承父元素的内容区域 content的height，子父元素的border、padding参与其中 |
剖析width、height继承的更多相关文章
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- as3:sprite作为容器使用时，最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- 正则：img的url,width,height 和 a标签的url以及替换
代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...
- ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法
最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- [WPF系列]- Style - Specify width/height as resource in WPF
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...
随机推荐
- 第三周作业（三）：wc程序
本程序实现了统计文本档案中,文本单词数.字符数以及行数. 代码如下: #include<stdio.h> #include<stdlib.h> int linestatisti ...
- I/O Techie 社区 --欢迎您的加入
I/O Techie 社区 上线了,希望能聚集更多的软件开发者,提供给处于各个阶段的新鸟,老鸟更多的帮助和更好的服务. 链接:http://www.iotechie.info/ Google +:ht ...
- MSSQL数据库表加锁
所指定的表级锁定提示有如下几种: 1． HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2． NOLOCK:不添加共享锁和排它锁,当这个选项生效后,可 ...
- Windows7-USB-DVD-tool提示不能拷贝文件的处理
打开 Windows7-USB-DVD-tool所在目录的log/日志 01/28/2016 02:21:02: Drive selected, H:\; Ready01/28/2016 02:21 ...
- [转]定位占用oracle数据库cpu过高的sql
今天在吃饭的时候我的朋友的数据库出现了问题,cpu占用率为97%,当我看到这个问题的时候我就想到了或许是sql导致的此问题,由于忍不住吃饭,暂时没有帮他看这个问题,这是我饭后自己模拟的故障,进行的分析 ...
- 回忆那些我们曾今铭记过的.NET重点知识
正如标题所说的那样,到底是那些.NET的知识点呢? 接下来就让我带着你们去了解这些知识点吧! 1.接口 2.索引器 3.FOREACH的本质 4.匿名内部类 5.运算符的重载 一.什么是接口? ...
- Matlab 视频与图像之间的相互转换
matlab版本是2015b,其中更新了部分函数库之前网上相关程序不适用于新版本,在此提供适用于新版本的程序: 帧序列转换为视频 function video = frames2video(frame ...
- 浏览器全屏事件(Html5)
<button onclick="launchFullscreen(document.documentElement);"></button> functi ...
- 浅谈C#中常见的委托<Func,Action,Predicate>（转）
一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...
- 数据库中数据DELETE了怎样恢复
USE [BBDAS_FP_DATA] GO /****** Object: StoredProcedure [dbo].[Recover_Deleted_Data_Proc] Script Date ...