三列布局

兩側兩列固定寬度，中間列自適應寬度

三列布局.png

如何實現 實例代碼如下

<style>
    .content:after{
      content:'';
      display:block;
      clear:both;
    }
    .menu{
      width:100px;
      height:300px;
      float:left;
      background:pink;
    }
    .aside{
      width:200px;
      height:300px;
      float:right;
      background:blue;
    }
    .main{
      height:400px;
      margin-left:120px;
      margin-right:210px;
      background:red;
    }
    .footer{
      background:#ccc;
    }
  </style>
<diV class="content">
  <div class="menu">aside</div>
  <div class="aside">aside</div>
  <div class="main">main</div>
</diV>
  <div class="footer">尾部</div>

效果圖如下

三列布局左右固定中間自適應.png

水平等距排列

思路：li的大小 和margin的間距加起來剛好等距于ct的大小 然后利用負margin進行排列，剛好完完整整排下。
范例如下

 <style>

    ul ,li{
      margin:0;
      padding:0;
      list-style:none;
    }
    .ct{
      width:640px;
      overflow:hidden;
      border:dashed 1px orange;
      margin:0 auto;
    }
    .item{
      float:left;
      width:200px;
      height:200px;
      background:pink;
      margin-right:20px;
      margin-top:10px;
    } 
    .ct>ul{
      margin-right:-20px;
    }
</style>
<div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul>
</div>

效果圖如下：

水平等距排列布局.png

圣杯布局

• 是三列布局，兩邊固定寬度，中間自適應
• 中間內容元素在 dom 元素次序中優先位置
  范例如下

<style>
    .content:after{
      content:'';
      display:block;
      clear:both;
    }
    .content{
      padding-left:100px;
      padding-right:150px;
    }
    .aside,.main,.extra{
      float:left;
    }
    .aside{
      width:100px;
      height:200px;
      background:pink;
      margin-left:-100%;
      position:relative;
      left:-100px;
    }
    .extra{
      width:100px;
      height:200px;
      background:red;
      margin-left: -150px;
      position:relative;
      left:150px;
    }
    .main{
      height:300px;
      background:blue;
      width:100%;
    }
  </style>
<div class="content">
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="extra">extra</div>
</div>

效果圖如下

圣杯布局.png

• 缺點：.mian的最小寬度不能小于.aside的寬度

雙飛翼布局

和圣杯布局有異曲同工之妙 解決了圣杯布局的缺點
范例如下

<style>
    .content:after{
      content:'';
      display:block;
      clear:both;
    }
    .aside,.main,.extra{
      float:left;/*2*/
    }
    .aside{
      width:100px;/*1*/
      height:200px;/*1*/
      background:pink;/*1*/
      margin-left:-100%;/*4*/
    }
    .extra{
      width:150px;/*1*/
      height:300px;/*1*/
      background:blue;/*1*/
      margin-left:-150px;/*5*/
    }
    .main{
      /* height:300px; *//*第1步添加，第7步注釋掉*/
      /* background:red; *//*第1步添加，第7步注釋掉*/
      width:100%/*3*/
    }
    .wrap{
      margin-left:100px;/*6*/
      margin-right:150px;/*6*/
      background:red;/*7*/
      height:350px;/*7*/
    }
  </style>
<div class="content">
  <div class="main">
    <div class="wrap">main</div>
  </div>
  <div class="aside">aside</div>
  <div class="extra">extra</div>
</div>

效果圖如下 ：

雙飛翼布局.png

流式布局

bootstrap講解 我們實現一個簡單的柵格系統

彈性布局flex

flex講解 范例

grid

grid相關文章

移動端布局

1. 設置 meta ，如

<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>

1. 適配

媒體查詢 or 動態 rem