body{ padding:0margin:0}
.header,.nav,.content,.link,.footer{ clear:bothwidth:1000pxmargin:0 auto 10pxoverflow:hidden}
.header{ height:80pxbackground-color:red}
.nav{ height:40pxbackground-color:blue}
.content{ height:200pxbackground-color:pink}
.left{ float:leftwidth:200pxheight:200pxbackground-color:yellow}
.main{ float:leftwidth:480pxheight:200pxmargin:0 10pxbackground-color:orange}
.right{ float:rightwidth:300pxheight:200pxbackground-color:yellow}
.link{ height:50pxbackground-color:green}
.footer{ margin-bottom:0height:100pxbackground-color:black}
html代码：
<div class="header">头部</div>
<div class="nav">导航条</div>
<div class="content">
<div class="left">左侧栏</div>
<div class="main">主内容区域</div>
<div class="right">右侧栏</div>
</div>
<div class="link">友情链接</div>
<div class="footer">脚部</div>
高度和背景颜色为测试用，具体写网页时可以去掉
css与表格不同，css是样式和代码分离也就是一个页面或几个页面对应一个样式表或者多个样式表。而表格是所见即所得，样式在表格里面写。因此当一个页面需要做局部的调整，如果是css写的只需要找到css文档，找到所修改的内容所对应的样式表直接修改就好了。而table的则需要找到页面的对应位置(table页面代码好乱的，你懂得)，然后修改样式。再有如果所应用的页面是静态的例如cms(内容管理系统)所生成的页面是静态页面，如果用css做只需要修改css，那么所有引用css的都自动改变样式了，而是用table的则需要找到每个页面，都进行修改。这样说你应该懂了吧。来点简单的添加长宽高吧。
css的：
样式表：
#wrap{width:100pxheight:50px}
页面代码：
<div id="wrap">内容</div>
table的
页面代码
<table width="100px" height="50px">
<tr><td>内容</td></tr>
</table>
我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列
flex 布局的优势
1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
但flex 的缺点在于，它不支持低版本的 IE 浏览器。
我们来明确几个概念
弹性盒子
弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。
子元素/弹性元素
子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子）。
使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
flex-direction这个属性默认子元素从左到右排列的。
子盒子如何在父盒子里面水平对齐方式如下所示，
子盒子如何在父盒子里面垂直对齐（单行），如下所示
flex-wrap控制是否换行，如下
flex-flow是flex-direction、flex-wrap的简写形式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row并且设置换行，flex-wrap:wrap这样这个属性的设置才会起作用。
