前端学习笔记(三)-CSS常见布局列元素的高度必须一致。不然第二行的第一个元素会沿着最高元素的右侧对其需要解决换行符空

布局

这里的布局不考虑flex和grid解决方案

多列布局（各列成比例，不考虑间距

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
    </div>

float方案

    .parent {
      overflow: auto;
    }

    .left {
      width: 50%;
      float: left;
      background-color: #5c6;
      box-sizing: border-box;
    }
    .right {
      width: 50%;
      float: left;
      background-color: #5f5;
      box-sizing: border-box;
    }

缺点：

父元素需要清除浮动
列元素的高度必须一致。不然第二行的第一个元素会沿着最高元素的右侧对其
建议设置各个元素的box-sizing: border-box

inline-block方案

    .parent {
      font-size: 0;
    }

    .left {
      font-size: 12px;
      width: 50%;
      display: inline-block;
      background-color: #5c6;
      box-sizing: border-box;
    }
    .right {
      font-size: 12px;
      width: 50%;
      display: inline-block;
      background-color: #5f5;
      box-sizing: border-box;
    }

缺点：

建议设置各个列元素的box-sizing: border-box
在不等高的情况下视需要设置vertical-align
需要解决换行符空格引起的间隙问题。具体方案见文inline-block的列表布局
常用font-size: 0;在IE6/7下残留1像素间隙。令人讨厌的内部元素的font-size需要另外设置

父元素display:table,子元素display:table-cell

    .parent {
      display: table;
      width: 100%;
    }

    .left {
      display: table-cell;
      width: 50%;
      background-color: #5c6;
      box-sizing: border-box;
    }
    .right {
      display: table-cell;
      width: 50%;
      background-color: #5f5;
      box-sizing: border-box;
    }

能够解决高度自适应的问题缺点：

margin失效
对元素的宽width高度敏感，对父元素还有子元素的宽度需要手动设置

两列布局(定宽+自适应)

双inline-block方案

    .parent {
      font-size: 0;
    }

    .left {
      font-size: 12px;
      display: inline-block;
      width: 200px;
      background-color: #5c6;
      box-sizing: border-box;
    }
    .right {
      vertical-align:top;
      font-size: 12px;
      display: inline-block;
      width: calc(100% - 200px);
      background-color: #5f5;
      box-sizing: border-box;
    }

缺点：

需要通过calc计算，需要知道左侧盒子的宽度与两个盒子的距离
需要解决换行符空格引起的间隙问题
需要设置vertical-align

双float方案

    .parent {
      overflow: hidden;
    }

    .left {
      float:left;
      width: 200px;
      background-color: #5c6;
      box-sizing: border-box;
    }
    .right {
      float:left;
      width: calc(100% - 200px);
      background-color: #5f5;
      box-sizing: border-box;
    }

不需要设置vertical-align，也不需要解决间隙问题缺点：

父元素需要清除浮动
需要知道定宽宽度与盒子之间的距离并通过calc计算，还要设置box-sizing: border-box

float+margin-left

    .parent {
      overflow: hidden;
    }

    .left {
      float:left;
      width: 200px;
      background-color: #5c6;
    }
    .right {
      margin-left: 200px;
      background-color: #5f5;
    }

利用块级元素会自动填满父级元素的宽度，并随着父容器的宽度自适应的流体特性缺点：

父元素需要清除浮动
需要计算margin-left
两列高度可能会存在问题

absolute+margin-left

    .parent {
      position:relative;
    }

    .left {
      position:absolute;
      width: 200px;
      background-color: #5c6;
    }
    .right {
      margin-left: 200px;
      background-color: #5f5;
    }

缺点：

需要计算margin-left，以及设置box-sizing
没有清除浮动的方法，左侧高度会超出父元素的高度。因此只能通过设置父容器的min-height来放置这种情况。

float+BFC

    .parent {
      overflow:hidden;
    }

    .left {
      float:left;
      width: 200px;
      background-color: #5c6;
      margin-right:10px;
    }
    .right {
      overflow:auto;
      margin-left: 0;
      background-color: #5f5;
    }

缺点：

父元素需要清除浮动

另：BFC介绍与形成BFC的条件(TODO)

table-cell

    .parent {
      display: table;
      width:100%;
      table-layout: fixed;
    }

    .left {
      display:table-cell;
      width: 200px;
      background-color: #5c6;
      margin-right:10px;
    }
    .right {
      display:table-cell;
      background-color: #5f5;
    }

父元素的width:100%和table-layout: fixed很关键

参考资料

七种实现左侧固定，右侧自适应两栏布局的方法

CSS深入理解流体特性和BFC特性下多栏自适应布局

两列布局(不定宽+自适应)

float+BFC

    .parent {
      overflow:hidden;
    }

    .left {
      float:left;
      background-color: #5c6;
    }
    .right {
      overflow:auto;
      background-color: #5f5;
    }

三列布局(左右定宽，中间自适应)

圣杯布局

HTML

    <div class="parent">
        <div class="main">
          main
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>

CSS

    .parent {
      padding: 0 200px;
      overflow:hidden;
    }
    .main {
      float:left;
      width:100%;
    }
    .left {
      float:left;
      width:200px;
      margin-left:-100%;
      background-color: #5c6;
      position:relative;
      left:-200px;
    }
    .right {
      float:left;
      width:200px;
      margin-left: -200px;
      background-color: #5f5;
      position:relative;
      right:-200px;
    }

三列全浮动，父元素清除浮动
中间width: 100%，左侧margin-left: -100%，右侧margin-left: -200px（自身宽度+margin）
父元素设定padding，左右两个子元素设定position:relative，并通过left和right分别移动到对应位置

参考资料: 圣杯布局

双飞翼布局

HTML

    <div class="parent">
        <div class="main-wrapper">
            <div class="main">
                main
            </div>
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>

CSS

    .parent {

    }
    .main-wrapper {
      width:100%;
      float:left;
    }
    .main {
      margin: 0 200px;
    }
    .left {
      float:left;
      width:200px;
      margin-left:-100%;
      background-color: #5c6;
    }
    .right {
      float:left;
      width:200px;
      margin-left: -200px;
      background-color: #5f5;
    }

通过设置main的父类main-wrapper，设置main-wrapper的浮动和width：100%
两栏left和right不需要设置相对定位，parent不需要设置padding
main通过margin与两栏拉开距离