常见布局（PC）

固定宽度布局——缺点：屏幕尺寸不够时会出现滚动条。
弹性布局（布局随浏览器变化）——缺点：代码复杂。
响应式布局——多终端（PC、Pad、Phone）。

单栏布局

常见布局：


    头部
    内容
    尾部

进化（减少无意义标签，便于控制局部）

头部
内容
尾部

通过#xxx设置样式背景等，
通过.xxx设置内容排版等。

通栏布局


    头部


    内容


    尾部

注：可能会出现“滚动背景色”，此时给body设置"min-width"即解决问题。

双列布局

一般为一列固定宽度，另一列宽度自适应。

例：
HTML：


    aside
    main

CSS：

.aside {
    width: 200px;
    min-height: 300px;
    float: left;
}
.main {
    margin-left: 210px;
}
.clearfix {
    content: "\200B";
    display: block;
    clear: both;
    height: 0;
}

三列布局

一般为两侧固定宽度，中间自适应。

例：
HTML：


    aside-left
    aside-right
    main

CSS：

.aside {
    width: 200px;
    min-height: 300px;
    float: left;
}
.aside.right {
    float: right;
}
.main {
    margin-left: 210px;
    margin-right: 210px;
}
.clearfix {
    content: "\200B";
    display: block;
    clear: both;
    height: 0;
}

注：三列设置浮动时要注意html中的文档顺序问题，要保证浮动元素先渲染（即浮动的写在不浮动的前面），如果不想纠结于此，那么就都设置浮动。

一些点

max-width会在屏幕不够大时自动缩放内容，但有可能会影响内容的显示。
内部元素居中
一般情况下，使用如下CSS代码：

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

或者：
给想居中的块套个div，设置margin: 0 auto;，再给块设置float。
若为IE6等不支持inline-block的情况：

.child {
    *display: inline;
    *zoom: 1;
}

使用inline-block设置水平垂直绝对居中

代码

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: #f1f1f1;
  width: 600px;
  height: 400px;
  text-align: center;
}
main {
  background-color: #fff;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
}
.wrapper:before,
.wrapper:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

JSBin地址

Flex布局

Flex之前的布局

normal flow
float+ clear
position: relative + absolute
display: inline-block
负margin

Flex出现

一种新的布局方式——Flex布局

块级布局侧重垂直方向，行内布局侧重水平方向，Flex布局与方向无关。
Flex布局可实现空间自动分配、自动对齐。
Flex适用于简单的线性布局。

flex.png

常用Flex属性

Flex container属性
flex-direction: row（行展示）、row-reverse（反向行展示）、column（列展示）、column-reverse（列反向展示）;
flex-wrap: no-wrap（不换行，自动对齐）、wrap（换行）;
justify-content: space-between（占两头，多余空间匀中间）、space-around（多余空间均匀分布周围）、flex-start（从起点开始排布）、flex-end（从终点开始排布）、center（居中排布）;
align-items: stretch（侧轴，伸展至和最高一样高）、flex-start（侧轴起点）、flex-end（侧轴终点）、center（侧轴居中）；
align-content: 多行之间的对齐方式调整（使用较少）。
Flex item属性
flex-grow: 增长比例（自动分配空白空间）；
flex-shrink: 收缩比例（空间不够时自动收缩）；
flex-basis: 默认大小（一般不用）；
order: 顺序（强制排序，每个都得排）；
align-self: 给单独的元素设置对齐方式；

使用Flex布局

手机页面布局

几个要点：

重置样式

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;/* 使用IE盒模型，便于尺寸控制 */
}

布局的几个重要代码

.layout {
  height: 100vh;/* 排满屏幕 */
  margin: 0 auto;
  background-color: #ccc;
  display: flex;
  flex-direction: column;

内容部分几个重要代码

main {
  flex-grow: 1;/* 布满空白位置 */
  overflow: auto;/* 内容超出时可滚动 */
}

产品列表

几个重要代码

.layout>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* 宽度设在了layout，为700px */
}

.layout>ul>li {
  margin: 20px 0;
  padding: 10px;
  background-color: #fff;
  border: 2px solid #ddd;
}

JSBin地址

PC页面布局

（略，见后实例）

完美居中

.parent {
  height: 400px;
  background-color: #ccc;
  display: flex;
  justify-content: conter;
  align-items: center
}

一些实例

注：多行文本溢出显示省略号

webkit的可以参考：
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;/* 第几行想开始省略，就填几 */
  overflow: hidden;
不保证有效果，私有前缀的属性属于实验属性，可能随着浏览器的升级移除。

导航栏
导航栏-float
导航栏-flex
两栏布局
两栏布局-float
两栏布局-flex
三栏布局
三栏布局-float
三栏布局-flex
列表
列表
图文
图文

9. CSS布局