Can I use? http://caniuse.com/ Less http://lesscss.org Cool Libraries Bootstrap from Twitter Jetstrap
给位于文档流中的.main 元素添加 margin-top 属性，但为什么脱离了文档流的.main-header 元素看起来似乎也同时受到了 margin-top 属性的作用？
manyfreebug 2020-02-11 13:47:25 +08:00 2072 次点击这是一个创建于 2070 天前的主题，其中的信息可能已经有所发展或是发生改变。
代码及运行效果也可在 JS Bin 中查看: https://jsbin.com/nolatakoto/edit?html,css,output 主要有两个疑问： 1、给位于文档流中的.main 元素添加 margin-top 属性， 但为什么.main-header 元素看起来似乎也同时受到了 margin-top 属性的作用？ 2、如果给 body 元素添加上 border 属性，此时.main-header 元素将回到设想中的位置， 为什么给 body 元素加上 border 属性就会发生这种变化呢？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" cOntent="width=device-width"> <title>JS Bin</title> </head> <body> <div class="main-header">Header</div> <div class="main">Main</div> </body> </html> body { margin: 0; /*border: 2px solid red;*/ } .main-header { position: absolute; background: #ccc; } .main { font-size: 50px; margin-top: 50px; background: blue; } 6 条回复 2020-02-11 16:41:52 +08:00
 | 1 rain0002009 2020-02-11 14:51:39 +08:00 别问了 大家都知道怎么决绝 很少有人知道为什么 |
 | 2 waiaan 2020-02-11 14:53:25 +08:00 BFC 了解一下（我也不理解） |
 | 3 rabbbit 2020-02-11 14:58:54 +08:00  1 margin 合并导致 margin-top 飞出去了 给 body 加个样式就清楚了 body {outline: 4px solid yellow; } |
 | 4 learnshare 2020-02-11 15:30:15 +08:00 1 >An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning |
 | 5 morethansean 2020-02-11 15:45:23 +08:00 1 涉及到绝对元素的定位、块级格式化上下文和外边距折叠。 这个不是 5 年前前端面试时候 css 盒模型必考内容之一么，为什么楼上说很少有人知道为什么…… |
 | 6 manyfreebug OP @rabbbit .main 元素与 body 元素产生了外边距重叠的现象，且.main-header 元素不存在应用了定位的祖先元素，因此该元素相对于紧邻的祖先元素（<body>元素）绝对定位。所以让.main-header 看起来也受到了 margin-top 的作用。 是这样？ |
Select Language