<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body, div {padding:0margin:0}
.clear {clear:both}
.warp {width:1000px}
.warp #header {
height: 60px
background: #DDDDDD
padding: 0 10px 0 20px
}
.warp #header h1 {
margin: 0
padding: 10px 0}
.warp #sidebar1 {
border:1px solid #000
width: 150px
background: #EBEBEB
padding: 15px 10px 15px 20px}
.warp #sidebar2 {
border:1px solid #000
width: 160px
background: #EBEBEB/* 将显示背景色，其宽度等于栏中内容的长度，*/
padding: 15px 10px 15px 20px/* 填充使 div 的内容与边缘保持一定的距离 */
}
.warp #mainContent {
margin: 0 10px/* 此 div 元素的左边距和右边距会在页面两侧上创建两个外部栏。无论侧栏 div 中包含多少内容，栏内的空间都将保留。 */
padding: 0 10px/* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
border:1px solid #000
}
.warp #footer {
padding: 0 10px 0 20px/* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD
}
.warp #footer p {
margin: 0/* 将脚注中第一个元素的边距设置为零将避免出现可能的边距重叠（即 div 之间出现的空白）*/
padding: 10px 0/* 就像边距会产生空白一样，此元素上的填充也将产生空白，但不会出现边距重叠问题 */
}
.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */
float: right
}
.fltlft { /* 此类可用来使页面上的元素向左浮动 */
float: left
}
</style>
</head>
<body>
<div class="warp">
<div id="header">
<h1>标题</h1>
<!-- end #header --></div>
<div id="container">
<div id="sidebar1" class="fltlft">
<h3>Sidebar1 内容</h3>
<!-- end #sidebar1 --></div>
<div id="sidebar2" class="fltrt">
<h3>Sidebar2 内容</h3>
<!-- end #sidebar2 --></div>
<div id="mainContent" class="fltlft">
<h1>主要内容 </h1>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
<!-- end #mainContent --></div>
<br class="clear" />
<!-- end #container --></div>
<div id="footer">
<p>脚注</p>
<!-- end #footer --></div>
</div>
</body>
</html>
1.我们常用的margin:0 auto方法这个方法是大家用的最多的方法，使用的时候必须为容器制定宽度！
例子：
#main {width:960pxmargin:0 auto}
这个在大部分浏览器里面都可以很好的实现效果。
但是在IE6之前的版本中却不被支持，下面看一下第二种方法
2. 用text-align实现居中，这个方法其实算是一个hack。
这个方法把整个页面当作文本对待，把body的属性设置为{text-align:center}
这样的话页面所有内容全部居中了，还需要把页面总的外框（wrap）属性{text-align:left}
这样的话页面就居中了！
代码：
body{text-align:center}
wrap {text-align:left}
3.负的外边距
负外边距需要和绝对定位同时使用，才会生效。
首先需要一个{wrap}来包裹所有的页面内容，并将其定位到页面的50%。这样{warp}容器据浏览器左边50%的距离。
然后再用负边距，将容器左边距设置为{wrap}宽度的一半即可。
看代码：
#wrap {width:800pxposition:absoluteleft:50%margin:0 0 0 -400px}
这样wrap就居中对齐了，这个方法基本上可以兼容所有的浏览器了。
什么是flex布局？
传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
