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

    CSS的三栏布局详解

    php中世界最好的语言php中世界最好的语言2018-03-20 16:34:52原创807
    这次给大家带来CSS的三栏布局详解，CSS的三栏布局的注意事项有哪些，下面就是实战案例，一起来看一下。

    本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下：

    三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见

    1. float布局

    最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：

        <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

    此时可以得到左右两栏分布：

    大前端成长进阶课程：进入学习

    接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的p，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：

       <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left"></p>
      <p class="right"></p>
      <p class="main"></p>
      </p>

    优势：简单

    劣势：中间部分最后加载，内容较多时影响体验

    2. BFC 规则

    BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：

        <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

    3. 圣杯布局

    圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。

    第一步，先来看下基本布局

        <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <p class="container">
            <p class="main"></p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

    此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：

            .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

    第二步，将left的margin-left设置为-100%，此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值：-100px，则右栏也会移动到和左、中栏一行中：

    不过此时还没有大功告成，我们试着在main中加入一些文字：

        <body>
        <p class="container">
            <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

    可以看到文字被压住了，接下来就要解决这个问题。

    第三步，给container一个padding，该padding应该正好等于左、右栏的宽度：

            .container {
            padding-left: 100px;
            padding-right: 100px;
        }

    此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。

    第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：

            .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

    到此为止，大功告成：

    4. 双飞翼布局

    双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

    既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：

    <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: '';
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <p class="main">
        <p class="content"></p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

    唯一需要注意的是，需要在main后面加一个元素来清除浮动。

    5. flex布局

    flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：

            <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }
            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }
            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

    有几点需要注意一下：

    1. main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1

    2. flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

    6. 绝对定位

    绝对定位的方式也比较简单，而且可以优先加载主体：

            <style type="text/css">
            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }
            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }
            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

    相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

    推荐阅读：

    CSS怪异盒模型和标准盒模型如何使用

    CSS实现手风琴布局

    以上就是CSS的三栏布局详解的详细内容，更多请关注php中文网其它相关文章！

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程：点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架：点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐：样式表 css 详解
    上一篇：css3中calc在less编译时怎样不被计算 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程，总价3725元，会员免费学• ❤️‍🔥接口自动化测试不想写代码？• 带你吃透Flex布局的三个属性：flex-grow、flex-shrink、flex-basis• 实例详解CSS渐变锯齿问题如何解决！• 另辟蹊径！看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数（示例介绍）
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载