負邊距、三欄布局

一、負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?

1.負邊距會改變元素在文檔流中的位置,而且相鄰的元素位置也會被改變。


示例

2.position:relative相對定位,會使自身元素發(fā)生偏移,但是之前占用的文檔流位置繼續(xù)保留,相鄰元素的位置不受影響。


示例

二、使用負 margin 形成三欄布局有什么條件?

1.左右側(cè)邊欄和居中的主內(nèi)容區(qū)塊均為浮動的塊級元素。
2.主內(nèi)容區(qū)塊放在最前面(文檔流優(yōu)先渲染),左右側(cè)邊欄隨后。
3.左側(cè)邊欄需設(shè)置負margin-left為100%,右側(cè)邊欄需設(shè)置margin-left為元素本身的寬度。

三、圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟

1.原理:圣杯布局是指左右兩邊側(cè)邊欄寬度固定,中間主內(nèi)容區(qū)塊寬度自適應(yīng)的布局方式。左右側(cè)邊欄區(qū)塊和中間主內(nèi)容區(qū)塊均設(shè)置浮動,然后中間主內(nèi)容區(qū)塊設(shè)置padding,使兩邊留出空白。左側(cè)邊欄區(qū)塊設(shè)置margin-left:-100%,右側(cè)邊欄區(qū)塊設(shè)置margin-left值為區(qū)塊本身的寬度再配合相對定位(position:relative)即可。
2.步驟

  • 第1步:先寫出圣杯布局的DOM結(jié)構(gòu)(三個塊級元素包裹在父容器中,兩邊的側(cè)邊欄寬度固定,中間的主內(nèi)容區(qū)塊寬度自適應(yīng))。


    第1步
  • 第2步:父容器中的三個塊級元素設(shè)置浮動,并設(shè)置父容器清理浮動。


    第2步
  • 第3步:設(shè)置第二個子元素margin-left:-100%,第三個子元素margin-left:-100px,側(cè)邊欄的兩個子元素會往上覆蓋中間主區(qū)塊元素。


    第3步
  • 第4步:設(shè)置父容器的padding:0 100px,再分別設(shè)置左側(cè)邊欄相對定位position:relative;left:-100px;右側(cè)邊欄相對定位position:relative;left:100px。這樣圣杯布局就完成了。


    第4步

四、雙飛翼布局的原理? 實現(xiàn)步驟?

1.原理:左右兩邊側(cè)邊欄寬度固定,中間主區(qū)塊內(nèi)容寬度自適應(yīng)的布局方式。跟圣杯布局的不同點在于雙飛翼布局的中間區(qū)塊需要再包裹一個子元素區(qū)塊做主內(nèi)容,然后使用margin值撐開兩邊的側(cè)邊欄,不需要使用相對定位(position:relative)。
2.步驟

  • 第1步:先寫出圣杯布局的DOM結(jié)構(gòu)(三個塊級元素包裹在父容器中,兩邊的側(cè)邊欄寬度固定,中間的主內(nèi)容區(qū)塊寬度自適應(yīng))。


    第1步
  • 第2步:父容器中的三個塊級元素設(shè)置浮動,并設(shè)置父容器清理浮動。


    第2步
  • 第3步:設(shè)置第二個子元素margin-left:-100%,第三個子元素margin-left:-100px,側(cè)邊欄的兩個子元素會往上覆蓋中間主區(qū)塊元素。


    第3步
  • 第4步:在主區(qū)塊中再設(shè)置一個子元素做主內(nèi)容區(qū)塊,并設(shè)置該子元素的左右margin值(值根據(jù)左右側(cè)邊欄區(qū)塊寬度而定)。雙飛翼布局就完成了。


    第4步
本教程歸本人和饑人谷所有,轉(zhuǎn)載需說明來源!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容