CSS布局

CSS 布局基础

1. 水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

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

2. 垂直居中

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

• 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-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;
    }
    

            

            

    

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;
    }

    

        
#main
    
    
        
    

布局步骤:

1. 三者都设置向左浮动。
2. 设置main-wrap宽度为100%，设置两个侧栏的宽度。
3. 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
4. 设置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;
    }
    

        
侧边栏宽度固定
        
主内容栏宽度自适应
    
    

        
主内容栏宽度自适应
        
侧边栏宽度固定
    
    

        
左侧边栏宽度固定
        
主内容栏宽度自适应
        
右侧边栏宽度固定
    
    

        
第1个侧边栏宽度固定
        
第2个侧边栏宽度固定
        
主内容栏宽度自适应
    
    

        
主内容栏宽度自适应
        
第1个侧边栏宽度固定
        
第2个侧边栏宽度固定
    

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