• 技术文章 >web前端 >css教程

    CSS什么是圣杯布局?

    青灯夜游青灯夜游2020-11-17 17:30:35原创74

    在CSS中,圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;三栏全部使用“float:left”浮动,并配合left和right属性。

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握。

    事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

    通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。注意:当你缩放页面的时候,宽度不能小于700PX,为了安全起见,最好还是给body加一个最小宽度!
    如果你有了那么一点理解以后,我们来看看圣杯布局的实现:

    注:reset部分的代码大家自行添加

    1、HTML结构:

    <header>
        <h4>Header内容区</h4>
    </header>
    <div class="container">
        <div class="middle">
            <h4>中间弹性区</h4>
        </div>
        <div class="left">
            <h4>左边栏</h4>
        </div>
        <div class="right">
            <h4>右边栏</h4>
        </div>
    </div>
    <footer>
        <h4>Footer内容区</h4>
    </footer>

    有人可能会有疑惑,为什么中间的主体部分要写在最前面。因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是width:100%。

    2、css样式:

    header{
        width: 100%;    height: 40px;
        background-color: #8ecfd4;
    }
    .container{
        overflow:hidden;
    }
    .middle{
        width: 100%;
        background-color: #f7f537;
        float:left;
    }
    .left{ 
        width: 200px;
        background-color: #37f7c8;
        float:left;
    }
    .right{
        width: 200px;
        background-color: #eb6100;
        float:left;
    }
    footer{
        width: 100%; 
        height: 30px;
        background-color: #8ecfd4;
    }

    此时的效果图:

    这时中间的三栏并没有在一行内显示,原因也很明确。三栏都浮动起来了,但是middle栏的宽度设置成了100%,到时左右两边的撑不下换行显示了。

    现在我们需要做的是将left栏放到左侧,right栏放到右侧。那么我们就需要css的负margin了。

    3、利用负边距布局

    让左边的盒子上去
    .left{
        margin-left:-100%;
    }

    让右边的盒子上去

    .right {
        margin-left:-200px;
    }

    此时的效果图

    实现固比固布局

    虽然现在貌似已经实现了我们想要的布局,但是在中间填充内容的时候我们还是会发现问题。这一步我们也将中间的主体部分给一个高度,方便视觉效果。

    .middle{
        width: 100%;
        height: 200px; 
        background-color: #f7f537;
        float:left;
    }
    .left{    
        width: 200px;
        height: 200px;
        background-color: #37f7c8;
        float:left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: #eb6100;
        float:left;
    }

    从上面的效果图可以看出,middle栏的内容被两边的部分遮挡住的,这并不是我们想要的,所以我们的工作还得继续。

    4、让中间自适应的盒子安全显示(利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。)

    .container{ 
        padding: 0 200px;
    }

    这里的200px是左右盒子的宽度。

    效果如下:

    利用父级的内边距将盒子往中间挤

    我们可以看到,左右两边的内边距是有了,但是中间盒子上的内容还是被压着。

    5、左右两边分开来(给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置left和right值。)

    .left{ 
        position: relative; 
        left: -200px;
    }
    .right{
        position: relative;
        right: -200px;
    }

    看最终效果图

    现在我们的圣杯布局就OK啦!实现了我们要的效果,左右侧的盒子固定,中间盒子自适应,而且中间盒子的内容完全不受影响。希望对大家有帮助。

    更多编程相关知识,请访问:编程学习!!

    以上就是CSS什么是圣杯布局?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:CSS 圣杯布局
    上一篇:css给文字添加描边的方法是什么 下一篇:CSS布局的实用小技巧:margin负值
    第14期线上培训班

    相关文章推荐

    • css中有哪些UI元素状态伪类选择器• css如何设置首行缩进2个字符• css怎么合并单元格• css如何实现不显示元素• css内链式、外链式和嵌入式之间有什么区别?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网