三栏布局

2020-06-08 15:41:19 阅读：259 来源： 互联网

标签：right 三栏 color 布局 width background margin left

固比固（浮动布局）

知识点。保存。忘记来看

左内容右两边固定，内容自适应

和元素位置有关系

当DOM元素位置为

	<aside class="left">1</aside>
    <aside class="right">3</aside>
    <div class="contain">2</div>

原理：内容在文档流，左边栏左浮动，右边栏右浮动

	由于浮动元素不会覆盖在另一个BFC（块级格式上下文，也就是块级盒子出现的区域）区域上。

样式分布为：

* {
 margin: 0;
 padding: 0;
}
.left {
 float: left;
 width: 30px;
 height: 100vh;
 background-color: aqua;
}
.right {
 float: right;
 width: 30px;
 height: 100vh;
 background-color: aqua;
}
.contain {
 background-color: blue;
 height: 100vh;
}

缺点：最后渲染文档流

优点：兼容性比较好，但是浮动布局具有局限性，浮动元素脱离文档流，要做清楚浮动，这个处理不好的话，会带来很多问题（父元素塌陷等问题）

定位布局

dom结构

<div class="main">2</div>
<aside class="left">1</aside>
<aside class="right">3</aside>

*{
    margin: 0;
    padding: 0;
}
body {
    position: relative;
}
.left, .right {
    position: absolute;
}
.left {
    top: 0;
    left: 0;
    background: burlywood;
    height: 100vh;
    width: 200px;
}
.right {
    top: 0;
    right: 0;
    background: chartreuse;
    height: 100vh;
    width: 200px;
}
.main {
    padding: 0 200px;
    background-color: cornflowerblue;
    height: 100vh;
}

也涉及不到什么原理，就是定位元素脱离文档流。左边栏和右边栏固定宽度，中间元素用padding 隔开位置，防止绝对定位元素遮盖文档流。

圣杯布局

实现原理：

这个需要首先渲染中间内容元素。

<div class="main">2</div>
<aside class="left">1</aside>
<aside class="right">3</aside>

实际上就是中间内容宽度占盒子的100%，三个元素都浮动，下面两个元素就会在下一行排列。不占据BFC。然后margin-left 让元素遮盖中间内容。然后相对定位。把中间露出来。

三个元素都浮动。包裹三个元素的父元素设置padding(留白) 为一会儿露出遮盖的中间内容

左边栏 margin-left: -100%

右边栏 margin-left: -左边栏的宽

相对定位左边栏 left: -左边栏的宽度

相对定位右边栏 right: -左边栏的宽度

 * {
        margin: 0;
        padding: 0;
    }
    body {
        width: 400px;
        height: 400px;
        margin: auto;
        border: 5px solid red;
        padding: 100px;
    }
    .main, .left, .right {
        float: left;
    }
    .main {
        height: 100px;
        width: 100%;
        background-color: cornflowerblue;
    }
    .left {
        height: 100px;
        width: 20px;
        background: cyan;
        margin-left: -100%; 
        position: relative;
        left: -20px; 
    }
    .right {
        width: 20px;
        height: 100px;
        background: darkgoldenrod;
         margin-left: -20px;
        position: relative;
        right: -20px;
    }

最后注意清除浮动。

body:after {
        content: '';
        display: block;
        clear: both;
    }

缺点：当main部分小于 left 的时候（宽度）.布局会混乱

双飞翼布局

双飞翼布局和圣杯差不多。双飞翼也是使用浮动 margin-left 使元素排列在一行，因为遮盖了中间内容。这个使用的方式是为内容嵌套一层元素。使用margin 顶开距离。

<div class="main">
    <div class="item">内容</div>
</div>
<aside class="left">左边</aside>
<aside class="right">右边</aside>

* {
    margin: 0;
    padding: 0;
}
body {
    border: 5px solid red;
    width: 500px;
    height: 500px;
    margin: auto;
}
.main, .left, .right {
    float: left;
}
.main {
    
    background-color: aqua;
    width: 100%;
}
.main .item {
    margin: 0 200px 0 200px;
}
.left {
    width: 200px;
    background-color: blanchedalmond;
    margin-left: -100%;
}
.right {
    width: 200px;
    background-color: brown;
    margin-left: -200px;
}

还是注意清除浮动。

body:after {
    content: '';
    display: block;
    clear: both;
}

优点：先渲染内容，当main 小于 left 的时候，不会像圣杯布局那样混乱页面。

缺点：多了一层dom节点。

flex 的三栏布局（固比固）

可以这么设置

<style>
    body {
        display: flex;
    }
    .left, .right {
        width: 200px;
        background-color: brown;
        /* 不允许缩小 */
        flex-shrink: 0;
    }
    .main {
        flex: 1;
        background-color: chartreuse;
    }
</style>
<body>  
      
        <aside class="left">左</aside>
        <div class="main">中</div>
        <aside class="right">右</aside>
</body>

这样设置先渲染的不是主要内容。

我们可以利用 order 属性，先渲染主要内容。

<style>
    body {
        display: flex;
    }
    .left, .right {
        width: 200px;
        background-color: brown;
        /* 不允许缩小 */
        flex-shrink: 0;
    }
    .main {
        flex: 1;
        background-color: chartreuse;
        order: 1;
    }
    .left {
        order: 0;
    }
    .right {
        order: 2;
    }
</style>
<body>  
        <div class="main">中</div>
        <aside class="left">左</aside>
        <aside class="right">右</aside>
</body>

添加一个属性。使其优先渲染主要内容。

缺点： IE8 及以下浏览器不兼容

标签：right,三栏,color,布局,width,background,margin,left
来源： https://blog.csdn.net/qq_35898059/article/details/106607593

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9