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