转载嵌套div中margin-top转移问题的解决办法
在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="background-color:#FF0000;width:300px; height:100px">上部层</div>
<div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->
<div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>
</div>
</body>
</html>
在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="background-color:#FF0000;width:300px; height:100px">上部层</div>
<div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->
<div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>
</div>
</body>
</html>
原因：盒子没有获得 haslayout 造成 margin-top无效
解决办法：
1、在父层div加上：overflow:hidden；
2、把margin-top外边距改成padding-top内边距 ；
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加： padding-top: 1px;
4、让父元素生成一个 block formating context，以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
相关推荐
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下： html: 复制代码代码如下:<div class=”logo”></div> <div class=”login_text”> <div id=”error” class=”errorstyle”></div> </div> css: ...
今天小组一同学做网站时，遇到一个关于margin-top兼容问题：有两个div,其中div1嵌套div2,而在div2里面设置margin-top后，在IE8、ff和chrome下显示的效果竟然不是想要出现的结果，而在IE7下面效果正确。
在CSS布局中，margin塌陷是指在嵌套元素中，子元素的上外边距（`margin-top`）与父元素的上外边距重合时，它们不会简单地叠加，而是会合并成一个外边距。这种合并会导致子元素相对于父元素的位置不是预期中的那样。...
- 使用`<div>`元素嵌套来实现复杂的多列布局。 - `clear: both;`：清除所有浮动，避免后续元素受到浮动元素的影响。 #### 三、总结 通过以上示例可以看出，**DIV+CSS**提供了极其丰富的布局手段，无论是简单的...
DIV-CSS-必考题 CSS面试题目解析 1. 超链接访问过后 hover 样式不出现的问题...知识点解析：在 Firefox 中，嵌套 div 标签的居中问题可以使用 margin:auto 的方法来解决。这样可以在 Firefox 中实现 div 的居中放置。
border-top-style: solid; border-top-width: 10px; border-top-color: blue; border-right-style: dashed; border-right-width: 5px; border-right-color: green; border-bottom-style: dotted; border-...
本实例着重讲解如何利用`div+css`实现整体布局，并特别关注`float`属性的使用以及`div`的居中处理。 一、`div`元素的运用 `<div>`是HTML中的一个通用容器元素，用于组合其他HTML元素，为它们提供结构。在`div+css`...
以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。 <div class=content-block> <div class=box-container> <div ...
CSS 盒子模型结构是 div+css 技术的基础组成部分，它主要解决了传统的 table 表格嵌套问题。盒子模型可以看成是网页的一个区块，也可以看成是大区块中的一个“区块元素”。既然是区块，“盒子模型”自然就会占据...
B) 在Web布局中，任何位置嵌套或直接放置div都不会影响到原有的布局； C) 空的元素（如没有内容的p元素）不会影响原始的阅读排版。 在实际应用中，例如制作列表，可以通过设置.list元素的margin-top和margin-...
- 通过 `margin-left` 和 `margin-top` 的负值来调整 div 的中心位置。 - 最重要的是，设置 `display: flex;` 及其子属性 `justify-content: center;` 和 `align-items: center;` 来实现内容的水平垂直居中。 3. ...
### DIV+CSS布局详解 #### 一、概述 在现代Web开发中，**DIV+CSS布局**是一种常用的技术手段，用于构建网站结构和样式。它不仅能够帮助开发者更高效地组织网页内容，还能够实现更加美观的设计效果。本文将详细介绍...
- 可以通过嵌套多层`<div>`来实现更为复杂的布局效果。 - **示例代码**: ```css #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #bodycenter #dv1 { float: ...
4. 嵌套div垂直水平居中（通过margin）： 当外层div和内层div尺寸都固定时，可以使用负边距`margin`实现居中。例如： ```css .div5 { border: 1px solid red; height: 200px; width: 200px; } .div6 { ...
### DIV+CSS滑动门技术知识点详解 #### 一、滑动门技术概述 滑动门技术（Sliding Doors Technique）是一种使用HTML和CSS来创建复杂背景或图像的技术，尤其适用于按钮、导航栏等需要复杂视觉效果的设计。该技术的...
同时，为了使导航条不紧贴顶部，可以通过设置`margin-top:5px;`来增加一定的间距。 - **代码示例**： ```html <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> ...