圣杯布局和双飞翼布局

时间 2019-12-18

标签布局双飞繁體版

原文原文链接

写在前面：今天是2019年12月1日 2019年的最后一天，一般每月的开始和每一年的最后一个月老是会有一些新奇的事情，可是无论怎样总归是最好的安排；javascript

今天了解的是最多见的圣杯布局和双飞翼布局，初看文字内容，文绉绉的，每次学习知识都会先弄懂为何叫“圣杯布局”呢～一个名字来描述是比较不错的了php

主要做用：实现三栏布局实现左右两边固定，中间自适应的布局利用布局可优先渲染主要部分css

功能：实现左右两边固定，中间自适应的布局利用布局可优先渲染主要部分html

相同点：java

两侧宽度固定，中间宽度自适应；
中间部分在 DOM结构上优先，以便先行渲染；
容许三列中的任意一列成为最高列；
只须要使用一个额外的 <div> 标签；

产生圣杯布局和双飞翼布局的缘由：

网页渲染中dom是从上到下进行解析，而三栏布局中，咱们但愿优先展现重要的部分，因此但愿优先解析中间的部分dom，所以实现三个布局的排列，产生栏圣杯布局（圣杯布局之因此叫作圣杯布局，多是一种信仰）浏览器

传统的三栏布局dom结构app

<header>header</header>
<section class="wrapper">
    <aside class="col left">left</aside>
    <section class="col main">main</section>
    <aside class="col right">right</aside>
 </section>
 <footer>footer</footer>

优先展现中间重要部分后的dom结构dom

<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>

公共样式ide

header{
  width: 100%;
  height: 50px;
  background-color: red;
}
footer{
  width: 100%;
  height: 50px;
  background-color: red;
}

圣杯布局：布局

　　优势：不须要添加 DOM节点；
　　缺点：中间部分的宽小于左侧部分时就会发生布局混乱，即某一列内容若过多，文字会溢出（middle<left即会变形）。
　　解决方法：等高布局；
　　最小宽度问题：min-width:600px。

　　css中的注释是开发时的思路

天然语言描述下：

首先基本布局的实现 dom元素按照顺序

2.将left和right移至到中间栏一排利用float进行定位

3.在外层设置padding,让left和right进行添加padding的值，应用relative定位在左右两侧

.wrapper-shengbei .wrapper{
    /* 3 */
    padding: 0 100px;
    overflow: hidden;
  }
  .wrapper-shengbei .main{
    width: 100%;
    height: 200px;
    background-color: salmon;
    /* 2 */
    float: left;
  }
  .wrapper-shengbei .wrapper .left{
      width: 100px;
      height: 200px;
      background-color: royalblue;
      /* 2 */
      margin-left: -100%;
      float: left;
      /* 3 */
      /* position: relative;
      left: -100px; */
  }
  .wrapper-shengbei .wrapper .right{
      width: 100px;
      height: 200px;
      background-color: rgb(98, 136, 67);
      /* 2 */
      margin-left: -100px;
      float: left;
      /* 3 */
      /* position: relative;
      right: -100px;   */
      
  }

缺点：当浏览器中的main的宽度小于两侧的宽度时候咦：布局错乱了

双飞翼布局

双飞翼布局是由淘宝的ued@玉伯提出 https://mp.weixin.qq.com/s/wJZ6p-Wmk0n972A_WYk6aQ

比圣杯布局不一样的是，双飞翼布局解决了因为浏览器屏幕而致使的内容错乱问题，

html 的dom结构

<div class="wrapper-double">
     <header>header</header>
     <section class="wrapper">
         <section class="col main">
             <section class="main-wrap">main</section>
         </section>
         <aside class="col left">left</aside>
         <aside class="col right">right</aside>
     </section>
     <footer>footer</footer>
 </div>

　　css中注释的顺序为实现时的思路顺序

.wrapper-double{
    overflow: hidden;
    padding: 0px;   
  }
  .wrapper-double .wrapper{
    overflow: hidden;
    padding: 0px;
  }
  .wrapper-double .col{
    /* 1 */
    float: left;
    /* 3 */
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .wrapper-double .main{
    width: 100%;
    background-color: saddlebrown;
  }
  .wrapper-double .main-wrap{
    /* 2 */
    margin: 0 100px 0 100px;
    height: 200px;
  }
  .wrapper-double .left{
    width: 100px;
    height: 200px;
    /* 2 */
    margin-left: -100%;
    background-color: rgb(98, 136, 67);
  }
  .wrapper-double .right{
    width: 100px;
    height: 200px;
    /* 2 */
    margin-left: -100px;
    background-color: rgb(216, 219, 214);
  }

padding-bottom: 9999px;

margin-bottom: -9999px;

利用padding和margin实现等高度变化

.wrapper-double2 .wrapper {
    position: relative;
  }
  .wrapper-double2 .main {
   height: 200px;
   margin: 0 100px;
   background-color: saddlebrown;
  }
  .wrapper-double2 .left,.wrapper-double2 .right{
   width: 100px;
   height: 200px;
   position: absolute;
   top: 0;
   background-color: rgb(98, 136, 67);
  }
  .wrapper-double2 .left{
    height: 300px;
    left: 0;
  }
  .wrapper-double2 .right{
    right: 0;
  }

　缺点是，三栏的高度不足以支撑底部的footer~若是底部的footer是定位在浏览器下面是无关系的，动态的增长两侧的高度，发现支撑高度变化

实现三栏布局的种类不限于这几种～