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,并且设置了一些属性,下面看一下效果图 一切都是这么的美好,跟我们 ...
随机推荐
- SVN和GIT的使用
一.SVN通用流程 1.从服务器仓库的项目上右键拷贝项目地址,然后来到你的电脑桌面上右键“SVN checkout...”,这样就跟服务器建立了关联 2.如果有创建新文件,则右键选择“Tortoise ...
- 上传下载文件， 同时部署在webapps下， 而不是项目下，防止重新部署tomcat， 上传文件消失
前端上传 <a href='javascript:upload("+data[i].id+")' title='Upload Report'> <img src= ...
- mac 命令行读取 u盘
mac 系统命令行读取u盘
- 状压dp找寻环的个数 Codeforces Beta Round #11 D
http://codeforces.com/problemset/problem/11/D 题目大意:给你n个点,m条边,找该图中有几个换 思路:定义dp[i][j]表示i是圈的集合,j表示该集合的终 ...
- OpenGL----绘制立方体,定点数组与顶点缓冲
,立方体是很简单,但是这里只是拿立方体做一个例子,来说明OpenGL在绘制方法上的改进.从原始一点的办法开始一个立方体有六个面,每个面是一个正方形,好,绘制六个正方形就可以了. glBegin(GL_ ...
- Hibernate 系列教程5-双向多对一
主要讲解inverse和cascade的用法 cascade定义的是关系两端对象到对象的级联关系: 而inverse定义的是关系和对象的级联关系(管理外键的值). inverse 属性默认是false ...
- Codeforces 704A Thor 队列模拟
题目大意:托尔有一部手机可执行三种操作 1.x APP产生一个新消息 2.读取x App已产生的所有消息 3.读取前t个产生的消息 问每次操作后未读取的消息的数量 题目思路: 队列模拟,坑点在于竟然卡 ...
- Python作用域
以下依据Python 3 1.Python变量查找顺序为LEGB(L:Local,E:Enclosing,G:Global,B:Built-in). 2.实际上,在Python中,只有模块,类以及函数 ...
- pkgmgmt: Comparison between different Linux Systems..
found this page.. already done by precedents.. installation: aptitude install apt-get install yum in ...
- JavaScript（2）——对象属性、原型与原型链
对象属性.原型与原型链 哈哈哈,我的第二篇博客哟,说的是对象属性.原型与原型链.可能这些只是某些小点串联起来的,逻辑性没有很强.所以会对文章的可读性和理解性带来一些困扰.不过,今天我又前进了那么一小步 ...