css三栏布局-圣杯-双飞翼-弹性布局 2018-3-28

三栏布局,一般就是要求两边的侧边栏固定,中间内容能够自适应宽度.

大致有三种做法:圣杯,双飞翼,flex

• 圣杯布局

• 参考内容:https://www.zhihu.com/question/21504052
  

       圣杯布局的来历是2006年发在a list part上的这篇文章：In Search of the Holy Grail · An A List Apart Article.
圣杯是西方表达“渴求之物"的意思.

     基本思路

        1.通过浮动,将三栏并排显示

        2.内容部分为了自适应设置为宽度100%;这样的话左右侧边栏则会被挤到下一行.

        3.设置侧边栏的`margin-left:负值`, 让他扩大内容区域,回到上一行.

        4.由于侧边栏的回归,导致中间部分的内容区域受到侵占,所以要设置padding,来减小内容区域.

        5.侧边栏通过定位,移动到父容器的padding部分.

   html

<header>
    <div class="top-bar">这里是头部</div>
  </header>
  <div class="main">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <footer>
    <div class="bottom-bar">这里是尾巴</div>
  </footer>

css

/* <header> <footer>的样式 */
  header,
  footer{
    width: 100%;
    text-align: center;
    background: rgba(99, 189, 231, 0.685);
  }
  /* <footer>清除浮动 */
  footer{
    clear: both;
  }
  /* 头部和底部的子元素居中 */
  .top-bar,
  .bottom-bar{
    margin: auto;
    width: 1000px;
    height: 60px;
    line-height: 60px;/* 垂直居中 */
    background: rgba(204, 204, 204, 0.747);
  }

父级元素main样式,

.main{
    margin: auto;/* 水平居中 */
    width: 600px;
    height: 500px;
    padding:0 200px;/* 撑开位置,不让left和right挡住.content的内容 */
    overflow: hidden;/* 撑起父级高度 */
  }

.main下的div全部浮动

.main>div{
    float: left;
  }

中间部分样式

.content{
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background: rgba(102, 199, 102, 0.568);
  }

侧边栏样式

.left,
.right{
    position: relative;
    width: 200px;
    height: 500px;
    background: rgba(243, 155, 199, 0.377);
  }
.left{
    margin-left: -100%;
    left: -200px;
  }
.right{
    margin-left: -200px;
    right: -200px;
  }

优点:html解构简单, css样式较复杂.

缺点:圣杯布局有个问题，当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉

效果图:

• 双飞翼布局

• 参考内容:https://www.zhihu.com/question/21504052

• 双飞翼据考源自淘宝UED，应该是一种页面的形象的表达
  

    基本思路同圣杯布局,但是这里的撑开内容宽度用的是margin值.html结构中,在中间内容外要加一个父级块.

具体代码如下:

html

<header>
    <div class="top-bar"></div>
  </header>
  <main>
    <div class="content">
      <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </main>
  <footer>
    <div class="bottom-bar"></div>
  </footer>

css

/* 头部和底部样式 */
  header,footer{
    width: 100%;
    text-align: center;
  }
  footer{
    clear: both;/* 清除浮动 */
  }
  .top-bar, .bottom-bar{
    margin: auto;
    width: 1000px;
    height: 50px;
    background: lemonchiffon;
  }

    下面是主要布局的css

main{
    margin: auto;
    /* width: 1000px; */
    height: 600px;
  }
  .content,.left,.right{
    float: left;
  }
  .content{
    width: 100%;
  }
  .middle{
    /* 不能设置宽度,否则不能自适应 */
    margin: 0 200px;
    height: 600px;
    background: khaki;
  }
  .left,.right{
    width: 200px;
  }
  .left{
    margin-left: -100%;/* 显示在middle的左边 */
    width: 200px;
    height: 600px;
    background: floralwhite;
  }
  .right{
    margin-left: -200px;/* 显示在middle的右边 */
    width: 200px;
    height: 600px;
    background: lightblue;
  }

优点:css比较简单明了,没有圣杯布局布局会乱的缺点.

缺点:html多了一个div

效果图:

• flex弹性布局

• 参考内容:  这两个网站中有详细的配图说明.值得一看.
  

         http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

                        http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    基本思路:这里主要使用了css3的新特性flex.具体方法请参考参考内容.

    html

<div class="main">
    <header>头头头</header>
    <div class="content">
      <div class="middle">我是老大</div>
      <div class="left">我是左膀</div>
      <div class="right">我是右臂</div>
    </div>
    <footer>我是自信的小尾巴</footer>
  </div>

css

.main{
      display: flex;
      display:-webkit-flex;
      height: 600px;
      flex-direction: column;/* 主轴垂直,从上往下 */
      text-align: center;
    }
    header, footer{
      height: 70px;
      background: lightblue;
    }
    .content{
      display: flex;
      flex: 1;/* 是flex-grow,flex-shrink, flex-basis的简写,后面两个属性可以省略.这里1的意思是全部放大*/
    }
    .middle{
      flex: 1;
      background: lemonchiffon;
    }
    .left, .right{
      flex: 0 0 200px;/* 不放大, 不缩小, 宽度固定为200px */
      background: lightcyan;
    }
    .left{
      order: -1;/* 显示在第一位 */
    }

    /* 小屏幕自适应布局,中间三栏垂直叠加 */
    @media (max-width: 600px) {
      .content{
        flex-direction: column;/* 主轴垂直,内容垂直对齐 */
        flex: 1;/* 全部放大 */
      }
      .middle, .left, .right{
        flex: auto;/*flex-grow:1,全部放大; flex-shrink:1, 全部缩小; flex-basis  */

优点:html,css简单, 对屏幕尺寸有良好的适应性.

缺点:兼容性存在一定问题.

注意事项:设置为flex后, float,clear,vertival-align都将失效.

效果图:

总结:

圣杯,双飞翼,flex.都是为了解决屏幕自适应的问题做出的解决方案.目前来说为了兼容性,我会选择双飞翼,他解决了圣杯存在的缺点,任然可以实现自适应布局.flex是应对移动端发展的新css样式,具有简便块速的布局方式,同时能够良好的自适应移动端,相信会成为主流(也许已经是主流?).