应届生都会的多种布局方法

流体布局

.left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="right"></div>        
    <div class="center"></div>    
</div>

原理: 左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应

缺点: 主要内容无法最先加载，当页面内容较多时会影响用户体验

BFC 三栏布局

.left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
    }        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    overflow: hidden;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="right"></div>        
    <div class="center"></div>    
</div>

原理: BFC规则有这样的描述：BFC 区域不会与浮动元素重叠, 因此我们可以利用这一点来实现 3 列布局

缺点: 主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局

双飞翼布局

.container{            
    float: left;            
    width: 100%;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>    
</div>
<div class="left"></div> 
<div class="right"></div>

原理: 利用的是浮动元素margin负值的应用

优点: 主体内容可以优先加载

缺点: HTML代码结构稍微复杂点。

圣杯布局

.container{            
    margin-left: 100px;            
    margin-right: 100px;        
}        
.center{            
    float: left;            
    width: 100%;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    position: relative;            
    left: -100px;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    position: relative;            
    right: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>

和与双飞翼布局的区别: 与双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

Flex布局

.container{            
    display: flex;        
}        
.center{            
    flex-grow: 1;            
    height: 100px;            
    background: orange;        
    }        
.left{            
    order: -1; /* order属性定义项目的排列顺序 数值越小 排列越靠前 默认为0 */            
    flex: 0 1 100px; /* flex-grow flex-shrink flex-basis */            
    height: 100px;            
    background: red;        
}        
.right{            
    flex: 0 1 100px;            
    height: 100px;            
    background: blue;        
}        
/*            
    flex-grow属性定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大            
    flex-shrink属性定义了项目的缩小比例 默认为1 即如果空间不足 该项目将缩小            
    flex-basis属性定义了在分配多余空间之前 项目占据的主轴空间（main size） 
        浏览器根据这个属性 计算主轴是否有多余空间 它的默认值为auto 即项目的本来大小        
*/

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>

优点: 简单实用，未来的趋势，

缺点: 需要考虑浏览器的兼容性。

Table布局

.container{            
    display: table; /* 此元素会作为块级表格来显示（类似 <table>）表格前后带有换行符 */  
    width: 100%;        
}        
.left,        
.center,        
.right{            
    display: table-cell; /* 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */        
}        
.left{            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.center{            
    background: orange;        
}        
.right{            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="center"></div>        
    <div class="right"></div>    
</div>

缺点：无法设置栏间距

绝对定位布局

.container{            
    position: relative;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    position: absolute;            
    left: 0;            
    top: 0;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    position: absolute;            
    right: 0;            
    top: 0;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>

优点: 简单实用，并且主要内容可以优先加载。

网格布局(Grid布局)

.container{            
    display: grid;            
    grid-template-columns: 100px auto 100px;            
    /*                
        用于设置网格容器的列属性 其实就相当于列的宽度 当我们需要几列展示时                    
        就设置几个值 这个属性可以接收具体数值比如100px 也可以接收百分比值                    
        表示占据容器的宽度               
        需要注意的是: 当给容器设定了宽度时 
        grid-template-columns设定的百分比值是以容器的宽度值为基础计算的                    
        如果未设置宽度时 会一直向上追溯到设置了宽度的父容器 直到body元素。            
    */            
    grid-template-rows: 100px;            
    /*             
        用于设置网格容器的行属性 其实就相当于行的高度                 
        其特性与grid-template-columns属性类似             
    */        
    }        
.left{            
    background: red;        
}        
.center{            
    background :orange;        
}        
.right{            
    background: blue;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="center"></div>        
    <div class="right"></div>    
</div>

优点: Grid布局是一种新的布局方式，通过创建网格的方式实现布局，

缺点: 需要适配其他浏览器。

你的点赞是我持续输出的动力希望能帮助到大家互相学习有任何问题下面留言一定回复