Padding和父子继承宽高之间的关系
1、父子之间宽高的继承关系
父亲有一个宽高，儿子若不设定宽高会继承，继承宽的100%，高度靠自己内容撑开。
2、padding对儿子宽的影响
看代码：
<style>
.father{
width:200px;
height:200px;
background:red;
}
.son{
background:purple;
}
</style>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
这个时候，儿子完全继承父亲的宽，高度有自己的内容高度撑开。运行结果：
这个时候，修改代码，在.son中加上padding-left:50px;会发现盒子宽度并没与改变。
<style>
.father{
width:200px;
height:200px;
background:red;
}
.son{
background:purple;
padding-left:50px;//新添加的
}
</style>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
运行结果如图所示：
可是如果你非要再给儿子加上一个width，无论是width:100%还是width:200px;这个时候，padding就会起作用。
<style>
.father{
width:200px;
height:200px;
background:red;
}
.son{
background:purple;
width:100%;//新添加的
padding-left:50px;
}
</style>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
运行结果：
总之，宽度最好能不写就不写。CSS细枝末节太多了吧！
Padding和父子继承宽高之间的关系的更多相关文章
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕）
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...
- js获取各种宽高方法
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- js各种宽高(1)
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- iOS 让UIButton根据文字内容自动计算宽高
Xcode自带的UIButton控件是没有办法根据文字内容计算自身的宽和高的,下面演示一下问题, 我用代码方式创建一个UIButton,并且设置了一些属性,下面看一下效果图 一切都是这么的美好,跟我们 ...
随机推荐
- linux tar包追加问题【转】
只能已归档的文件才能追加文件. 如果tar.gz文件是如此生成:#tar -zcvf test.tar.gz a.txt即tar.gz是压缩(-z)和归档(-c)文件,则无法给它追加文件:若果tar ...
- make: *** No rule to make target `out
按照google的指引,一路很顺,最后make -j5的时候出现:make: *** No rule to make target `dalvik/vm/mterp/out/InterpAsm-x86 ...
- jersey inject
http://stackoverflow.com/questions/27665744/how-to-inject-an-object-into-jersey-request-context
- asp之Eval()函数
运行字符串: a=Eval("1+1") 结果为:a=2 运行函数: function aa(a) aa=a+1 end function b=Eval("aa(2)&q ...
- UVA 571 Jugs ADD18 小白书10 数学Part1 专题
只能往一个方向倒,如c1=3,c2=5,a b从0 0->0 5->3 2->0 2->2 0->2 5->3 4->0 4->3 1->0 1- ...
- Windows快捷键大全（从XP到win8.1）
常见用法 F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F5 刷新 F10或ALT 激活当 ...
- 默认系统为UEFI启动的GPT分区的WIN7（8），如何安装VHD的UEFI WIN8（7）
默认系统为UEFI启动的GPT分区的WIN7(8),如何安装VHD的UEFI WIN8(7) 情况A:如果默认系统为UEFI启动.GPT分区的WIN7,想安装个VHD的UEFI WIN8.1 1:系统 ...
- 转：LoadRunner中参数化技术详解
LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...
- bat脚本：自动压缩n天前的文件【转载】
原文如下: bat脚本:自动压缩n天前的文件-中原小伙-ChinaUnix博客http://blog.chinaunix.net/uid-24946452-id-1651762.html 磁盘 ...
- 格式化一个文件的大小（size），或者说是格式化一个app的大小（size）
long number = 6243161; Formatter.formatFileSize(context, number): 需要导包,import android.text.format.Fo ...