这是一个早之前研究过的东西,今天java开发提及了这个,顺带记录一下。
这里有一行代码,很简单的一段代码
<style type="text/css"> #div1{ background:#000; width:100px; height:100px; margin-top:10px; } #div2{ margin-top:20px; background:#f00; width:50px; height:50px; } </style> <div id="div1"> <div id="div2"></div> </div>
但是在浏览器中打开后,竟然是这个样子的~css
( 黑色的区块为div1,红色的为div2 )html
从效果上看div2的margin-top像是没有生效,经测量div1的margin-top值,发现这个div2的margin-top像是生效到div1上了。前端
就这几行代码写错是不大可能,那这又是怎么回事?java
以前遇到这个问题时,试遍了全部的浏览器,都是这个样子;我就觉着这是个兼容性极佳的BUG。git
后来一个偶然的机会发如今父级上增长border或者overflow:hidden是能够规避这个问题,且这个问题只会在常规流向中出现,也就是说用position或者是float都不会存在这个问题。github
整点原理规范什么的提升一下;百度一下,你就知道。。浏览器
在本规范中,表述边距重合意味着两个或多个框(可能相邻也可能嵌套)的相邻的边距(其间没有边白或边框间隔)重合在一块儿而造成一个单一的边距。
CSS2中,水平边距永远不会重合。
首先了解到这并非BUG,而是个规范,虽然看上去像是BUG
按着规范试一下,觉着仍是像是个BUG。前端框架
看规范是一目十行,过目就忘,仍是整理一下。框架
随笔一行
这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,老是会有一种斯人远去,何者慰籍的感受。互勉吧,各位。布局
另推荐个表格组件gridManager