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和父子继承宽高之间的关系的更多相关文章

  1. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  2. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  3. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  4. NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)

    自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...

  5. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

  6. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  7. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  8. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  9. iOS 让UIButton根据文字内容自动计算宽高

    Xcode自带的UIButton控件是没有办法根据文字内容计算自身的宽和高的,下面演示一下问题, 我用代码方式创建一个UIButton,并且设置了一些属性,下面看一下效果图 一切都是这么的美好,跟我们 ...

随机推荐

  1. Entity Framework 学习高级篇1—改善EF代码的方法(上)

    本节,我们将介绍一些改善EF代码的相关方法,如NoTracking,GetObjectByKey, Include等. l         MergeOption.NoTracking 当我们只需要读 ...

  2. Androidndk开发打包时我们应该如何注意平台的兼容(x86,arm,arm-v7a)

    很多朋友在开发Android JNI的的时候,会遇到findlibrary returned null的错误,因为某种原因,so没有打包到apk中.下面浅析下引起该错误的原因以及平台兼容性问题. 一. ...

  3. JSP error: Only a type can be imported

    错误: [14] in the generated java file: [E:\apache-tomcat-7.0.63-windows-x64\apache-tomcat-7.0.63\work\ ...

  4. apicloud教程1 (转载)

    非常感谢APICloud官方给我版主职位,每天都看到很多朋友提出很多问题,我就借此机会写了一系列的教程,帮助大家从小白到高手之路.系列名称:<APICloud之小白图解教程系列>,会不定时 ...

  5. hiho#1128 : 二分·二分查找

    input 1<=n<=1e6 1<=k<=2*1e9 a1 a2 ... an 1<=an<=2*1e9 output k存在则输出k是第几大的数,否则输出-1 ...

  6. Lucene全文搜索 分组,精确查找,模糊查找

    http://zm603380946.iteye.com/blog/1827318 完全个人理解,如有更好的方法,欢迎一起讨论 LuceneUtils.java package com.zbiti.l ...

  7. HDU1874 最短路 SPFA

    最短路 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 24  Solved: 17 [Submit][Status][Web Board] Descr ...

  8. POJ 2186 Popular Cows tarjan缩点算法

    题意:给出一个有向图代表牛和牛喜欢的关系,且喜欢关系具有传递性,求出能被所有牛喜欢的牛的总数(除了它自己以外的牛,或者它很自恋). 思路:这个的难处在于这是一个有环的图,对此我们可以使用tarjan算 ...

  9. 在TTF字体中提取想要的文字

    工具地址:https://yunpan.cn/cSLhX5jXnxFZg  访问密码 8000 1. 确保你的电脑已经安装了Java环境(能运行Java命令),这是必须的. 2.复制要提取的源字体(j ...

  10. openstack镜像如何在vmware 环境中运行

    1.云镜像文件下载地址: http://sahara-files.mirantis.com/sahara-juno-spark-1.0.0-ubuntu-14.04.qcow2(安装有sahara-s ...