CSS 7：网页布局（传统布局，flex布局，布局套路）

头像
风彻
    阅读 11 分钟
    6

    传统布局

    一栏、两栏、三栏布局

    一栏布局

    特点：页面内容居中，宽度固定

    实现方式： 定宽 + 水平居中

    width: 1000px; //或 max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    演示地址范例

    注意 max-width和width的区别：使用固定width的时候，如果浏览器缩小到比设置的宽度要小，那么会出现滚动条（不允许宽度小于width）。设置为max-width之后：缩小浏览器，如果浏览器比max-width要小，那么宽度就是浏览器的宽度，既最大是那么大，可以不那么大。

    <style>
  .layout{
  /*   width: 960px; */
    max-width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

    也可有如下写法，省标签，便于控制局部 ，主要方法是单独写一个layout类，需要控制布局的时候，加上这个类就可以了
    范例演示地址

    <style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header"  class="layout">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>

    以下是针对通栏（既上下栏是满width）的场景，给通栏加背景色
    演示地址
    http://js.jirengu.com/zira/ed...

    <style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

    查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug。

    因为layout是固定宽度，而有背景色的上下通栏是自适应的屏幕宽度，所以当小于.layout的宽度的时候，会出现滚动条。

    下面我们进行优化，给 body (或者layout)设置min-width 去掉滚动背景色 bug

    <style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  body{
    min-width: 960px;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

    两栏布局

    clipboard.png

    两栏布局
    特点： 一栏固定宽度， 另外一栏自适应撑满

    如何实现
    浮动元素 + 普通元素margin
    范例
    http://js.jirengu.com/loxe/ed...

      <style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;//
    }
    .main{
      margin-left: 210px;//
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  </style>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

    如果侧边栏在右边呢？

    侧边栏在右
    谨记页面元素的渲染顺序 main 在下面
    范例
    http://js.jirengu.com/qaca/edit

      <style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;//
    }
    .main{
      margin-right: 210px;//
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  </style>

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

    三栏布局

    clipboard.png

    特点： 左右两栏固定宽度， 中间主要区块自适应撑满

    如何实现
    范例
    http://js.jirengu.com/jige

        #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  <div id="content">
    <!-- 为什么不是main在前面,因为浮动的特性 -->
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

    圣杯布局

    利用浮动和负边距的特性实现的两(三)栏布局。圣杯布局和双飞翼布局
    是老的布局方式，2012年以前流行，现在已不流行，但是面试可能会考察到，所以记录一下

    why it?

    • 是三列布局，两边固定宽度，中间自适应
    • 中间内容元素在 dom 元素次序中优先位置

    按照注释编号，一行行实现观察效果
    范例

    http://js.jirengu.com/poya/1/...

      <style>
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
      padding-left: 100px;  /*5*/
      padding-right: 150px; /*5*/
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }

    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/

      margin-left: -100%;  /*4*/
      position: relative;  /*6*/
      left: -100px;        /*6*/
    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/

      margin-left: -150px; /*5*/
      position: relative;  /*7*/
      left: 150px;         /*7*/

    }
    .main{
      height: 350px;       /*1*/
      background: blue;    /*1*/

      width: 100%;         /*3*/
    }

  </style>

  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

    缺点：.mian的最小宽度不能小于.aside的宽度

    双飞翼布局

    双飞翼布局
    按照注释编号，一行行实现观察效果
    范例
    http://js.jirengu.com/fevifum...

    解决了圣杯布局的缺点，多写了一个wrap。

      <style>

    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{

    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }

    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/

      margin-left: -100%;  /*4*/

    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/

      margin-left: -150px; /*5*/


    }
    .main{
      /* background: blue;  */   /*第1步添加，第7步注释掉*/
      /* height: 350px;  */      /*第1步添加，第7步注释掉*/

      width: 100%;         /*3*/
    }

    .wrap{
      margin-left: 100px;  /*6*/
      margin-right: 150px; /*6*/
      background: blue;    /*7*/
      height: 350px;       /*7*/

    }

  </style>

  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

    这两个布局都比较老，用了浮动和负边距的特性。面试可能会问到。

    如果用flex实现三栏布局，且main在dom次序最上面，那么只需要contain使用flex布局，mainflex:1;order:2两边固定宽度即可

    使用flex写几个简单布局

    clipboard.png

    1.flex手机页面基本布局

    clipboard.png

    main部分设置了overflow:auto之后，出现滚动条，header和下方按钮固定
    代码演示地址：http://js.jirengu.com/saqulus...

    2.flex产品列表布局

    例如九个产品，每行三个展示

    clipboard.png

    演示地址：http://js.jirengu.com/xecuqam...

    3.flex PC布局(三栏布局，左右两栏定宽，中间内容自适应)

    
<header>header</header>
  <div class="content">
    <div class="aside">aside固定宽度</div>
    <div class="main">main自动填充宽度</div>
    <div class="nav">nav固定宽度</div>
  </div>
