為什么這個(gè)nav會(huì)掉下來(lái)呢？

我給#main加的margin-top啊為什么#nav會(huì)掉下來(lái)？
圖片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{margin:0 ;padding:0}
    html, body {
        position: relative;
        height: 100%;
    }
    html{-webkit-text-size-adjust:none;}
    #nav{width: 100%;height: 50px;background-color: blue;position: fixed;z-index: 999999999;}
    #main{min-height: 100%;width: 100%;margin-top: 50px}
    </style>
</head>
<body>
<div id="nav">
</div>
<div id="main">
</div>
</body>
</html>

回答

編輯回答

熊出沒(méi)

BFC（Block formatting context）了解一下，面試必考

你的body與#main的margin重疊了,你可以讓body生成BFC，使兩者邊距不重疊

滿足以下條件之一即可創(chuàng)建BFC(不全)

根元素或其它包含它的元素
浮動(dòng)元素 (元素的 float 不是 none)
絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中

2018年6月1日 06:11

編輯回答

逗婦惱

nav 作為 fixed 是根據(jù)其父元素鏈上第一個(gè)非 static position 的元素來(lái)定位的，
在這里會(huì)找到 body。
然后你可以看到 body 并不是沿著屏幕上邊緣定位的，這是因?yàn)?body 的內(nèi)容是從 #main 的內(nèi)容開始的，于是當(dāng) body 的子元素 #main 有一個(gè) margin-top 的時(shí)候，body 會(huì)擁有一個(gè)和他的子元素一樣的 margin-top。
所以平時(shí)應(yīng)該盡量不要給 body 的第一個(gè)子元素設(shè)置 margin-top，而是改成為 body 設(shè)置 padding-top。

如果幫到你請(qǐng)投 up 或者接受答案

2017年3月7日 16:45

編輯回答

貓小柒

一直在關(guān)注這個(gè)問(wèn)題，其實(shí)BFC和Margin Collapse才是正確的方向，所采納的答案只不過(guò)是表象-算作經(jīng)驗(yàn)而非知識(shí)，很難推而廣之。
關(guān)于BFC推薦一篇好文：理解BFC - Block formatting context
關(guān)于Margin Collapse先看一個(gè)定義

Css2.1規(guī)范：In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
中文潤(rùn)色一下是：所有毗鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之（合并時(shí)取其大的，不是相加）。毗鄰的定義為：同級(jí)或者嵌套的盒元素（即子元素和父元素之間也可能發(fā)生這個(gè)現(xiàn)象），并且它們之間沒(méi)有非空內(nèi)容、 Padding或Border分隔。

這就是所謂的Margin Collapse， body作為普通box容器，與其下緊鄰的非BFC box #main 發(fā)生margin collapse， #nav作為fixed box，默認(rèn)top是auto，其值以fixed元素出現(xiàn)在html中的位置為準(zhǔn)，而body因?yàn)楣蚕砹?main的margin，相當(dāng)于body上沿有個(gè)padding-top，導(dǎo)致 #nav默認(rèn)下移。

解決方案（或的關(guān)系）

給body加 overflow:hidden, 觸發(fā)它的BFC （從本例中body的height 100%也可以看出，設(shè)置一個(gè)overflow是恰當(dāng)?shù)模?/li>
給body加 padding 或 border，打破發(fā)生 margin collapse的條件
顯式的給 #nav更新 top屬性
給#main設(shè)置 postion:absolue, 或display:inline-block 觸發(fā)它的BFC
即使給#main和#nav再包一層，也要這層有設(shè)置 boder或者 padding 或者 overflow-hidden

2018年6月30日 15:21

編輯回答