flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>flex box 弹性布局 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body{height:100%margin:0}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box
-webkit-box-orient:vertical/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1/*分配剩余的所有空间*/} .header{height:50pxmin-width:500px}/*顶部模块高度定死*/
.logo{width:100pxheight:50pxbackground:#99f}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50pxbackground:#ccc}/*nav模块不固定宽度*/
.content{min-height:100px}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/
.content,.header{display:-webkit-box/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1}
.con2{-webkit-box-flex:1}
.con1{width:200pxbackground:#f99}/*固定宽度，高度不定*/
.con2{min-width:200pxbackground:#999}/*同上的min-height*/
.con3{width:100pxbackground:#9f9}/*固定宽度，高度不定*/
.footer{height:50pxmin-width:500pxbackground:#ccc}/*固定高度*/
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<div class="logo">logo部分，宽高固定</div>
<div class="nav">nav部分，高度固定，宽度自适应</div>
</div>
<div class="content">
<div class="con1">内容初始化第1模块</div>
<div class="con2">内容初始化第2模块</div>
<div class="con3">内容初始化第3模块</div>
</div>
<div class="footer">底部，宽度不定，高度固定</div>
</body>
</html>
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
