CSS常見佈局解決方案
說起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
|