負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
- position:relative：相對(duì)于原位置進(jìn)行定位，元素不脫離文檔流,不影響后面的元素
- 負(fù)margin：元素文檔流的位置發(fā)生了變化,會(huì)影響到后面的元素蝎土。
使用負(fù) margin 形成三欄布局有什么條件?
- 三欄要放在一個(gè)父容器里蝙昙，而且三欄都要浮動(dòng)，父容器要清楚浮動(dòng)泞当。
- 位于中間可自適應(yīng)的元素需出現(xiàn)在最前面迹蛤，作為邊欄的兩個(gè)元素彼此前后順序可以顛倒。
- 兩邊側(cè)邊欄定寬襟士，中間部分寬度自適應(yīng)
圣杯布局原理及實(shí)現(xiàn)步驟
- 原理:利用浮動(dòng),負(fù)margin以及position:relative使側(cè)邊欄占據(jù)父元素的左右padding的空間笤受。
- 實(shí)現(xiàn)步驟:
- 1.在父容器下建立三欄,主體放在首位,三欄全部左浮動(dòng)
- 2.主體寬度為父元素100%,側(cè)邊欄寬度應(yīng)對(duì)照父容器padding(如需留間隙則寬度小于padding,不需要?jiǎng)t相等)
- 3.為邊欄設(shè)置負(fù)margin,左邊欄margin-left: -100%，右邊欄margin-left值等于該邊欄寬度的負(fù)值敌蜂。
- 4.設(shè)置position: relative,左邊欄left值為父容器padding負(fù)值箩兽；右邊欄，left值為父容器padding章喉。
- 5.父元素利用偽類元素after清除浮動(dòng)汗贫。
雙飛翼布局原理及實(shí)現(xiàn)步驟
- 原理:利用浮動(dòng),margin
- 實(shí)現(xiàn)步驟:
- 1.在父容器下建立三欄,主體放在首位,三欄全部左浮動(dòng)
- 2.主體寬度為父元素100%,側(cè)邊欄寬度自定義
- 3.為邊欄設(shè)置負(fù)margin,左邊欄margin-left: -100%身坐，右邊欄margin-left值等于該邊欄寬度的負(fù)值。
- 4.給主體建立一個(gè)子元素,子元素的左右margin應(yīng)對(duì)照側(cè)邊欄的寬度(如需留間隙則margin大于側(cè)邊欄寬度,不需要?jiǎng)t相等)
- 5.父元素利用偽類元素after清除浮動(dòng)落包。
