負邊距、三欄佈局

負邊距在讓元素產生偏移時和position: relative有什麼區別?

負邊距會讓接下來挨著的元素也產生位置偏移：

positioin:relative只會讓元素本身發生位置偏移，接下來的元素不會發生影響：

使用負 margin 形成三欄佈局有什麼條件?

1. 一個父元素和三個塊級子元素。
2. 父元素需要設定左右內邊距
3. 三個塊級元素都需要設定浮動，並且固定寬度。
4. 主要內容的塊級元素需要設定在最上方，保證優先渲染，並且寬度設定為100%。
5. 側邊欄設定負邊距

.聖盃佈局的原理是怎樣的? 簡述實現聖盃佈局的步驟

聖盃佈局指側邊欄定寬，中間自適應三欄佈局。主內容放在前面優先渲染。

1. 設定三欄式結構

   
   
   

   設定三欄式結構

2. 設定側邊欄寬度，中間欄寬度，並設定浮動。並且根據側邊框寬度設定父元素內邊距

   
   
   

   設定樣式
3. 設定左右側邊欄負邊距，並利用positioin:relative設定側邊欄位置
   
   

   為側邊欄進行定位

雙飛翼佈局的原理? 實現步驟?

雙飛翼佈局也是一個兩邊在父容器裡固定寬度，中間自適應的佈局。主內容放在前面優先渲染。

1. 設定三欄式結構,主內容需要有父元素包裹

   
   
   

   設定三欄式結構

2. 設定初始樣式，主內容父元素寬度設定為100%

   
   
   

   設定初始樣式

3. 設定側邊欄負邊距,以及根據側邊欄寬度設定主內容邊距

   
   
   

   定位

程式碼

github

1. 用浮動、負邊距實現如下效果
   
   
   
   程式碼一線上預覽
2. 使用聖盃佈局實現如下三欄佈局(兩側固定寬度200px,中間自適應)
   
   
   
   程式碼二線上預覽
3. 使用聖盃佈局的思路實現如下兩欄佈局
   
   
   
   程式碼三線上預覽
   4.使用雙飛翼佈局實現如下三欄佈局(兩側固定寬度200px,中間自適應)
   
   
   
   程式碼四線上預覽
   5.使用雙飛翼佈局的思路實現如下兩欄佈局
   
   
   
   程式碼五線上預覽

本文版權歸本人和飢人谷所有，轉載請註明來源。