最全CSS各种布局详解

一、单列布局的实现

1、单列布局中最常用的水平居中的四种方法

• 同时设置父元素和子元素的样式：父元素使用text-align实现，子元素使用inline-block。这里宽高背景只是为了展示。

 .parent{
        text-align: center;
    }
 .child{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

• 使用margin:0 auto来实现，必须要设置一个width.

.child{
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

• 使用绝对定位，父元素使用相对，子元素绝对。

.parent{
        position: relative;
    }
.child{
        position: absolute;
        left: 50%;
    }

• 使用弹性盒flex布局实现
  弹性盒是专为不同尺寸和不同设备的元素排布而设计的。父元素中使用block:flex设置一个弹性盒，子元素中flex:number设置该子元素占一行中的几份。

    AA
    BB
    CC

弹性盒几乎能实现目前存在的所有布局，它还有很多的内容在这里也详细说一下。

 flex-direction:定义了排布是按行还是列。
 justify-content:对于弹性项没有填满弹性容器的时候，它定义弹性项是怎么对齐的。

二、多列布局

1、多列布局的“双飞翼布局”，即左右固定，中间自适应，他可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置。

    
main content

left
right


*{
        margin:0;
        padding: 0
    }
    .main{
        float: left;
        width: 100%;

    }
    .main .main-content{
        margin: 0 210px;
        background-color: rgba(33, 114, 214, 0.8);
        height: 500px
    }
    .left{
        width: 200px;
        float: left;
        background-color: rgba(255, 82, 0, 0.8);
        margin-left: -100%;
        height: 200px

    }
    .right{
        width: 200px;
        height: 200px;
        margin-left: -200px;
        float: left;
        background-color: rgba(90, 243, 151, 0.8);
    }

多列布局的“双飞翼布局”，也可以利用弹性盒实现，同样父元素设置display:flex, 子元素中左右固定栏设置为固定宽度，中间自适应部分设置flex:1.

    
left
    
main
    
right


 

2、真正的多列布局
借助margin为负值可以增加宽度的方式来进行多列布局。

    
1
    
1
    
1
    
1

同样我们也可以使用弹性盒布局

    
1
    
1
    
1
    
1

三、响应式布局

响应式布局在不同的大小的屏幕上如何做出不同的布局，视口指的是浏览器窗口的可视区域，视口大小决定了页面布局的可用宽度，我们可以使用meta标签设置设置布局宽度等于设备宽度,布局viewport等于度量viewport.

此时，页面布局的宽度就是你的设配的宽度。

使用媒体查询来实现响应设计（CSS3 media queries）

CSS3的media queries的模块扩展了@media的应用，不仅可以识别不同烦人媒体类型，还能识别媒体的特征——比如屏幕宽度，像素等参数。media queries语法：@media 媒体类型 媒体识别条件表达式。

@media handheld, (min-width:700px) and (orientation:landscape){
    
}

当使用有显示屏的设备的时候：当最小宽度<700px,或者是横屏的时候执行代码。

在三栏布局中使用响应设计

.row{
        width: 960px;
    }
    .row:after{
        clear: left;
        content: '';
        /*清除浮动*/
        display: table;
    }
    [class^='col']{
        float: left;
    }
    .col1{
        width: 25%;
    }
    .col2{
        width: 50%;
    }
    .col3{
        width: 75%;
    }
    /** 屏幕设备宽度大于1200的时候，row宽度固定为1170px**/
    @media (min-width: 1200px) {
        .row{
            width:1170px
        }
    }
    /** 平板电脑的设置**/
    @media (min-width: 768px) and (max-width: 979px){
        .row{
            width:724px
        }
    }
    /** 横屏手机或者竖屏平板的所有列按行排列**/
    @media  (max-width:767px){
        [class^='col']{
            float:none;
            width: 100%;
        }
        .row{
            width: 100%;
        }
    }
    /** 竖屏手机**/
    @media (max-width: 480px){

    }



    

        
header
    
    

        
q
        
w
        
e
    
    

        
footer