北京建网站软件,河南锦路路桥建设有限公司网站,手机软件开发者,北京网站建设需要花多少钱正在做一个手机端电商项目#xff0c;顶部导航栈的布局是一个div包含一个子div#xff0c;如果给在正常文档流中的子div一个垂直margin-top#xff0c;神奇的现象出现了#xff0c;两父子元素的边距没变#xff0c;但父div跟着一起往下走了#xff01; html代码#xff…正在做一个手机端电商项目顶部导航栈的布局是一个div包含一个子div如果给在正常文档流中的子div一个垂直margin-top神奇的现象出现了两父子元素的边距没变但父div跟着一起往下走了 html代码
div idfatherbox div idchildbox首页 /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中的情况还没有具体测试过后面补全。
