阅读 221

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

流体布局

.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布局是一种新的布局方式,通过创建网格的方式实现布局,

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

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


关注下面的标签,发现更多相似文章
评论