Skip to content

1. 页面布局.md

Latest commit

 

History

History
367 lines (311 loc) · 8.59 KB

1. 页面布局.md

File metadata and controls

367 lines (311 loc) · 8.59 KB
Raw

页面布局

问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应

方法一：浮动布局

<section class="layout float">
    <style media="screen">
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }

      .layout.float .center {
        background: yellow;
      }

      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>浮动解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
    </article>
  </section>

方法二：绝对定位布局

<section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div {
        position: absolute;
      }

      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }

      .layout.absolute .center {
        left: 300px;
        right: 300px;
        background: yellow;
      }

      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>绝对定位解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

方法三：flexbox 布局

  <section class="layout flexbox">
    <style>
      .layout.flexbox {
        margin-top: 110px;
      }

      .layout.flexbox .left-center-right {
        display: flex;
      }

      .layout.flexbox .left {
        width: 300px;
        background: red;
      }

      .layout.flexbox .center {
        flex: 1;
        background: yellow;
      }

      .layout.flexbox .right {
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>flexbox解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

方法四：表格布局

  <section class="layout table">
    <style>
      .layout.table .left-center-right {
        width: 100%;
        height: 100px;
        display: table;
      }

      .layout.table .left-center-right>div {
        display: table-cell;
      }

      .layout.table .left {
        width: 300px;
        background: red;
      }

      .layout.table .center {
        background: yellow;
      }

      .layout.table .right {
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>表格布局解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

方法五：网格布局

  <section class="layout grid">
    <style>
      .layout.grid .left-center-right {
        width: 100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }

      .layout.grid .left-center-right>div {}

      .layout.grid .left {
        width: 300px;
        background: red;
      }

      .layout.grid .center {
        background: yellow;
      }

      .layout.grid .right {

        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>网格布局解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

方法六：圣杯布局

<div class="container">
    <div class="main col">Main</div>
    <div class="left col">Left</div>
    <div class="right col">Right</div>
</div>
<style>
  /* 两边定宽，中间自适用 */
  body,
  html,
  .container {
    height: 300px;
    padding: 0;
    margin: 0;
  }

  .col {
    float: left;
    /* 三个col都设置float: left,为了把left和right定位到左右部分 */
    position: relative;
  }

  /*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
  .container {
    padding: 0 300px 0 300px;
  }

  /*左边栏*/
  .left {
    left: -300px;
    width: 300px;
    height: 100%;
    margin-left: -100%;
    background: #ff69b4;
  }

  /*中间栏*/
  .main {
    width: 100%;
    height: 100%;
    background: #659;
  }

  /*右边栏*/
  .right {
    right: -300px;
    width: 300px;
    height: 100%;
    margin-left: -300px;
    background: #ff69b4;
  }
</style>

方法七：双飞翼布局

<div class="container">
    <div class="main col ">
        <div class="main_inner">Main</div>
    </div>
    <div class="left col ">Left</div>
    <div class="right col ">Right</div>
</div>

<style>
  body,
  html,
  .container {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .col {
    float: left;
    /* 把left和right定位到左右部分 */
  }

  .main {
    width: 100%;
    height: 100%;
    background: #659;
  }

  .main_inner {
    /* 处理中间栏的内容被遮盖问题 */
    margin: 0 200px 0 100px;
  }

  .left {
    width: 100px;
    height: 100%;
    margin-left: -100%;
    background: #ff69b4;
  }

  .right {
    height: 100%;
    width: 200px;
    margin-left: -200px;
    background: #ff69b4;
  }
</style>

问题延伸：

分析每个解决方案的优缺点

  1. 浮动：浮动后脱标，需要清除浮动，需要处理好其他浮动周边元素的关系；优点兼容性好
  2. 绝对定位：下面所有的子元素都要脱标，有效性差；优点快捷
  3. flex 布局：CSS3 中新出现的布局方式，就是为了解决上述两个的解决方案的不足而产生，基本上是比较完美的
  4. 表格布局：当其中一个单元格高度超出时，两侧的单元格都要调整高度；在很多场景中都是非常适用的，兼容性很好
  5. 网格布局：新技术，可以做很多复杂的事情，代码量少
  6. 圣杯布局：结构简单，无多余 DOM 层；中间部分宽度小于左侧时布局混乱，当浏览器无限放大时圣杯会破碎
  7. 双飞翼布局：主要的内容先加载的优化；兼容目前所有的主流浏览器，包括 IE6 在内。缺点：会多加一层 DOM 节点，增加渲染树生成的计算量

假设把高度已知去掉，哪个方案不适用了

在不改动的情况下，flex 布局和表格布局是可以通用的，其他的都不适用了

页面布局小结

  • 语义化掌握到位 article section 不要通篇 div
  • 页面布局理解深刻
  • CSS 基础知识扎实
  • 思维灵活积极向上 知道每个方案的优缺点、对比
  • 代码书写规范

其他布局

三栏布局

  • 左右宽度固定，中间自适应
  • 上下高度固定，中间自适应

两栏布局

  • 左宽度固定，右自适应
  • 右宽度固定，左自适应
  • 上高度固定，下自适应
  • 下高度固定，上自适应