CSS常見佈局解決方案
阿新 • • 發佈：2019-01-08
說起css佈局，那麼一定得聊聊盒模型，清除浮動，position，display什麼的，但本篇本不是講這些基礎知識的，而是給出各種佈局的解決方案。
水平居中佈局
首先我們來看看水平居中
1.margin + 定寬
?| 1 2 3 4 5 6 7 8 9 10 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
|
相必是個前端都見過，這定寬的水平居中，我們還可以用下面這種來實現不定寬的
2. table + margin
?| 1 2 3 4 5 6 7 8 9 10 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
|
display: table 在表現上類似 block 元素，但是寬度為內容寬。
- 無需設定父元素樣式 （支援 IE 8 及其以上版本）相容 IE 8 一下版本需要調整為 <table>
3.inline-block + text-align
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
|
- 相容性佳（甚至可以相容 IE 6 和 IE 7）
4. absolute + margin-left
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
|
- 寬度固定
- 相比於使用transform ，有相容性更好
5. absolute + transform
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
|
- 絕對定位脫離文件流，不會對後續元素的佈局造成影響。
- transform 為 CSS3 屬性，有相容性問題
6. flex + justify-content
?| 1 2 3 4 5 6 7 8 9 10 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
|
- 只需設定父節點屬性，無需設定子元素
- flex有相容性問題
垂直居中
1.table-cell + vertical-align
?| 1 2 3 4 5 6 7 8 9 10 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
|
- 相容性好(IE 8以下版本需要調整頁面結構至 table)
2.absolute + transform
強大的absolute對於這種小問題當然也是很簡單的
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
|
- 絕對定位脫離文件流，不會對後續元素的佈局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
- transform 為 CSS3 屬性，有相容性問題
同水平居中，這也可以用margin-top實現，原理水平居中
3.flex + align-items
如果說absolute強大，那flex只是笑笑，因為，他才是最強的。。。但它有相容問題
?| 1 2 3 4 5 6 7 8 9 10 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
|
水平垂直居中
1. absolute + transform
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
|
- 絕對定位脫離文件流，不會對後續元素的佈局造成影響。
- transform 為 CSS3 屬性，有相容性問題
2. inline-block + text-align + table-cell + vertical-align
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
|
- 相容性好
3. flex + justify-content + align-items
?| 1 2 3 4 5 6 7 8 9 10 11 |
<div
class="parent">
<div
class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>
|
- 只需設定父節點屬性，無需設定子元素
- 蛋疼的相容性問題
##一列定寬，一列自適應
1.float + margin
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div
class="parent">
<div
class="left">
<p>left</p>
</div>
<div
class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*間距可再加入 margin-left */
}
</style>
|
IE 6 中會有3畫素的 BUG，解決方法可以在 .left 加入 margin-left:-3px 當然也有解決這個小bug的方案如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div
class="parent">
<div
class="left">
<p>left</p>
</div>
<div
class="right-fix">
<div
class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*間距可再加入 margin-left */
}
</style>
|
此方法不會存在 IE 6 中3畫素的 BUG，但 .left 不可選擇， 需要設定 .left {position: relative} 來提高層級。 注意此方法增加了不必要的 HTML 文字結構。
傲嬌的程式設計師應該放棄太低版本的瀏覽器
2.float + overflow
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div
class="parent">
<div
class="left">
<p>left</p>
</div>
<div
class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
|
設定 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。BFC是什麼呢。用通俗的來講就是，隨便你在BFC 裡面幹啥，外面都不會受到影響 。此方法樣式簡單但不支援 IE 6
3 .table
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div
class="parent">
<div
class="left">
<p>left</p>
</div>
<div
class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*寬度為剩餘寬度*/
}
</style>
|
table 的顯示特性為每列的單元格寬度和一定等與表格寬度。 table-layout: fixed 可加速渲染，也是設定佈局優先。table-cell 中不可以設定 margin 但是可以通過 padding 來設定間距
4. flex
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div
class="parent">
<div
class="left">
<p>left</p>
</div>
<div
class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
|
- 低版本瀏覽器相容問題
- 效能問題，只適合小範圍佈局
我們在學會一列定寬，一列自適應的佈局後也可以方便的實現 多列定寬，一列自適應 多列不定寬加一列自適應 這裡我們不一一講解，大家自行嘗試，也可以鞏固前面學習的
等分佈局
1. float
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div
class="parent">
<div
class="column">
<p>1</p>
</div>
<div
class="column">
<p>2</p>
</div>
<div
class="column">
<p>3</p>
</div>
<div
class="column">
<p>4</p>
</div>
</div>
<style>
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
|
- 此方法可以完美相容 IE8 以上版本
2. flex
?|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|