本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-02(2572)

2021-03(409)

2021-04(170)

2021-05(167)

2021-06(90)

圣杯双飞翼

发布于2021-12-05 17:03     阅读(1028)     评论(0)     点赞(5)     收藏(2)


圣杯布局与双飞翼布局

圣杯与双飞翼布局主要解决三列布局,要求中间内容优先渲染,左右内容宽度固定,中间内容宽度自适应

圣杯与双飞翼布局原理是利用浮动,负外边距以及相对定位来实现

1.圣杯布局

​ 圣杯的原理是将上中下三个容器包裹在一个父容器里,这里的重点是**#center容器要放在第一位**

​ **注意点:**圣杯布局的最小尺寸为2*200+200=600px,前一个200为#left容器的宽度,后一个200为#right容器的宽度,所以要设置#container的最小宽度为600px

<div id="container">
	<div id="center"></div>    
	<div id="left"></div>    
	<div id="right"></div>    
</div>
body {
        padding: 0;
        margin: 0;
    }

    #container {
        padding: 0 200px;
        min-width: 600px;
    }
    #center {
        height: 100px;
        background-color: darkcyan;
        float: left;
        width: 100%;
    }
    #left {
        height: 100px;
        background-color: blue;
        float: left;
        width: 200px;
        position: relative;
        left: -200px;
        margin-left: -100%;
    }
    #right {
        height: 100px;
        background-color: crimson;
        float: left;
        width: 200px;
        margin-right: -200px;
    }
2.双飞翼布局

双飞翼的原理是将#center放入#container中,设置#container,#left,#right左浮动,#container设置width:100%; #center设置左右margin为#left,#right的宽度,再使用margin-left调整#left,#right,代码如下:(当然不要忘记上面提到的最小宽度)

注意:这里的容器#container也要放在#left,#right的前面的

<div id="container">
    <div id="center"></div>    
</div>
<div id="left"></div>    
<div id="right"></div>    
<style>
    body {
        padding: 0;
        margin: 0;
    }
    #container {
        height: 100px;
        float: left;
        width: 100%;
        background-color: darkcyan;
    }
    #center {
        margin-left: 200px;
        margin-right: 200px;
    }
    #left {
        height: 100px;
        background-color: blue;
        float: left;
        width: 200px;
        margin-left: -100%;
    }
    #right {
        height: 100px;
        float: left;
        background-color: crimson;
        width: 200px;
        margin-left: -200px;
    }
</style>
3.flex布局

flex布局关键在于父容器使用display:flex;#center使用flex:1;

<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    #container {
        display: flex;
    }
    #center {
        background-color: darkcyan;
        flex: 1;
    }

    #left {
        height: 100px;
        background-color: blue;
        width: 200px;
    }

    #right {
        height: 100px;
        background-color: crimson;
        width: 200px;
    }
</style>
4.相对定位布局
<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    #container {
        position: relative;
    }
    #center {
        margin: 0 200px;
        background-color: darkcyan;
        width: 100%;
        height: 100px;
    }

    #left {
        height: 100px;
        background-color: blue;
        width: 200px;
        position: absolute;

    }

    #right {
        height: 100px;
        background-color: crimson;
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
5.总结:

1.圣杯与双飞翼布局优点兼容性好,但是要把center放在前面,不符合开发布局的排列(从左到右),flex布局兼容性差,低版本不兼容,硬要说相对定位的缺点就是要外层添加一个父元素包裹元素。

以上即是解决三栏布局4中解决方法,圣杯与双飞翼也解决中间部分优先加载的问题,因为#center在前面,符合dom树渲染规则。

原文链接:https://blog.csdn.net/yuanqi3131/article/details/121719607




所属网站分类: 技术文章 > 博客

作者:我喜欢css

链接:http://www.qianduanheidong.com/blog/article/247938/9d54bbe908cd13c31d1f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

5 0
收藏该文
已收藏

评论内容:(最多支持255个字符)