1.負(fù)邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
負(fù)邊距會改變元素在文檔流中的位置,其他相鄰元素的位置也會隨之偏移;而相對定位只是相對自身原始位置進(jìn)行偏移,不會影響相鄰元素的位置。
2.使用負(fù) margin 形成三欄布局有什么條件?
(1)形成三欄的塊級元素都浮動;
(2)在三欄塊級元素的父容器上添加after來清除浮動;
(3)左側(cè)邊欄設(shè)置margin-left: -100%;右側(cè)邊欄設(shè)置margin-left: -自身的寬度;
(4)在父容器上設(shè)置padding;
(5)給兩邊側(cè)邊欄設(shè)置相對定位,左側(cè)邊欄再設(shè)置為left: -padding值;右側(cè)邊欄設(shè)置為left: padding值。
第二種方法:在主內(nèi)容里面添加一個區(qū)塊,再設(shè)置兩側(cè)邊欄的margin。
3.圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟
原理同使用負(fù)margin形成三欄布局是一樣的,步驟:
(1)形成三欄的塊級元素都浮動;
(2)在三欄塊級元素的父容器上添加after來清除浮動;
(3)左側(cè)邊欄設(shè)置margin-left: -100%;右側(cè)邊欄設(shè)置margin-left: -自身的寬度;
(4)在父容器上設(shè)置padding;
(5)給兩邊側(cè)邊欄設(shè)置相對定位,左側(cè)邊欄再設(shè)置為left: -padding值;右側(cè)邊欄設(shè)置為left: padding值。
4.雙飛翼布局的原理? 實現(xiàn)步驟?
(1)形成三欄的塊級元素都浮動;
(2)在三欄塊級元素的父容器上添加after來清除浮動;
(3)左側(cè)邊欄設(shè)置margin-left: -100%;右側(cè)邊欄設(shè)置margin-left: -自身的寬度;
(4)在主內(nèi)容區(qū)域里添加一個容器,形成一個區(qū)塊,以此覆蓋原來的主內(nèi)容區(qū)域,再設(shè)置兩側(cè)邊欄的margin。