CSS布局方法及使用技巧

本文将介绍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; 
}

效果

多行文本垂直居中

其他小技巧

1. 终极技巧
   使用搜索引擎搜索：
   CSS 关键词 trick
   CSS 效果 generator
2. 实现图片水平垂直局中且自适应的方法

background-position: center center;
background-size: cover;

3. 鼠标悬停出现下划线并且不会晃动的方法

/*给原来的元素增加一个相同的透明下划线，解决悬浮晃动问题*/
border-bottom: 1px solid transparent;
}
/*增加悬浮效果-下划线*/
.topNavBar>nav>ul>li>a:hover{
border-bottom: 1px solid red;
}

4. 解决距离边框的上下距离不一致的解决办法

vertical-align: top;

效果

边框距离