本文将介绍CSS的左右、左中右、水平、垂直布局方法，还有一些CSS使用技巧。我可要放大招啦！
左右布局
1.在目标元素前float
2.引入clearfix类
3.在目标元素前加上clearfix
HTML代码
<!--左右布局-->
<div class="container-1 clearfix">
<div class="leftbox">左侧</div>
<div class="rightbox">右侧</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">左侧</div>
<div class="midBox">中间</div>
<div class="rightBox">右侧</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;
}
效果
左中右布局
水平居中布局
水平居中可以根据行内元素、定宽块状元素、不定宽块状元素三种
1. 行内元素水平居中
行内元素要水平居中，可以通过在父级元素上设置text-align: center来实现
HTML代码
<div class="container-3">
<a href="#">行内元素居中</a>
</div>
CSS代码
.container-3 {
text-align: center;
}
效果
行内元素居中
2. 定宽块状元素水平居中
宽度确定的块状元素可以通过通过设置左右margin值为auto来实现居中
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来实现水平居中。但是这种布局方法，会带来一个新的问题，就是标签之间的换行符带来的空白间距。解决方法大家可以参考这里《如何解决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设置为一直即可实现。
HTML
<div class="container-6">
<h2>单行文本垂直居中</h2>
</div>
CSS
.container-6 h2{
height: 100px;
line-height: 100px;
background: #61AAE0
}
效果
单行文本垂直居中
2. 父元素高度确定的多行文本、图片
可以使用插入 table (包括tbody、tr、td)标签，同时在父元素设置 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标签默认就是vertical-align:middle，所以无需再设置*/
table td{
height: 300px;
background:#BE81F7;
}
效果
多行文本垂直居中
其他小技巧
-
终极技巧
使用搜索引擎搜索：
CSS 关键词 trick
CSS 效果 generator - 实现图片水平垂直局中且自适应的方法
background-position: center center;
background-size: cover;
- 鼠标悬停出现下划线并且不会晃动的方法
/*给原来的元素增加一个相同的透明下划线，解决悬浮晃动问题*/
border-bottom: 1px solid transparent;
}
/*增加悬浮效果-下划线*/
.topNavBar>nav>ul>li>a:hover{
border-bottom: 1px solid red;
}
- 解决距离边框的上下距离不一致的解决办法
vertical-align: top;
效果
边框距离
网友评论