本文將介紹CSS的左右徐伐、左中右、水平募狂、垂直布局方法办素，還有一些CSS使用技巧角雷。我可要放大招啦！
左右布局
1.在目標(biāo)元素前float
2.引入clearfix類
3.在目標(biāo)元素前加上clearfix
HTML代碼
<!--左右布局-->
<div class="container-1 clearfix">
<div class="leftbox">左側(cè)</div>
<div class="rightbox">右側(cè)</div>
</div>
CSS代碼
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container-1 .leftbox{
float: left;
background: #77C3F2;
width: 500px;
height: 300px;
}
.container-1 .rightbox{
float: left;
background: #B6DBF2;
width: 500px;
height: 300px;
}
效果
左右布局
左中右布局
左中右布局與左右布局原理類似
HTML代碼
<!--左中右布局-->
<div class="container-2 clearfix">
<div class="leftBox">左側(cè)</div>
<div class="midBox">中間</div>
<div class="rightBox">右側(cè)</div>
</div>
CSS代碼
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container-2 .leftBox{
float: left;
background: #77C3F2;
width: 300px;
height: 300px;
}
.container-2 .midBox{
float: left;
background: #3A758C;
width: 300px;
height: 300px;
}
.container-2 .rightBox{
float: left;
background: #B6DBF2;
width: 300px;
height: 300px;
}
效果
左中右布局
水平居中布局
水平居中可以根據(jù)行內(nèi)元素性穿、定寬塊狀元素勺三、不定寬塊狀元素三種
1. 行內(nèi)元素水平居中
行內(nèi)元素要水平居中，可以通過在父級元素上設(shè)置text-align: center來實現(xiàn)
HTML代碼
<div class="container-3">
<a href="#">行內(nèi)元素居中</a>
</div>
CSS代碼
.container-3 {
text-align: center;
}
效果
行內(nèi)元素居中
2. 定寬塊狀元素水平居中
寬度確定的塊狀元素可以通過通過設(shè)置左右margin值為auto來實現(xiàn)居中
HTML
<div class="container-4">
定寬塊狀元素
</div>
CSS
.container-4{
width: 300px;
height: 300px;/*高度非必須*/
background: #FF6766;
margin-left:auto;
margin-right: auto;
}
效果
定寬塊狀元素水平居中
3. 不定寬塊狀元素水平居中
不定寬即寬度不確定需曾，面對這種塊狀元素可以通過更改塊狀元素的display為inline-block類型吗坚，再在父級元素上增加text-align: center來實現(xiàn)水平居中。但是這種布局方法呆万，會帶來一個新的問題商源，就是標(biāo)簽之間的換行符帶來的空白間距。解決方法大家可以參考這里《如何解決inline-block元素的空白間距》谋减。
HTML
<div class="container-5">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
CSS
.container-5{
text-align: center;
}
.container-5 li{
display: inline-block;
}
效果
不定寬塊狀元素水平居中
垂直居中布局
垂直居中也可以分為兩種情況：父元素高度確定的單行文本牡彻，父元素高度確定的多行文本。
1. 父元素高度確定的單行文本
只需將父元素的height與line-height設(shè)置為一直即可實現(xiàn)出爹。
HTML
<div class="container-6">
<h2>單行文本垂直居中</h2>
</div>
CSS
.container-6 h2{
height: 100px;
line-height: 100px;
background: #61AAE0
}
效果
單行文本垂直居中
2. 父元素高度確定的多行文本庄吼、圖片
可以使用插入 table (包括tbody、tr严就、td)標(biāo)簽总寻，同時在父元素設(shè)置 vertical-align：middle。
HTML
<table>
<tbody><tr><td class="container-7">
<div>
<p>多行</p>
<p>文本</p>
<p>垂直</p>
<p>居中</p>
</div>
</td></tr></tbody>
</table>
CSS
/*td標(biāo)簽?zāi)J(rèn)就是vertical-align:middle梢为，所以無需再設(shè)置*/
table td{
height: 300px;
background:#BE81F7;
}
效果
多行文本垂直居中
其他小技巧
-
終極技巧
使用搜索引擎搜索：
CSS 關(guān)鍵詞 trick
CSS 效果 generator - 實現(xiàn)圖片水平垂直局中且自適應(yīng)的方法
background-position: center center;
background-size: cover;
- 鼠標(biāo)懸停出現(xiàn)下劃線并且不會晃動的方法
/*給原來的元素增加一個相同的透明下劃線废菱，解決懸浮晃動問題*/
border-bottom: 1px solid transparent;
}
/*增加懸浮效果-下劃線*/
.topNavBar>nav>ul>li>a:hover{
border-bottom: 1px solid red;
}
- 解決距離邊框的上下距離不一致的解決辦法
vertical-align: top;
效果
邊框距離
