css中的五种常见页面布局

公共样式部分代码：

（推荐教程：CSS教程）

    html * {       margin: 0;       padding: 0;     }     .layout {       margin-bottom: 20px;     }     .layout article {       width: 100%;      }     .layout article > div {       min-height: 100px;     }     .layout article .left {       width: 300px;       background: red;     }     .layout article .center {       background: orange;     }     .layout article .right {       width: 300px;       background: blue;     }

float布局

  <!-- 浮动布局 -->   <section class="layout float">     <style>       .layout.float .left {         float: left;       }       .layout.float .right {         float: right;       }     </style>     <article class="left-center-right">       <div class="left"></div>       <div class="right"></div>       <div class="center">         <h2>这是float布局</h2>         <p>这是一段文字</p>         <p>这是一段文字</p>       </div>     </article>   </section>

absolute布局

 <!-- 定位布局 -->   <section class="layout absolute">     <style>       .layout.absolute .left-center-right > div {         position: absolute;       }       .layout.absolute .left {         left: 0;       }       .layout.absolute .center {         left: 300px;         right: 300px;       }       .layout.absolute .right {         right: 0;       }     </style>     <article class="left-center-right">       <div class="left"></div>       <div class="center">         <h2>这是absolute布局</h2>         <p>这是一段文字</p>         <p>这是一段文字</p>       </div>       <div class="right"></div>     </article>   </section>

flex布局

  <!-- flex布局 -->   <section class="layout flex">     <style>       .layout.flex {         margin-top: 140px;       }       .layout.flex .left-center-right{         display: flex;       }       .layout.flex .center {         flex: 1;       }     </style>     <article class="left-center-right">       <div class="left"></div>       <div class="center">         <h2>这是flex布局</h2>         <p>这是一段文字</p>         <p>这是一段文字</p>       </div>       <div class="right"></div>     </article>   </section>

table布局

  <!-- table布局 -->   <section class="layout table">     <style>       .layout.table .left-center-right {         display: table;         height: 100px;       }       .layout.table .left-center-right > div{         display: table-cell;       }     </style>     <article class="left-center-right">       <div class="left"></div>       <div class="center">         <h2>这是table布局</h2>         <p>这是一段文字</p>         <p>这是一段文字</p>       </div>       <div class="right"></div>     </article>   </section>

grid布局

  <!-- grid布局 -->   <section class="layout grid">     <style>       .layout.grid .left-center-right {         display: grid;         grid-template-columns: 300px auto 300px;       }     </style>     <article class="left-center-right">       <div class="left"></div>       <div class="center">         <h2>这是grid布局</h2>         <p>这是一段文字</p>         <p>这是一段文字</p>       </div>       <div class="right"></div>     </article>   </section>