布局之深度理解
布局是将各种元素图片及文字组合起来，又叫板式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
网页是由传统纸媒的延伸
网页的特点：1、可以自适应宽度（根据显示器的不同分辨率可以设置按百分比自适应宽度的网页）
2、网页的长度理论上没有限制
分栏又被称分列，常见的布局有，一列布局、两列布局、三列布局、混和布局
前端设计师是如何运用css的浮动和定位等实现UIl计师的要求进行艺术和技术关键融合的岗位
怎么来制作布局
1、一列布局：通常作为网站的首页，例如百度首页（简单明了，主题突出）
一列布局最多是固定宽度的，不适合多行文本，这样会容易串行
html：<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
css : .top{height:100px;background:blue;}
.main{height:300px;width:800px;background:#ccc;margin:0 auto;}
.foot{height:100px;width:800px;background:#900;margin:0 auto;}
2、两列布局
html： <div class="main">
<div class="left"> </div>
<div class="right "> </div >
</div >
css : body{margin:0 padding:0}
.main{width:800px;margin:0 auto;}
.left{width:220px;height:500px;float:left;background:#ccc;}
.right{width:570px;height:500px;float:right;background:#ddd;}
浮动（float）和 绝对定位（position：absolute）,可以让元素脱离文档流
3、三列布局
html： <div class="left"> </div>
<div class="middle"> </div >
<div class="right "> </div >
css : body{margin:0 padding:0}
.middle{width:33.3%;height:500px;float:left;background:#999;}
.left{width:33.3%;height:500px;float:left;background:#ccc;}
.right{width:33.3%;height:500px;float:right;background:#ddd;}
特殊案例：要求左侧200px，右侧300px，中间是自适应宽度
css : body{margin:0 padding:0}
.middle{height:500px;background:#999;margin：0 310px 0 210px；}
.left{height:500px;background:#ccc;position：absolute；left：0；top：0；}
.right{width:300px;height:500px;background:#ddd;position：absolute；right：0；top：0；}
浮动现在没什么用，去除浮动
4、混合布局（用到的最多布局）
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9;clear:both;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">
<div class="r_sub_left">sub_left</div>
<div class=" r_sub_right">sub_right</div>
</div>
</div>
<div class="footer">footer</div>
</body>
