margin折叠-从子元素margin-top影响父元素引出的问题

正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了!

html代码:

<div id="fatherbox">

  <div id="childbox">首页

  </div>

</div>

css样式:

#fatherbox{width:100%,height:64px;background-color:red}

#childbox{height:44px;margin-top:20px;background:yellow}

 

解决方法:

1.父元素添加padding-top样式;

2.父元素添加overflow:hidden样式;

3.父元素或子元素浮动;

4.给父元素添加boarder(看需求而定);

5.为父元素或子元素绝对定位;

6.在子元素前添加子div并设置height:1px和overflow:hidden样式(如果添加的是inline-block元素,需要改display为block)。

原理:margin折叠(Collapsing Margins)

毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。

这里的毗邻指没有上下padding-top,padding-bottom,border-top,border-bottom,元素内容不为空。

最常见的margin折叠是<p>元素并列时,每个p都有上下1em的margin,但相临的p只会显示1em的间隔而不是2em。

本例中两个div是父子关系,并且没有padding-top和border-top,即父元素和子元素上边重合。也属于毗邻的范畴,所以也出现了margin折叠,本例显示了子元素的margin-top;

 详细的margin重合计算可以参考这篇:http://www.cr173.com/html/17041_1.html

避免这个问题只要使条件不符合或者隐藏margin:给父元素加padding/border,父子间添加其他元素,或者设置为浮动,定位都行。

IE中的情况还没有具体测试过,后面补全。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flexible 弹性盒子模型之CSS flex-shrink 属性

实例 让第二个元素收缩到其他元素的三分之一&#xff1a; 效果预览 div:nth-of-type(2){flex-shrink:3;}浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 flex-shrink29.021.…

idea 新建的java项目没发run_IntelliJ IDEA创建普通的Java 项目及创建 Java 文件并运行的教程...

最近突然看到这篇几年前随手记录的文章&#xff0c;居然浏览量那么高。看来很多小伙伴也开始从 Eclipse 转到 IDEA&#xff0c;这里为了让大家更好的掌握 IDEA 的使用&#xff0c;我建议大家可以看看下面这个 IDEA 教程。首先&#xff0c;确保 IDEA 软件正确安装完成&#xff0…

如何在Maven中运行Ant目标?

maven-antrun-plugin允许我们在各种maven构建阶段中运行ant目标。 我将专门为具有开发环境的开发人员解释maven-antrun-plugin的非常实际的用法。 通常&#xff0c;使用maven build&#xff0c;您会将项目捆绑到war文件或ear文件中。 您可以使用maven-antrun-plugin直接将此w…

PHP基本知识

php为服务端的脚本语言&#xff0c;它的使用需要打开WAMP的开发环境&#xff0c;php也可以用制作网页的DW制作&#xff0c;文件需保存在wamp文件夹内的www文件夹里面。 嵌入php代码所使用的标签&#xff1a;<?php ?>&#xff1b; 运行php条件&#xff1a; 1.电脑上需…

java semaphore 等待_Java并发编程系列之Semaphore详解

简单介绍我们以饭店为例&#xff0c;假设饭店只有三个座位&#xff0c;一开始三个座位都是空的。这时如果同时来了三个客人&#xff0c;服务员人允许他们进去用餐&#xff0c;然后对外说暂无座位。后来的客人必须在门口等待&#xff0c;直到有客人离开。这时&#xff0c;如果有…

Java垃圾收集蒸馏

串行&#xff0c;并行&#xff0c;并发&#xff0c;CMS&#xff0c;G1&#xff0c;Young Gen&#xff0c;New Gen&#xff0c;Old Gen&#xff0c;Perm Gen&#xff0c;Eden&#xff0c;Tenured&#xff0c;Survivor Spaces&#xff0c;Safepoints和数百个JVM启动标志。 在尝试…

设计模式(二)模板方法模式

1.模版方法模式简介 模版方法模式介绍 在软件开发中&#xff0c;有时会遇到类似的情况&#xff0c;某个方法的实现需要多个步骤&#xff0c;其中有些步骤是固定的&#xff0c;而有些步骤并不固定&#xff0c;存在可变性。为了提高代码的复用性和系统的灵活性&#xff0c;可以…

题解 P2598 【[ZJOI2009]狼和羊的故事】

