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

时间 2019-11-22

标签应届都会多种布局方法繁體版

原文原文链接

流体布局

.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值使中间模块宽度自适应浏览器

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

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负值的应用 flex

优势: 主体内容能够优先加载ui

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

圣杯布局

.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 结构相对简单，可是样式定义就稍微复杂，也是优先加载内容主体。
code

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>复制代码

优势: 简单实用，将来的趋势，string

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

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布局是一种新的布局方式，经过建立网格的方式实现布局，

缺点: 须要适配其余浏览器。

你的点赞是我持续输出的动力但愿能帮助到你们互相学习有任何问题下面留言必定回复