常见布局（PC）
- 固定宽度布局——缺点：屏幕尺寸不够时会出现滚动条。
- 弹性布局（布局随浏览器变化）——缺点：代码复杂。
- 响应式布局——多终端（PC、Pad、Phone）。
单栏布局
- 常见布局：
<div id="layout">
<div id="header">头部</div>
<div id="main">内容</div>
<div id="footer">尾部</div>
</div>
- 进化（减少无意义标签，便于控制局部）
<div id="header" class="layout">头部</div>
<div id="main" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>
通过#xxx设置样式背景等，
通过.xxx设置内容排版等。
- 通栏布局
<div id="header">
<div class="layout">头部</div>
</div>
<div id="main">
<div class="layout">内容</div>
</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
注：可能会出现“滚动背景色”，此时给body设置"min-width"即解决问题。
双列布局
一般为一列固定宽度，另一列宽度自适应。
- 例：
- HTML：
<div id="content clearfix">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
- CSS：
.aside {
width: 200px;
min-height: 300px;
float: left;
}
.main {
margin-left: 210px;
}
.clearfix {
content: "\200B";
display: block;
clear: both;
height: 0;
}
三列布局
一般为两侧固定宽度，中间自适应。
- 例：
- HTML：
<div id="content clearfix">
<div class="aside left">aside-left</div>
<div class="aside right">aside-right</div>
<div class="main">main</div>
</div>
- 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设置水平垂直绝对居中
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<main>123456</main>
</div>
</body>
</html>
* {
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;
}
Flex布局
Flex之前的布局
- normal flow
- float+ clear
- position: relative + absolute
- display: inline-block
- 负margin
Flex出现
一种新的布局方式——Flex布局
- 块级布局侧重垂直方向，行内布局侧重水平方向，Flex布局与方向无关。
- Flex布局可实现空间自动分配、自动对齐。
- Flex适用于简单的线性布局。
常用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;
}
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 - 列表
列表 - 图文
图文
