- 負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
負(fù)邊距讓元素產(chǎn)生偏移會(huì)影響普通流；position: relative;讓元素產(chǎn)生偏移后會(huì)保留元素偏移前的空間，不會(huì)對(duì)結(jié)構(gòu)下面的元素產(chǎn)生影響。
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid;
margin: 30px auto;
}
.one{
width: 50px;
height: 50px;
background-color: #f00;
position: relative;
}
.two{
width: 50px;
height: 50px;
background-color: #f00;
}
.con{
width: 50px;
height: 50px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="fa">
<div class="box">
<div class="one"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="two"></div>
<div class="con"></div>
</div>
</body>```
偏移代碼
.one{top: -20px;}
.two{margin-top: -20px; }```
偏移后
- 使用負(fù) margin 形成三欄布局有什么條件?
- 兩側(cè)定寬，中間自適應(yīng)；
- 三個(gè)塊元素在同一個(gè)容器內(nèi)且子元素都需要浮動(dòng)；
- 設(shè)置負(fù)邊距后下面的元素可以上去。
- 圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
圣杯布局和雙飛翼布局的區(qū)別在于解決被覆蓋區(qū)域的方式不同。圣杯布局是兩側(cè)欄在父元素的幫助下改變被覆蓋者，“你的地盤(pán)太多了，我要收回一部分（padding），然后悄悄地給了另外一個(gè)或兩個(gè)孩子”；雙飛翼布局是被覆蓋者主動(dòng)求變，“看在兄弟的情分上，我讓你們留下，并且會(huì)給你們封地（margin），但是，普天之下莫非王土，地契是我的”。- 原理：負(fù)邊距+定位。margin-left為負(fù)值，且兩個(gè)元素不在一行的時(shí)候（可以用元素
float:left,width:100%實(shí)現(xiàn)）margin-left可以吃掉兄弟元素的margin。position: relative可以讓元素相對(duì)自身進(jìn)行偏移。 - 步驟：
- 給父元素設(shè)置
padding-left、padding-right分別等于左右欄對(duì)應(yīng)寬度，中間欄自適應(yīng)； - 利用負(fù)邊距
margin-left: -100%以及margin-left: -側(cè)邊欄寬度，讓下面元素上去； - 兩側(cè)欄設(shè)置
position: relative調(diào)整左右距離實(shí)現(xiàn)兩欄或三欄布局。
- 給父元素設(shè)置
- 原理：負(fù)邊距+定位。margin-left為負(fù)值，且兩個(gè)元素不在一行的時(shí)候（可以用元素
- 雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
- 原理：負(fù)邊距+被覆蓋內(nèi)容添加子div，并設(shè)置左右margin值。
- 步驟：使用負(fù)margin使下面的div浮動(dòng)上來(lái)，再給被覆蓋內(nèi)容的欄的內(nèi)部使用一個(gè)div，給這個(gè)div設(shè)置
margin-left或margin-right為左欄或右欄的寬度，實(shí)現(xiàn)兩欄或三欄布局。
