关于css中父元素与子元素之间margin-top的问题
之前在使用经常遇到下面的问题:
html:
<div class="top">
<div class="one">I'm the first!</div>
<div class="two">I'm the second!</div>
</div>
css:
.one{
width: 100px;
height: 100px;
background: red;
margin-top:20px;
}
.two{
width:100px;
height:100px;
background:blue;
}
.top{
width:200px;
height:300px;
background:gray;
}
显示结果:
.one与.top之间并没有实现margin-top的效果,这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。两个相邻的margin之间如果没有明确的界限(padding、border),则会发生重叠,重叠后相应的margin为较大的那个,上图中第二个div的margin-top与第一个div的margin-bottom之间没有界限,所以one的margin-bottom与two的margin-top重叠了,它们之间只有一个margin的距离,而父标签top的margin-top与one的margin-top之间也没有界限,所以两者也会重合,因为top的margin-top为0小于one的margin-top值,所以重叠后的值为后者。
解决方法:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;添加界限)
2、为父元素添加overflow:hidden;样式即可(让父元素成为BFC,内部布局不受外部影响)
3、为父元素或者子元素声明浮动(浮动元素的margin垂直方向不叠加)
4、为父元素添加border(添加界限)
5、为父元素或者子元素声明绝对定位(BFC)
关于css中父元素与子元素之间margin-top的问题的更多相关文章
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- C#中父窗口和子窗口之间实现控件互操作
很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- 父元素与子元素之间的margin-top问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...
- 父元素与子元素之间的margin-top问题(css hack)(转载)
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
随机推荐
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- 常用的PHP类库,PHP开发者必备【转】
PHP开发者常用的PHP类库和组件 PDF 生成器 FPDF - 这量一个可以让你生成PDF的纯PHP类库. Excel 相关 你的站点需要生成Excel?没有问题,下面这两个类库可以让你轻松做到这一 ...
- phpstudy打不开localhost(Apache)
1.先打开httpd.conf文件,打开httpd-vhosts.conf "Include conf/extra/httpd-vhosts.conf"的注释,启动服务时优先加载此 ...
- 【Hadoop】HDFS笔记(一):Hadoop的RPC机制
RPC(Remote Procedure Call, 远程过程调用)主要面对两个问题: 1.对象调用方式: 2.序列/反序列化机制. Hadoop实现的RPC组件依赖于Hadoop Writable类 ...
- 3-C++程序的结构1.2
对象的生存周期 可以分为静态生存周期和动态生存周期 1.静态生存周期 如果对象的生存期与程序的运行期相同,我们称它具有静态生存期.在文件作用域中声明的对象都具有静态生存期的.如果要在函数的块中声明具有 ...
- CodeForces 524C The Art of Dealing with ATM (二分)
题意:给定 n 种不同的钞票,然后用q个询问,问你用最多k张,最多两种不同的钞票能不能组成一个值. 析:首先如果要求的值小点,就可以用DP,但是太大了,所以我们考虑一共最多有n * k种钞票,如果每次 ...
- C#高级参数out,ref,params
在C#中通过使用方法来获取返回值时,通常只能得到一个返回值.因此,当一个方法需要返回多个值的时候,就需要用到ref和out,那么这两个方法区别在哪儿呢? out 当需要返回一系列返回值时可用out高级 ...
- Structure Streaming和spark streaming原生API访问HDFS文件数据对比
此文已由作者岳猛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Structure Stream访问方式 code examples import org.apache.sp ...
- html5代码如何转成小程序代码
插件源码 链接:https://pan.baidu.com/s/1pGY8ZsdESaQGEzoEgpb_Rw 提取码:s1ix 放到与pages文件夹同级目录下 js中调用 //引入 var wx ...
- E20180603-hm
breadth n. 宽度; 宽容; (知识.兴趣等的) 广泛; depth n. 深度; 深处,深海; 深奥,奥妙; 进深; deep adj. 深的; 深远的,深奥; 重大的,深刻的; 强烈的 ...