- 負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
-
position:relative,元素偏移后脫離的文檔流殴边，但元素原來的位置仍然占據(jù)文檔流中援奢，不會(huì)影響之前的文檔流兼犯，其之后的元素仍然會(huì)認(rèn)為定位元素在文檔流中而跟隨在后面。
position:relative -
負(fù)margin：元素偏移后并沒有脫離文檔流集漾，位置變化影響了文檔流切黔，之后的元素按文檔流的排列特征也會(huì)跟著偏移
負(fù)margin - 使用負(fù) margin 形成三欄布局有什么條件?
1 必須設(shè)置浮動(dòng)
2 父容器下有三個(gè)塊級(jí)元素
3 中間的子元素寬度設(shè)置為父容器寬度的100%
4 左右兩欄的子元素設(shè)置負(fù)邊距 - 圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟
-
圣杯布局是一個(gè)兩邊在父容器里頂寬，中間自適應(yīng)的布局并且中間主內(nèi)容首先渲染具篇。設(shè)置三個(gè)div浮動(dòng)纬霞，左右兩欄加上負(fù)margin使其與中間欄并排。然后中間欄設(shè)置左右padding驱显，再對(duì)兩個(gè)邊欄使用position: relative屬性并設(shè)置left定位使其不遮擋中間欄诗芜。
1 寫好一個(gè)三欄HTML結(jié)構(gòu)
圣杯布局HTML結(jié)構(gòu)
2 使用浮動(dòng)與負(fù)margin寫好一個(gè)三欄并排的布局
三欄并排
3 給父容器設(shè)置左右padding，然后給兩個(gè)邊欄設(shè)置position: relative; 并設(shè)置left值定位到父容器的兩邊頂寬埃疫。
圣杯布局
4 設(shè)置圣杯布局的兩欄布局只需要?jiǎng)h除父容器的右內(nèi)邊距
刪除父容器右內(nèi)邊距形成圣杯兩欄布局
- 雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
-
雙飛翼布局也是一個(gè)兩邊在父容器里頂寬绢陌，中間自適應(yīng)的布局并且中間主內(nèi)容首先渲染。設(shè)置三個(gè)div浮動(dòng)熔恢，左右兩欄加上負(fù)margin使其與中間欄并排的布局脐湾。區(qū)別在于雙飛翼布局中間的div設(shè)置了子div來放置內(nèi)容，在這個(gè)子div里設(shè)置了margin來給兩邊的div留出了位置叙淌。
1 寫好一個(gè)三欄HTML結(jié)構(gòu)秤掌，與圣杯不同的是在主內(nèi)容里增加一個(gè)子div
雙飛翼HTML結(jié)構(gòu)
2 使用浮動(dòng)與負(fù)margin寫好一個(gè)三欄并排的布局
雙飛翼三欄并排
3 給中間欄設(shè)置左右margin值形成雙飛翼布局
給中間欄設(shè)置左右margin值形成雙飛翼布局
4 雙飛翼布局形成兩欄布局只需要?jiǎng)h除一邊側(cè)欄并且刪除主內(nèi)容的一邊外邊距
刪除一欄和一側(cè)外邊距
代碼
1 用浮動(dòng)、負(fù)邊距實(shí)現(xiàn)如下效果 參考
2 使用圣杯布局實(shí)現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng))
3 使用圣杯布局的思路實(shí)現(xiàn)如下兩欄布局
4 使用雙飛翼布局實(shí)現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng))
5 使用雙飛翼布局的思路實(shí)現(xiàn)如下兩欄布局
本博客版權(quán)歸 本人和饑人谷所有鹰霍，轉(zhuǎn)載需說明來源
