在寫(xiě)這篇文章之前筆者思考了很久，不知如何起手？后來(lái)想了想不就CSS布局這點(diǎn)事嘛，今天我們就來(lái)說(shuō)說(shuō)CSS一些常見(jiàn)的布局。
CSS用什么布局
- normal flow正常文檔流
- float + 清除浮動(dòng)
- position絕對(duì)定位
- flex布局
接下來(lái)我們就來(lái)演示幾個(gè)列子：
左右布局
1. 使用float實(shí)現(xiàn)
HTML代碼：
<div class="box clearfix">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
float: left;
}
.RightBox{
width: 200px;
height: 100%;
background: green;
float: left;
}
效果：
float左右布局
2. 使用position實(shí)現(xiàn)
HTML代碼：
<div class="box">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
position: relative;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
position: absolute;
top: 0px;
left: 10px;
}
.RightBox{
width: 180px;
height: 100%;
background: green;
position: absolute;
top: 0px;
left: 110px;
}
效果：
position左右布局
3. 使用flex實(shí)現(xiàn)
HTML代碼：
<div class="box">
<div class="LeftBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼一：
.box{
width: 300px;
height: 200px;
border: 2px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
}
.RightBox{
width: 180px;
height: 100%;
background: green;
}
效果：
flex左右布局效果一
CSS代碼二：
此種布局中左邊盒子寬度固定，右邊盒子寬度隨大盒子的寬度變化而變化
.box{
max-width: 300px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: center;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
flex-shrink: 0;
}
.RightBox{
width: 100%;
height: 100%;
background: green;
}
效果：
flex左右布局效果二
左中右布局
1. 使用float實(shí)現(xiàn)
HTML代碼：
<div class="box clearfix">
<div class="LeftBox"></div>
<dia class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.LeftBox{
width: 100px;
height: 100%;
background: red;
float: left;
}
.MiddleBox{
width: 200px;
height: 100%;
background: green;
float: left;
}
.RightBox{
width: 200px;
height: 100%;
background: yellow;
float: left;
}
效果：
float左中右布局
2. 使用position實(shí)現(xiàn)
HTML代碼：
<div class="box">
<div class="LeftBox"></div>
<dia class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
position: relative;
}
.LeftBox{
width: 180px;
height: 100%;
background: red;
position: absolute;
top: 0px;
left: 10px;
}
.MiddleBox{
width: 200px;
height: 100%;
background: green;
position: absolute;
top: 0px;
left: 200px;
}
.RightBox{
width: 180px;
height: 100%;
background: yellow;
position: absolute;
top: 0px;
right: 0px;
}
效果：
position左中右布局
3. 使用flex實(shí)現(xiàn)
HTML代碼：
<div class="box">
<div class="LeftBox"></div>
<div class="MiddleBox"></div>
<div class="RightBox"></div>
</div>
CSS代碼一：
.box{
width: 600px;
height: 200px;
border: 2px solid black;
display: flex;
justify-content: space-around;
align-items: center;
}
.LeftBox{
width: 180px;
height: 100%;
background: red;
}
.MiddleBox{
width: 180px;
height: 100%;
background: green;
}
.RightBox{
width: 180px;
height: 100%;
background: yellow;
}
效果：
flex左中右布局效果一
CSS代碼二：
此種布局中左右兩邊盒子寬度固定，中間盒子寬度隨大盒子的寬度變化而變化
.box{
max-width: 600px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: center;
}
.LeftBox{
width: 200px;
height: 100%;
background: red;
flex-shrink: 0;
}
.MiddleBox{
width: 100%;
height: 100%;
background: green;
flex-shrink: 1;
}
.RightBox{
width: 200px;
height: 100%;
background: green;
flex-shrink: 0;
}
效果：
flex左中右布局效果二
CSS居中技巧
說(shuō)完布局，接下來(lái)我們來(lái)講講CSS中關(guān)于居中的問(wèn)題，CSS中居中的方法有很多，而且難度不高，只要稍做鉆研就能靈活運(yùn)用！
1. text-align
在父容器里水平居中 inline 文字，或 inline 元素
2. margin
只要 margin: auto;在，塊級(jí)元素將垂直居中，top, left, bottom, right 可以設(shè)置偏移。常見(jiàn)用法：margin: 0 auto;此時(shí)塊級(jí)元素水平居中
3. padding
原理同上
4. line-height
與 height 聯(lián)手，垂直居中文字
5. flex
使容器內(nèi)部元素居中
.Flexbox {
display: flex;
align-items: center;
justify-content: center;
}
6. vertical-align
垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。
7. position + translate
translate(-50%,-50%) 比較奇特，百分比計(jì)算不是以父元素為基準(zhǔn)，而是以自己為基準(zhǔn)。
8. 絕對(duì)定位居中
父容器元素：position: relative
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
9. 視口居中
內(nèi)容元素：position: fixed，z-index: 999，父容器元素 position: relative
.Viewport-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}