P2598 [ZJOI2009]狼和羊的故事 题目描述 “狼爱上羊啊爱的疯狂&#xff0c;谁让他们真爱了一场&#xff1b;狼爱上羊啊并不荒唐&#xff0c;他们说有爱就有方向&#xff0e;&#xff0e;&#xff0e;&#xff0e;&#xff0e;&#xff0e;” Orez听到这首歌&#xff0c;心想&am…

前端机试面试题

一、题目要求 1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。 2、使用CSS DIV实现页面布局&#xff0c;页面居中&#xff0c;文字颜色效果要求一致。40分 3、鼠标悬停时的动画效果。10分 4、“进入查看”标签与样式。10分 5、定义一个javascript数组&…

三分大法好

三分算法解决凸形或者凹形函数的极值&#xff1b; 如下图 lmid (Left Right) / 2 rmid (lmid Right) / 2; 如果lmid靠近极值点&#xff0c;则Right rmid&#xff1b; 否则(即midmid靠近极值点)&#xff0c;则Left lmid; 例题的话在我的博客相关分类中找. 转载于:https://w…

将内存消耗减少20倍

这将是另一个故事&#xff0c;与我们分享有关内存相关问题的最新经验。 该案例是从最近的客户支持案例中提取的&#xff0c;在该案例中&#xff0c;我们遇到了一个行为异常严重的应用程序&#xff0c;该应用程序因生产中的OutOfMemoryError消息而死亡。 在连接了Plumbr的情况下…

Flex 布局教程:实例篇

该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法。你会看到&#xff0c;不管是什么布局&#xff0c;Flex往往都可以几行命令搞定。 我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面&#xff0c;最多可以放置9个点。 下面…

Apache Server和JMeter调试

我一直在使用JMeter为生产服务器生成负载以测试我的应用程序。 该测试计划具有13个以上的HTTP采样器以发出不同的请求&#xff0c;并具有一个正则表达式提取器以从响应中提取一些值。 此值在连续的HTTP Sampler中使用。 这个测试用例简单而直接。 最初&#xff0c;我使用200个J…

Flexible 弹性盒子模型之flex

实例 让所有弹性盒模型对象的子元素都有相同的长度&#xff0c;忽略它们内部的内容&#xff1a; #main div{flex:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 …

java冒泡遍历对象_Java经典排序算法(冒泡、选择、插入)

排序算法说明排序说明对一序列对象根据某个关键字进行排序。术语说明稳定&#xff1a;如果a原本在b前面&#xff0c;而ab&#xff0c;排序之后a仍然在b的前面&#xff1b;不稳定&#xff1a;如果a原本在b的前面&#xff0c;而ab&#xff0c;排序之后a可能会出现在b的后面&#…

快速分类–三向和双枢轴

毫无疑问&#xff0c;Quicksort被认为是本世纪最重要的算法之一&#xff0c;并且它是许多语言&#xff08;包括Java中的Arrays.sort &#xff09;的事实上的系统排序。 那么&#xff0c;quicksort有何新功能&#xff1f; 嗯&#xff0c;除了我现在&#xff08;在Java 7发行了2…

在jekyll模板博客中添加网易云模块

最近使用GitHub Pages Jekyll 搭建了个人博客&#xff0c;作为一名重度音乐患者&#xff0c;博客里面可以不配图&#xff0c;但是不能不配音乐啊。 遂在博客里面引入了网易云模块&#xff0c;这里要感谢网易云的分享机制&#xff0c;对开发者非常友好&#xff1a; 1.每首歌曲…

线性规划对偶原理

留坑啊留坑。。 白天老师讲的都没听说过 晚上肯定整理不玩啊&#xff0c;&#xff0c;&#xff0c; 转载于:https://www.cnblogs.com/zwfymqz/p/8253842.html

java 18.9_Oracle: Java 11 (18.9 LTS) 正式上线!

美国时间9月25日&#xff0c;Oracle 官方表示&#xff0c; Java 11 (18.9 LTS) 正式上线!这是自 Java 8 后的第一个长期支持版本。Java 11 版本说明按照 Oracle 公布的支持路线图&#xff0c;Java 11 将会获得 Oracle 提供的长期支持服务&#xff0c;直至2026年9月。为了更快地…

CSS3新特性应用之用户体验

目录 背景与边框第一部分背景与边框第二部分形状视觉效果字体排印用户体验结构与布局过渡与动画源码下载 一、光标 新增加not-allowed光标&#xff0c;不允许访问隐藏光标&#xff0c;在触模应用上很有用&#xff0c;css2.1需要一个透明的图片来实现&#xff0c;而css3直接用…