<footer>footer</footer>

    header,footer{
  height:100px;
  background:#ccc;
}
.content{
  display:flex;//
}
.content .aside{
  width:250px;
  background:red;
}
.content .main{
  height:500px;
  flex:1;//
}
.content .nav{
  width:250px;
  background:green;
}

    clipboard.png

    flex:1,自动填充宽度。

    4.flex完美居中

    .content{
  display:flex;
  justify-content:center;
  align-items:center;
}

    不管里面的子元素宽高是多少，都在垂直和水平方向居中。

    布局的套路

    clipboard.png
    口诀
    float：

    • 儿子全加 float: left （right）
    • 老子加 .clearfix

    在做平均布局的时候，如果左右宽度不够，可以用负margin。例如margin: 0 -4px;
    flex：

    • 老子加 display: flex
    • 老子加 justify-content: space-between; 
    .clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}

    原则

    • 不到万不得已，不要写死 width 和 height
    • 尽量用高级语法，如 calc、flex
    • 如果是 IE，就全部写死

    浮动布局套路

    套路：

    • 儿子全加 float: left （right）
    • 老子加 .clearfix

    .clearfix:after{

    content: '';
display: block;
clear: both;

    }
    .clearfix{

    zoom: 1;

    }

    举例：

    

<div class="father clearfix">
  <div class="child1 child">儿子1</div>
  <div class="child2 child">儿子3</div>
</div>


    .child{
  float:left;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

.father{
  border:1px solid black;
}
.child1{
  width:30%;//
  background:red;
}
.child2{
   background:yellow;
  width:70%;//
}

    clipboard.png

    可以看到不管如何拉长，child1和child2永远占30%和70%。且两个child DIV只用来布局，然后内容写在里面，如果要加padding等边距，就得在里面再写一个div，child相当于是一个套在外面的wrapper，用来布局。

    演示地址：http://js.jirengu.com/socoget...

    做布局的时候，要分清布局块和内容块！布局块DIV只用来布局，内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块，内容块是自己设计的独立元素。

    例子：简单的头部导航布局

    clipboard.png

    演示地址：http://js.jirengu.com/wabuluz...

    举例使用：用float做平均布局

    宽800的div上显示8张图，每列四张。
    演示地址：
    http://js.jirengu.com/casodig...

    clipboard.png

    clipboard.png
    加一个wrapper的作用是使用负margin扩大8像素，为了不与外面的pics冲突（pics用来布局，居中）所以再包裹一个div。又一次显示出布局块和内容块的区别。

    如果使用flex布局，只需要三行代码。

    diaplay：flex;
flex-wraP:wrap;
justify-content:space-between;

    自动平均布局。

    使用calc

    width是194px，定死的。如果不自己算picture的宽度
    那么就可以使用
    width：calc(25% - 8px)

    左右不一样比例的布局

    1:3使用float：

    <div class="father clearfix">
  <div class="child left"></div>
  <div class="child right"></div>
</div>

    CSS:

    
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

.father{
  width:500px;
  background: #red;
  border:1px solid red;
}
.child{
  height:200px;
  float: left;
}
.left{
  width:33.33333%;
  background: #ccc;
}
.right{
  width:66.66666%;
  background: #777;
}

    如果想在1:3的块之间加空隙，那么这个已经成比例的布局块不要动，在里面加div,然后里面的div加上margin-right就行了。还有一种方法就是width:cacl(33.3333% - 20px).

    使用flex：

    <div class="father2">
  <div class="child2 left2"></div>
  <div class="child2 right2"></div>
</div>
    .father2{
  width:500px;
  border:1px solid red;
  display:flex;
}
.child2{
  height:200px;
}
.left2{
  flex:1;//
  background: #ccc;
  border:1px solid green;
}
.right2{
  flex:0 0 33.3333%;//
  background: #777;
  border:1px solid blue;
}

    关键在于：

    flex:1自动占满剩余空间！
    flex:0 0 33.3333%固定宽度为33.3333%！

    或者也可以直接父亲display：flex，儿子1width:cacl(33.3333% - 20px),儿子2width:cacl(66.6666%)

    clipboard.png

    演示地址：
    http://js.jirengu.com/qovefuw...

    阮一峰的flex布局实例教程：
    http://www.ruanyifeng.com/blo...

    PC网页转成响应式的手机布局

    在需要修改的地方加上媒体查询，然后修改相关CSS。主要需要修改的是显示的宽度width：auto,直到左右不能滑动为止。

    请看我的博客，媒体查询CSS5:移动端页面(响应式)

    图片处理技巧

    为了防止图片收缩，尽量不要使用img标签，使用div标签然后使用

    background:transparent url('xxx') no-repeat center;
background-size:cover;

    尽量完整显示图片

    练习

    分别用float和flex实现左右布局

    如图：clipboard.png
    float:
    http://js.jirengu.com/goqebat...
    flex:
    http://js.jirengu.com/folonow...

    做一个平均布局

    clipboard.png
    请打开这个 jsbin，完善代码，
    要求用 float + 负 margin 做一个平均布局

    演示地址：
    http://js.jirengu.com/jaxepij...

    把上面的布局用 flex 实现
    http://js.jirengu.com/huyihim...

    网页设计css3flex布局
    风彻
    1.5k 声望142 粉丝
    « 上一篇
    CSS6：flex布局
    下一篇 »
    CSS8:到底什么是BFC？

    引用和评论

    推荐阅读
    头像
    用一个例子理解JS函数的底层处理机制

    风彻阅读 1.2k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新