如果不想看那么长,看下面这句话就好了。

刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好。亲测给父级加一个overflow不为visiable的属性就直接解决了,简单明了。

这是在做布局时的一个经典问题。那这个问题是怎么产生的呢?主要是合并margin的问题,红色层(子层)的margin-top与黄色层(父层)相合并,产生了共同的margin-top。其实合并margin还有其他的形式,比如说:

  1. 父层的margin-top与一系列子层中第一个层的margin-top合并
  2. 上层的margin-bottom与下层的margin-top合并,此时margin值为合并margin值中的最大值。至于负margin,就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin,就用0减去相邻margin的绝对值的最大值
  3. 层高为0时,自身的margin-top和margin-bottom合并

那如何解决这个问题呢,w3.org给出了思路:

  1. 一个浮动的盒与任何其它盒之间的margin不会合并(甚至一个浮动盒与它的流内子级之间也不会)
  2. 建立了新的块格式化上下文的元素(例如,浮动盒与’overflow’不为’visible’的元素)的margin不会与它们的流内子级合并
  3. 绝对定位的盒的margin不会合并(甚至与它们的流内子级也不会)
  4. 内联盒的margin不会合并(甚至与它们的流内子级也不会)
  5. 一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并,除非兄弟有空隙
  6. 一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并,如果该元素没有top border,没有top padding并且该子级没有空隙
  7. 一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并,如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
  8. 盒自身的margin也会合并,如果’min-height’属性为0,并且既没有top或者bottom border也没有top或者bottom padding,并且其’height’为0或者’auto’,并且不含行盒,并且其所有流内子级的margin(如果有的话)都合并了

简单的来讲,就是

  1. 都用float来定位(有条件要求,适用范围较广)
  2. 为父元素添加overflow不为visiable 的属性 (适用范围极广,推荐使用)
  3. 为元素添加border(一般不用)
  4. 使用绝对定位(适用范围较窄)
  5. 父元素增加padding-top属性(改变尺寸,不建议使用)

关于子元素的margin-top对父级容器无效的更多相关文章

  1. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)

    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...

  2. margin传递,子元素的上下margin会传递给父级

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  4. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  5. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  6. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  7. 行内元素的margin只能左右有效。上下无效。

    行内元素的margin只能左右有效.上下无效.

  8. width:100%与绝对定位同时存在,偏移出父级容器

    当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...

  9. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

随机推荐

  1. python爬虫实践教学

    i春秋作家:Mochazz 一.前言 这篇文章之前是给新人培训时用的,大家觉的挺好理解的,所以就分享出来,与大家一起学习.如果你学过一些python,想用它做些什么又没有方向,不妨试试完成下面几个案例 ...

  2. 【May Be DNK】JSON.parse() and JSON.stringify()的两个实用技巧

    结论 一.数据深拷贝 使用方法:JSON.parse(JSON.stringify(param)) let o = {a: 1, b: 2} let o1 = JSON.parse(JSON.stri ...

  3. javascript 模块化学习:Class打包出来无法实例化问题

    菜鸟初学前端,第一次尝试使用webpack, 目的是做一个lib,想用webpack + babel 自动化打包出来 es5 的js代码 模块中用到了Class,直接export{className} ...

  4. 套接字:Socket

    在进行通信之前,一般要先建立Socket连接,Socket编程是端到端的通信,往往意识不到中间经过了多少局域网,多少路由器,他能操作的是端到端协议之上的网络层和传输层. 在网络层,Socket函数可以 ...

  5. [Leetcode]134.加油站

    这一题是贪心不是模拟 是贪心不是模拟 是贪心不是模拟! 如果用模拟的做法会比较慢,也失去了做这一题的趣味了. 模拟的方法很简单,就是每一个加油站都做起点模拟一遍,试一下能不能完成一圈,能完成一圈就保存 ...

  6. odoo开发笔记 -- 后台代码什么时候需要注意编码格式

    (1)首先py文件中的注释 中文汉字 一定要加u' ' (2) 前端视图不是多对一的时候,只是普通的字符字段 后台取值 需要加 str装换 head_node_dic['ManualNo'] = st ...

  7. Linux下删除某些非法字符文件名的文件

    1.首先利用 ls -i 查找ID 2.find ./ -inum 20718697 -exec rm '{}' \;

  8. python多线程-Semaphore(信号对象)

    Semaphore(value=1) Semaphore对象内部管理一个计数器,该计数器由每个acquire()调用递减,并由每个release()调用递增.计数器永远不会低于零,当acquire() ...

  9. (转)Python中的上下文管理器和Tornado对其的巧妙应用

    原文:https://www.binss.me/blog/the-context-manager-of-python-and-the-applications-in-tornado/ 上下文是什么? ...

  10. 8皇后问题(c++/python实现)

    问题描述:在8*8的国际象棋盘上摆放8个皇后,使其不能互相攻击,即任何两个皇后都不能处于同一行.同一列或者同一斜线上,问有多少种摆法. 算法分析: 利用3个数组分表来标记冲突,数组a.b.c. a数组 ...