页面布局

页面布局

高度已知左右固定中间自适应

---

• float布局
  缺点：清除浮动的处理
  优点：兼容性好

<section class="layout float">
    <style>
      .layout.float .left-right-center div{
        height: 100px;
      }
      .layout.float .left{
        float: left;
        width: 200px;
        background: blue;
      }
      .layout.float .right{
        float: right;
        width: 200px;
        background: red;
      }
      .layout.float .center{
        background: green
      }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>内容标题</h1>
          <p>主要内容</p>
        </div>
    </article>   
  </section>

• 绝对定位
  缺点：下面子元素脱离文档流，有效性差
  优点：快捷

<section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div{
        position: absolute;   
        height: 100px;     
      }
      .layout.absolute .left{
        width: 200px;
        left: 0;
        background: blue;
      }
      .layout.absolute .right{
        right: 0;       
        width: 200px;
        background: red;
      }
      .layout.absolute .center{
        left: 200px;     
        right:200px;
        background: green
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          <p>主要内容</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• flexbox
  解决上述两个缺点的，移动端很好的兼容

<section class="layout flex">
    <style>
      .layout.flex .left-center-right>div{
        height: 100px;
      }
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .left{
        width: 200px;
        background: blue;
      }
      .layout.flex .right{     
        width: 200px;
        background: red;
      }
      .layout.flex .center{
        flex: 1;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          <p>flex</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• table
  优点：兼容性好
  缺点：一个单元格影响其他单元格

<section class="layout table">
    <style>
      .layout.table .left-center-right{
        display: table;
        width: 100%;
        height: 100px;
        
      }
      .layout.table .left-center-right>div{
        display: table-cell;
      }
      .layout.table .left{
        width: 200px;
        background: blue;
      }
      .layout.table .right{     
        width: 200px;
        background: red;
      }
      .layout.table .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          表格
      </div>
      <div class="right"></div>
    </article>
  </section>

• grid
  优点：各种复杂布局，代码简单

  <section class="layout grid">
    <style>
      .layout.grid .left-center-right{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 200px;
      }
      .layout.grid .left{
        background: blue;
      }
      .layout.grid .right{     
        background: red;
      }
      .layout.grid .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          网格
      </div>
      <div class="right"></div>
    </article>
  </section>

• 双飞翼
  最后说一下双飞翼布局，也叫圣杯布局

<style>
		div{
			height: 100px;
		}
		.center-left-right .content{
			float: left;;
			background:red; 
			width: 100%;
		}
		.center-left-right .content .body{
			margin-left: 200px;
			margin-right: 120px;
		}
		.center-left-right .left{
			float: left;
			background: blue;
			width: 200px;
			margin-left: -100%
		}
		.center-left-right .right{
			float: left;
			background: yellow;
			width: 120px;
			margin-left: -120px;
		}
	</style>
	<article class="center-left-right">
		<div class="content">
			<div class="body">1234567890</div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</article>

注意这里article会失去高度，解决办法使用伪元素

article.center-left-right:after {
    clear: both;
    display: block;
    content: '';
}