三栏布局

2020-06-08 15:41:19 作者：互联网

固比固（浮动布局）

知识点。保存。忘记来看

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

和元素位置有关系

当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