三列布局

两侧两列固定宽度，中间列自适应宽度

三列布局.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