解决div布局中第一个div的margin-top在浏览器中显示无效果问题。

原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/

垂直外边距合并问题

别被上面这个名词给吓倒了,简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。

实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题,IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”,标准浏览器下查看 出现“bug”):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>

<body>
<div class="top"></div>
<div class="middle">
  <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
  <div class="secondChild"></div>
</div>
</body>
</html>

如果按照CSS规范,IE的“良好表现”其实是一个错误的表现,因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器 则会表现出“有问题”的外观。好了,如果你读过了上面W3Shcool的CSS外边距合并的文章后,就很容易讨论这个问题了。这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠

再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般说来这个问题解释到这里,大多数文章就不会再深入下去了,但作为一名实战开发者,最求的是知其然知其所以然,原本使用margin-top就是
为了与父元素隔开距离,而按照你这么一个解法,其实是一种“修复”,为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”,而强制在父元素上
使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且在页面设计稿里如果不需要
border-top加个上边框,这么一加反而画蛇添足,为以后修改留下隐患。

为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢?答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。

这里我根据上面的内容直接给出其解决方案:只需要把margin-top改为使用padding-top即可解决,避免了margin的折叠规范。

时间: 2024-10-20 14:40:01

解决div布局中第一个div的margin-top在浏览器中显示无效果问题。的相关文章

xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft">左栏固定宽度为200px</div> 2 <div class="dyright">右栏固定宽度为200px</div> 3 <div class="dycenter">中间自适应宽度</div> 2.cs

缩放窗口时随一个div宽度设置另一个div的宽度

1.获取页面的宽度 window.onresize=findDimensions;    function findDimensions() //函数:获取尺寸    {    //结果输出至两个文本框        $("#heightscrollbardivtwo").width($("#heightscrollbardiv").width()+22);    } 缩放窗口时随一个div宽度设置另一个div的宽度,布布扣,bubuko.com

css 鼠标放在一个div上,另一个div展示出来

鼠标放在一个div上,另一个div展示出来. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/* css 注释说明:设置图片边框为0 */ body{behavior:url("csshover

在一组降序排列的数组中插入一个数据,插入后,数组中数据依然按降序排列

分析: 1.数组固定,是一个倒序的数组 2.插入一个数据,这个数据插在哪呢,要比较,与数组中所有的元素比较,这里需要一个循环,因为是降序的数组,所以当第一次遇到比自己小的,那么这个位置就是要插入的位置 3.因为上一步被占了位置,那么从这个插入的数据开始,后面的原本的数据都得向右移一位 /** * */ package com.cn.u4; import java.util.Scanner; /** * @author Administrator *向有序数组中插入学员成绩 * 在一组降序排列的数

一个简单的全屏图片上下打开显示网页效果

打包下载地址:http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width:

网页开发一个div相对于另外一个div的精确定位的问题(以象棋的布局为例)

在网页开发的过程中,我们在布局上基本上都会采用div+css的形式,虽然css里面的百分号可以满足我们的div会相对于浏览器的大小发生变化,但是如果我要让一个多个div相对于一个div进行精确的定位,那么这个方法就有些吃力了,我最近再写一个网络象棋对战平台,就遇到了这个问题,就是如何让我的棋子(图片)精确地位于棋盘(图片)的相应的额精确位置呢?一开始,我也是想到了css的百分号定义,然后发现这个实现太难了,于是我最后采用的是javascript脚本,ok,先看一下我们的基本素材,这里有一个我自己

Umbraco -- 在Visual Studio中新建一个View 如何在Umbraco back office 中显示出来

在使用Umbraco中的过程中,遇到一个问题. 我在项目中(Visual Studio),添加了一个View---Test.cshtml. 然后进入到该Umbraco项目的back office, 在back office 的 Templates中,刷新之后,并没有发现这个view(Template). 为什么呢? 因为Umbraco back office 中的Template,是有一些相关的信息保存在数据库中的, 加载时,会根据数据表中的相关信息来加载这个Umbraco back offic

解决android手机EditText设置光标颜色,android:textCursorDrawable=&quot;@drawable/corner_cursor&quot; 华为手机无效果的问题

<EditText android:id="@+id/alertdialog_zhuan_zeng_friend_phone_Edt" android:layout_width="match_parent" android:layout_height="40dp" android:textCursorDrawable="@drawable/corner_cursor" android:singleLine="t

Div中嵌套一个div,怎么是里面的div居中?

盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位: