css常見佈局方式
本文轉載於:猿2048網站css常見佈局方式
CSS常見佈局方式
以下總結一下CSS中常見的佈局方式。本人才疏學淺，如有錯誤，請留言指出。
如需轉載，請註明出處：CSS常見佈局方式
目錄：
- 使用BFC隱藏屬性
- float + margin
- absolute + margin
- 聖盃佈局
- 雙飛翼佈局
- flex佈局
以上5種方式都可以實現兩欄或三欄佈局
如果對BFC(塊級格式化上下文)概念不熟悉的朋友，可以先看看這篇文章。BFC深入理解
使用BFC隱藏屬性
在對需要自適應的元素BFC化，可以實現兩欄或三欄佈局
兩欄佈局 <aside class="aside1"></aside> <article class="main"></article> // 左邊固定寬度，右邊自適應 .aside1 { float: left; margin-right: 10px; width: 100px; height: 100vh; background-color: lightsalmon; } .main { overflow: hidden; height: 100vh; background-color: lightpink; }
如果要讓兩欄之間有空隙，可以給浮動元素設定margin-right值，也可以給自適應的主內容設定margin-left值。但設定margin-left時，需要考慮到aside的寬度。實現三欄佈局也是如此，給浮動元素設定margin值會方便一些。
三欄佈局 // 這裡要注意DOM的書寫順序問題。 <aside class="aside1"></aside> <aside class="aside2"></aside> <article class="main"></article> // 固定寬度 .aside1 { float: left; margin-right: 10px; width: 100px; height: 100vh; background-color: lightsalmon; } // 固定寬度 .aside2 { float: right; margin-left: 10px; width: 100px; height: 100vh; background-color: lightsalmon; } // BFC化自適應寬度 .main { overflow: hidden; height: 100vh; background-color: lightpink; }
使用BFC實現三欄佈局時需要注意的是DOM的書寫順序問題。如果將aside2與article交換位置，那麼aside2元素會被擠到article元素之下，無法實現三欄自適應佈局。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄佈局時會使元素出現掉下去的現象。
float + margin
在自適應寬度的元素上設定margin值，margin的值大於或等於固定寬度的值即可。實現思路與使用BFC隱藏屬性差不多。缺點：寬度小於aside寬度時，由於寬度不足的原因，三欄佈局時會使元素出現掉下去的現象。
兩欄佈局 <aside class="aside1"></aside> <article class="main"></article> .aside1 { float: left; width: 100px; height: 100vh; background-color: lightsalmon; } .main { margin-left: 110px; height: 100vh; background-color: lightpink; } 三欄佈局 // 注意，DOM順序不可改變 <aside class="aside1"></aside> <aside class="aside2"></aside> <article class="main"></article> .aside1 { float: left; width: 100px; height: 100vh; background-color: lightsalmon; } .main { margin-left: 110px; margin-right: 110px; height: 100vh; background-color: lightpink; } .aside2 { float: right; width: 100px; height: 100vh; background-color: lightsalmon; }
absolute + margin
// 使用position: absolute時，DOM元素順序並不重要。給左右兩欄定寬，主內容自適應寬度。缺點：側邊欄元素脫離文件流。優點：article元素可先載入。
<article class="main"></article>
<aside class="aside1"></aside>
<aside class="aside2"></aside>
.aside1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
.aside2 {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
.main {
margin: 0 110px;
height: 100vh;
background-color: lightpink;
}使用absolute + margin實現兩欄佈局時，只需要刪除對應的欄目即可。
聖盃佈局
聖盃佈局，為什麼叫聖盃佈局...其實我覺得很奇怪，倒不如叫float + 負margin + relative更貼切一下。實現思路如下
- 兩欄和自適應元素都設定同一方向的浮動(如float: left)
- 父元素設定左右padding為左右邊欄的寬度。
- 自適應元素設定寬度為100%
- 左邊欄margin-left為負100%，再設定relative，最後通過left屬性偏移負的自身寬度。
- 右邊欄margin-left為負自身寬度，再設定relative，最後通過right屬性偏移負的自身寬度。
// 與其他佈局不同，此佈局需要父元素
<div class="parent">
<article class="main"></article>
<aside class="aside1"></aside>
<aside class="aside2"></aside>
</div>
.parent {
padding: 0 100px;
// 左右邊欄的寬度，可適當縮小以增加每欄之間的距離
}
.main {
float: left;
width: 100%;
height: 100vh;
background-color: lightpink;
}
.aside1 {
float: left;
position: relative;
left: -100px;
margin-left: -100%;
width: 100px;
height: 100vh;
background-color: lightseagreen;
}
.aside2 {
float: left;
margin-left: -100px;
position: relative;
right: -100px;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}當然了，缺點也是有的。就是在寬度小於兩欄寬度時，元素會因為寬度不足而掉下去。
雙飛翼佈局
雙飛翼佈局與聖盃佈局相似。只不過少了relative與left, right的步驟和共同父元素，主內容元素多了層父元素。實現思路如下：
- 兩欄和自適應元素都設定同一方向的浮動(如float: left)
- main元素設定左右margin值，值為左右兩欄的寬度。main父元素設定寬度為100%
- 左邊欄margin-left為負100%
- 右邊欄margin-left為負自身寬度
<div class="main-wrap">
<article class="main"></article>
</div>
<aside class="aside1"></aside>
<aside class="aside2"></aside>
// 以下包含部分sass語法
.main {
margin: 0 100px;
height: 100vh;
background-color: lightpink;
&-wrap {
float: left;
width: 100%;
}
}
.aside1 {
float: left;
width: 100px;
margin-left: -100%;
height: 100vh;
background-color: lightseagreen;
}
.aside2 {
float: left;
width: 100px;
margin-left: -100px;
height: 100vh;
background-color: lightsalmon;
}flex佈局
flex佈局新出現的概念較多，有興趣的朋友可以到以下部落格看更為詳細的教程。使用flex來實現佈局，我個人認為是最簡單的方式。在移動端上，Android 4.4+以上、IOS 7.0+以上都支援flex佈局。而在PC端上，使用flex佈局時還是需要考慮一下的，因為到目前為止，IE11仍然只有部分屬性支援。