Day7前端学习之路——多栏布局

该文章主要讨论两栏布局和三栏布局，三栏布局包括很著名的圣杯布局和双飞翼布局

一、两栏布局的七种方法（左边固定，右边自适应）

原理：

• block水平元素宽度能够跟随父容器调节的流动特性，block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。
• 利用CSS的calc( )方法动态设定宽度
• 利用CSS的新型布局flex layout与grid layout

基本样式布局为：两个盒子相距20px，左侧盒子宽度为120px，右侧盒子宽度自适应

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

1.1 双inline-block方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    /* 消除空格的影响 */
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;    /* 顶端对齐 */
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px); /* 注意减号两边一定要有空格，否则该语句无效*/
}

补充知识：

• box-sizing

简而言之，设置box-sizing为content-box，那么盒子的可绘制区域（即为设定的宽度和高度）仅包括内容，不包括他的边框和内边距，如果绘制内边距和边框，均会在设定的宽度和高度之外绘制；

设置box-sizing为border-box，那么盒子的可绘制区域（即设置的宽度和高度）包括内边距+边框+内容。

• inline-block：

• overflow:    overflow 属性规定当内容溢出元素框时发生的事情。

1.2 双float方案

动态计算宽度实现自适应，由于浮动的block元素在有空间的情况下会依次紧贴，排列在一排

.wrapper-double-float {
    overflow: auto;        /* 清除浮动 */
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

1.3 float+margin-left方案

.wrapper-float {
    overflow: hidden;        /* 清除浮动 */
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

1.4 absolute+margin-left方法

• 使用了绝对定位，若是用在某个div中，需要更改父容器的position。

• 没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况

.wrapper-absolute {
    min-height: 200px;
}

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

1.5 float+BFC方法

.wrapper-float-bfc {
    overflow: auto; /* 清除浮动 */
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

• 这个方案同样是利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。
• 这种情况下，只需要为左侧的浮动盒子设置margin-right，就可以实现两个盒子的距离了。而右侧盒子是block级别的，所以宽度能实现自适应。
• 父元素需要清除浮动

1.6 flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;

1.7 grid方案

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

• grid布局也有列等高的默认效果。需要设置: align-items: start;。

• grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

二、三栏布局

圣杯布局和双飞翼布局：https://www.cnblogs.com/guchengnan/p/10011932.html 

2.1 绝对定位法

2.2 margin负值法

2.3 自身浮动法