CSS布局

2019-05-05 本文已影响0人明明你也一样

CSS 布局基础

1. 水平居中

子元素为行内元素还是块状元素，由于给行内元素设置宽高是无效的，这里只考虑块级元素宽度一定还是宽度未定，针对不同的情况采取的布局方案也不同。下面进行分析：

行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;

2. 垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定，子元素为单行内联文本：设置行高line-height等于父元素的height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:fixed(absolute)，然后设置margin:auto;
通用方案: flex布局，给父元素设置display:flex; align-items:center;。

3. 左右布局

使用浮动进行布局

    .clearfix::after{
        content:"";
        display:block;
        clear:both;
    }
    .right,.left{
        float:left;
    }
    <div class="clearfix">
            <div class="left"><div>
            <div class="right"><div>
    </div>

4. 左中右布局

双飞翼布局(float + 负margin + margin)是圣杯布局的升级版，所以这里不推荐圣杯布局。

原理说明：

双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

代码块：

    .main-wrap {        
        float: left;       
        width: 100%;   
    }  
    .sub {       
        float: left;        
        width: 190px;        
        margin-left: -100%;   
    }   
    .extra {        
        float: left;        
        width: 230px;        
        margin-left: -230px; 
    }
    .main {    
        margin: 0 230px 0 190px;
    }

    <div id="main-wrap" class="column">
        <div id="main">#main</div>
    </div>
    <div class="sub"></div>        
    <div class="extra"></div>

布局步骤:

三者都设置向左浮动。
设置main-wrap宽度为100%，设置两个侧栏的宽度。
设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

一些说明

圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px; ,可以实现sub+extra+main的布局。

5. 其他布局技巧

flex布局

参考资源

阮一峰的博客----flex布局语法
 阮一峰的博客----flex布局案例

以下是五种布局的flex布局代码：

    .layout {
        display: flex;
    }
    .layout__main {
        flex: 1;
    }
    .layout__aside {
        width: 200px;
    }
    <div class="layout">
        <aside class="layout__aside">侧边栏宽度固定</aside>
        <div class="layout__main">主内容栏宽度自适应</div>
    </div>
    <div class="layout">
        <div class="layout__main">主内容栏宽度自适应</div>
        <aside class="layout__aside">侧边栏宽度固定</aside>
    </div>
    <div class="layout">
        <aside class="layout__aside">左侧边栏宽度固定</aside>
        <div class="layout__main">主内容栏宽度自适应</div>
        <aside class="layout__aside">右侧边栏宽度固定</aside>
    </div>
    <div class="layout">
        <aside class="layout__aside">第1个侧边栏宽度固定</aside>
        <aside class="layout__aside">第2个侧边栏宽度固定</aside>
        <div class="layout__main">主内容栏宽度自适应</div>
    </div>
    <div class="layout">
        <div class="layout__main">主内容栏宽度自适应</div>
        <aside class="layout__aside">第1个侧边栏宽度固定</aside>
        <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    </div>

与之前所讲的几种传统布局方案相比，flex布局的代码可谓异常简洁，而且非常通用，利用简单的三行CSS即实现了常见的五种布局。