1、认识布局
1、布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置，布局模式有很多，不同设计者有不同的设计理念。如何利用CSS来设置网页布局？我们常用的就是行布局，多列布局，圣杯布局，双飞翼布局。
2、经典的行布局
1、学习经典的行布局，我们需要学习基础的行布局，行布局的自适应，行布局自适应限制最大宽，行布局垂直水平居中。行布局固定宽，行布局某部位自适应，行布局导航随屏幕滚动。
2.1、基础的行布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0px;padding:0px;color:#fff;text-align:center;}
.container{width:800px;height:1000px;background:#4c77f2;margin:0 auto;}
</style>
</head>
<body>
<div class="container">这是页面内容</div>
</body>
</html>
给元素设置margin：0 auto；即设置上下margin为0，左右为自动，可以使元素水平居中。
2.2、行布局的自适应
1、自适应就是随着浏览器的大小而变化，设置width为100%就行。
2.3、行布局自适应限制最大宽
1、设置max-width就可以，当浏览器的宽度小于max-width这个宽度，元素就会自动比例缩小。
2.4、行布局垂直水平居中
我们可以通过设置position的绝对定位属性，设置距离上面和左面都是50%，但这并不能让div居中，只是让div的左上端点居中，所以我们还要让整个div向上和向左移动自身的一半。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0px;padding:0px;color:#fff;text-align:center;}
.container{width:800px;height:200px;background:#4c77f2;position:absolute;top:50%;left:50%;margin-left:-400px;margin-top:-100px;}
</style>
</head>
<body>
<div class="container">这是页面内容</div>
</body>
</html>2.5、行布局导航遮蔽问题
1、我们一般写导航，导航是不会随着页面的滚动而变化，一直都在页面的顶端，而设置position为fixed会导致导航元素覆盖下面的一部分元素，我们的办法就是给导航下面的元素设置padding-top，使被遮蔽的部分向下移动。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0;color:#fff;text-align:center;font-size:16px;}
.header{width:100%;height:50px;background:#333;margin:0 auto;line-height:50px;position:fixed;}
.banner{width:800px;height:5:300px;background:#30a457;margin:0 auto;line-height:300px;padding-top:50px;}
</style>
</head>
<body>
<div class="header">这是页面头部</div>
<div class="banner">这是页面banner图</div>
<div class="container">这是页面内容</div>
<div class="footer">这是页面底部</div>
</body>
</html>3、经典的列布局
1、关于列布局我们需要学习一些东西：两列布局固定，两列布局自适应，三列布局固定，三列布局自适应。
3.1、两列布局固定与自适应
我们给两列分别设置浮动属性，宽度百分比加起来为100%即可。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
body{margin:0;padding:0;color:#fff;text-align:center;}
.container{width:90%;height:1000px;margin:0 auto;}
.left{width:60%;height:1000px;background:#1a5acd;float:left;}
.right{width:40%;height:1000px;background:#5880f9;float:right;}
</style>
</head>
<body>
<div class="container">
<div class="left">这里是左侧</div>
<div class="right">这里是右侧</div>
</div>
</body>
</html>在浏览器中的效果为下：
3.2三列布局的固定和自适应
三列布局和两列差不多，，宽度百分比加和为100%，浮动属性分别设置就好。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
body{margin:0;padding:0;color:#fff;text-align:center;}
.container{width:90%;height:1000px;margin:0 auto;}
.left{width:20%;height:1000px;background:red;float:left;}
.right{width:20%;height:1000px;background:yellow;float:right;}
.middle{width:60%;height:1000px;background:blue;float:left;}
</style>
</head>
<body>
<div class="container">
<div class="left">这里是左侧</div>
<div class="middle">这里是中间</div>
<div class="right">这里是右侧</div>
</div>
</body>
</html>在浏览器的效果如下：
4、圣杯布局
1、布局要求：
2、代码展示：设计圣杯布局的步骤就是都设置浮动属性，中间层设置宽100%，并有内边距，左右内边距就是两侧的具体宽度，然后分别给两边的左层和右层设置负的外边距使其上移，然后使用定位属性设置左右边距即可。下面三张图即为步骤图，总体来说，圣杯布局的三个重要的特性：相对布局，浮动和负边距。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
body{min-width:700px;}/*设置浏览器缩小的最小宽度*/
.middle{width:100%;background:#1a5acd;}
.container{padding:0 220px 0 200px;}
.left,.middle,.right{position:relative;float:left;min-height:300px;}
.left{width:200px;background:red;margin-left:-100%;left:-200px;}/*给浮动属性设置负的外边距，能使元素上移，而-100%能确保上移并在最左侧*/
.right{width:220px;background:yellow;margin-left:-220px;right:-220px;}
</style>
</head>
<body>
<div class="container">
<div class="middle">这里是中间</div><!--中间优先展示-->
<div class="left">这里是左侧</div>
<div class="right">这里是右侧</div>
</div>
</body>
</html>
5、双飞翼布局
双飞翼布局是对圣杯布局的改良，去掉了相对布局，只需浮动和负边距。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
body{min-width:700px;}/*设置浏览器缩小的最小宽度*/
.container{width:100%;}
.middle{margin-left:200px;margin-right:220px;background:red;min-height:300px;}
.left,.container,.right{float:left;min-height:300px;}
.left{width:200px;background:blue;margin-left:-100%;}
.right{width:220px;background:yellow;margin-left:-220px;}
</style>
</head>
<body>
<div class="container">
<div class="middle">这里是中间</div><!--中间优先展示-->
</div>
<div class="left">这是左边</div>
<div class="right">这是右侧</div>
</body>
</html>在浏览器中的效果是：
