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. Javascript调用 ActiveXObject导出excel文档。

    function makeDataBook(){ var xls = new ActiveXObject ("Excel.Application"); xls.visible = ...

  2. Windows系统与Linux系统之间资源samba共享【转】

    配置SAMBA服务器来实现在Windows计算机与Linux计算机之间的用户级的资源共享,九河网络TOM[2694339173]教你怎样操作: SAMBA服务器的基本配置 配置SAMBA服务器来实现在 ...

  3. Linux常用Shell脚本珍藏【转载】

    我们在运维中,尤其是linux运维,都知道脚本的重要性,脚本会让我们的 运维事半功倍,所以学会写脚本是我们每个linux运维必须学会的一门功课,这里收藏linux运维常用的脚本.如何学好脚本,最关键的 ...

  4. androidstudio 问题

    Error:(1, 1) A problem occurred evaluating project ':app'. > Failed to apply plugin [id 'com.andr ...

  5. CDONTS组件

    在ASP中发送Email时往往需要一个COM组件支持,如果你没有第三方的Email组件,你可以使用IIS本身提供CDONTS EMail组件.这个组件使用时需要安装和启动SMTP服务.这个组件的名称为 ...

  6. 【转】RestQL:现代化的 API 开发方式

    原文:http://tech.meituan.com/koa-restql.html RestQL:现代化的 API 开发方式 李鑫 ·2016-08-12 11:26 koa-restql 已经在  ...

  7. 3个同一行div的摆放div

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 河南多校大一训练赛 G 硬币

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125004#problem/G 密码:acm Description 宇航员Bob有一天来到火星上,他有收集硬币 ...

  9. 转:loadruner报错:Step download timeout(120 seconds)的一个解决方法

    一个网友问了我一个问题如下:loadruner报错:Error -27728: Step download timeout (120 seconds) 如何解决语法检查通过,但是在并发执行一个查询时候 ...

  10. Elasticsearch head安装

    es5.0目前没有head插件所以不要下载错而是版本导致无法安装head; 安装head命令在es的bin目录下执行 ./plugin install mobz/elasticsearch-head ...