css布局技术的根本都是3个基本概念：定位，浮动和外边距操纵。
1. 使用外边距让设计居中
body{
text-align:center;
}
.wrapper{
width:920px;
margin:0 auto;
}
<body>
<div class='wrapper'>
</div>
</body>
2. 基本浮动的布局
2.1两列的浮动布局
body {
text-align: center;
min-width: 960px;
}
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
.content {
overflow: hidden;
}
.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display:inline;
}
.content .secondary {
width: 230px;
float: left;
display:inline;
}
<div class='content'>
<div class='primary'>
</div>
<div class='secondary'>
<div>
<div>
一个向左浮动，一个向右浮动。利用overflow:hidden清楚浮动。display:inline避免ie的双外边距浮动产生的bug（详细见第九章），用padding建立视觉隔离带，避免在不符合标准的浏览器中将浮动元素下移。
我没有把创建的两个元素命名为primary-content和secondary-content，而是简单的称为primary和secondary。这两个元素嵌套在content元素中，可以创建关联，这样有两个好处。首先不必为每个元素创建新的类名，而应使用层叠找到元素，更重要的是可以多次使用primary和secondary类，这会创建非常灵活的命名系统
2.2三列的浮动布局
body {
text-align: center;
min-width: 960px;
}
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
.content {
overflow: hidden;
}
.content .primary {
width: 670px;
float: right;
}
.content .secondary {
width: 230px;
float: left;
}
.content .primary .primary {
width: 400px;
float: left;
}
.content .primary .secondary {
width: 230px;
padding-right: 20px;
float: right;
}
<div class='content'>
<div class=primary>
<div class=primary></div>
<div class=secondary></div>
</div>
<div class='secondary'>
</div>
</div>
注意将padding-right放在了.content.primary.secondary。
3.固定宽度，流式和弹性布局
固定布局：宽度以像素为单位
流式布局：宽度以百分比为单位，添加min-width避免布局宽度太小，添加max-width避免布局宽度太大不便于阅读。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Col Liquid Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff
================================== */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
background-color:#D4D4D4;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
.branding h1 {
margin: 0;
}
.wrapper {
background-color: #fff;
}
.header {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
.nav {
list-style: none;
background-color:#eee;
padding: 20px;
}
.content .secondary .promo {
padding-left: 20px;
}
.footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
}
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
max-width: 125em;
min-width: 62em;
}
.content {
overflow: hidden;
}
.content .primary {
width: 72.82%;
float: right;
}
.content .secondary {
width: 25%;
float: left;
}
.content .primary .primary {
width: 59.7%;
float: left;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2.63%;
float: right;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Branding</h1>
</div>
<div class="content">
<div class="primary">
<div class="primary">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
</div>
<div class="secondary">
<h2>Magna aliquam erat volutpat</h2>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="secondary">
<ul class="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<div class="promo">
<p>Promo item goes here</p>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
4.流式和弹性图像
对于
跨越大区域的图像像页眉处，可以考虑用背景图像
#branding{
height:171px;
background:url(/branding.png) no-repeatt left top;
}
<div id='branding'></div>
或者
#branding{
width:100%;
overflow:hidden;
}
<div id='branding'>
<img src='brangding.png' width='1600' height='171' />
</div>
对于常规内容图像，可以设置图像百分比宽度，并添加max-width以免图像失真。
.new img{
width:25%;
max-width:200px;
float:left;
display:inline;
padding:2%;
}
.new p{
width:68%;
float:right;
display:inline;
padding:2% 2% 2% 0;
}
5.高度相等的列
.box {
padding-bottom: 220px;
margin-bottom: -200px;
background: #89ac10 url(img/top.gif) no-repeat left top;
}
总结
学习了固定宽度的布局
学习了流式布局，
学习了流式图像
学习了高度相等的列。
