在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug.

bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上.

下面是body里的代码:

<div class="red">

    <div class="black"></div>

 </div>

style里的代码:

<style>

  .red{

    background: red;

    width: 200px;height: 200px;

  }

.black{

    background: black;

    width: 100px;  height: 100px;

    margin-left: 50px;

    margin-top: 50px;

   }

</style>

像上面这样,black里的margin-top不会作用在black上,而是作用在red上.

通过测试发现,当给父级元素添加边框的时候可以消除该bug,但是添加边框会影响盒子的大小,如果使用的话需要重新计算盒子各部分的大小,不实用.当给父级元素添加over-flow:hidden时也可以消除该bug,使其正常作用在black子级元素上.还有一个方法是将当前black元素改变成内联块级元素,但是在特殊情况下会影响页面的布局,不推荐使用.这就是在简单基础上的解决办法,毕竟是初学,无法用更高深的知识技术来解决,期待以后学会更高级的解决办法.

下面是使用overflow:hidden;实现的解决办法:

 <style>

   .red{

     background: red;

     width: 200px;height: 200px;

     /*overflow: hidden;*/

   }

   .black{

     background: black;

     width: 100px;  height: 100px;

     margin-left: 50px;

     margin-top: 50px;

   }

   </style>

 </head>

 <body>

   <div class="red">

     <div class="black"></div>

   </div>

 </body>

另外两个方法就不示范了.

初学html,请各位多多指教.

margin的BUG的更多相关文章

  1. margin的BUG(2)

    继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示. 具体表述为:先建立两个div1和div2 <div cl ...

  2. margin 相关 bug 系列

    原文地址:margin系列之bug巡演 by @doyoe IE6浮动双倍margin bug 这当是IE6最为经典的bug之一. 触发方式 元素被设置浮动 元素在与浮动一致的方向上设置margin值 ...

  3. IE7 浏览器下面设置text-indent属性变成margin属性BUG

    问题来源 今天做项目的时候发现了一个问题,在使用text-indent属性对元素进行缩进是发现在360浏览器下发生了元素偏移,跟margin-left的效果一样,打开f12发现3607.1浏览采用的i ...

  4. margin 塌陷bug 触发bfc

    1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...

  5. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  6. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  7. 不要告诉我你懂margin

    分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了 ...

  8. _margin和margin的区别

    _margin和margin的区别 _margin和margin的区别 Question: margin:15px 300px 0px 100px; height:72px; width:188px; ...

  9. IE常见的CSS的BUG（一）

    2011年6月,我毕业了.2012年我接触了CSS,本以为会好过些能赚点钱了,可谁知,Internet Explorer(下称IE),这个前端工程师的噩梦浏览器让我不再那么好过了.各种出现在IE身上的 ...

随机推荐

  1. 小白日记48：kali渗透测试之Web渗透-XSS（二）-漏洞利用-键盘记录器，xsser

    XSS 原则上:只要XSS漏洞存在,可以编写任何功能的js脚本 [反射型漏洞利用] 键盘记录器:被记录下的数据会发送到攻击者指定的URL地址上 服务器:kali 客户端 启动apache2服务:ser ...

  2. SQL操作XML

    前面一段时间为了赶项目的进度,一直在加班,现在空闲了下来将前面碰到的问题整理了一下,发现了一些十分有用的,在此记录下来,看能不能帮助到遇到同样问题的朋友,此文仅是自己个人的意见,若存在问题,还望不宁赐 ...

  3. 数据结构【二】：简单阻塞队列BlockingQueue

    在POSIX多线程[一]:简单队列simple queue的基础上使用内部互斥锁和条件变量来控制并发以达到线程安全的目的,其主要用于 [生产者-消费者] 队列. 1.BlockingQueue初始化时 ...

  4. jstree 插件的使用笔记（一）

    官方:http://www.jstree.com/  一.节点的描述 官方资料:http://www.jstree.com/docs/json/ 格式一 { id : "string&quo ...

  5. Oracle基础 exp/imp 数据泵导入/导出 命令

    一.导出方式: 使用exp/imp方式导出数据分为四种方式: 1.表方式导出:一个或多个指定的表,包括表的定义.表数据.表的所有者授权.表索引.表约束,以及创建在该表上的触发器.也可以只导出结构,不导 ...

  6. CENTOS如何禁用ROOT本地或远程SSH登录

    下面详细描述如何禁止root登录. 禁止root本地登录 禁止root远程ssh登录 禁止root本地登录 修改/etc/pam.d/login文件增加下面一行   1 auth required p ...

  7. Android achartengine统计图

    最近在安卓2.2上写个实时的监控程序,要用到统计图.从网上搜了下 Java4Less (http://java4less.com/charts/chart.php?info=android)     ...

  8. 在phalcon框架下，php接口规范以及接口实例

    接口规范实例 前言 由于本人也是第一次写接口,之前对于接口也是一知半解,没有系统的了解过,所以这次也是写的自己的在这几天在APP项目中关于接口的浅层次的认识,如果有不妥或者不当的地方还请指出,再此谢谢 ...

  9. html5 requestAnimationFrame制作动画：旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  10. list笔记总结

    1.list是一个复合的复制函数,可以将一个数组一次赋给多个变量.我们常用以下语句遍历一个数组. $arr = array('东','男','西','北'); while(list($k,$v)=ea ...