排版
布局与排版（多兰布局进行专业设计）p488
一：布置元素
在块元素，内联元素和盒模式的基础上 下面看浏览器如何把所有元素包含在一个页面中，并决定它们放在声明地方？
<一>使用流： 浏览器用流来布置页面上的 xhtml元素。 览器浏xhtml 文件的开头开始，从右到尾跟着元素的流显示它遇到的每个元素。
1：（块元素）从头流到尾的，每两个元素都有换行每个元素默认占据浏览器窗口的整个宽度。
2： 内联元素： 在水平方向上一个接一个地流，从左上方到右下方。
3：怎样把它们放在一起工作。我们使用一个典型的有标题¸段落和一些内联元素（如span） 一些强调元素，甚至图像的页面，当然不能忘记了内联文本
<二> 流和盒子
浏览器布置块元素和内联元素的另一要点，浏览器根据元素的类型对边界做不同处理
1： 当浏览器并列放两个内联元素时：浏览器并排放置两个内联元素，且这些元素都有边界时，它在元素之间创建足够空间，该空间等于两个边界之和
（如果左边的元素有10像素的边界 右边的又20像素的边界，那么两个元素之间就有30像素的空间）
2： 当浏览器并列放两个块元素元时，它把共同的边界重叠到一起。重叠边界的高度是大边界的值。
<三>飘移元素（被移出正常的流，放到左边或右边）
首先; 给它一个标识符，给某一段落设置一个“id”(神奇的漂移段落) 简称“amazing”.
其次： 甚至宽度
最后： 开始漂移：
来添float属性。float属性值可以设置为left或right
#amazing{
width: 200px;
float: right;
}
把“某元素”移到标题下
（必须设置漂移元素的宽度 而 如果设置了内容区的宽度，当页面随着浏览器的宽度重新调整时它的宽度会固定不变。 在设置中移动的部分要比主内容区要窄）
分栏（重叠）
如果把浏览器的宽度调大一些，页脚就会上升到移动部分的下面 因为移动部分不在流中，所以页脚会忽略它 因此我们应该设置页脚（用同样的边界技巧设置）
处理重叠问题
clear属性是用来指定一个块元素的左边或右边或两边，不能漂移
利用css中的clear属性解决这问题可以设置一个元素的这个属性，是元素流入页面中，不允许漂移元素出现在你不想要的位置。如（左边或右边或两边）
如
#footer{
clear: right;
}
以上的设计叫做流动布局
流动布局， 当你扩大浏览器窗口时，页面内容也扩大来填满页面。
<四>：冻结设计p517
内容宽度是固定的，不会随浏览器窗口的变化而扩大或缩小。
优点 是能控制好你设计，
缺点 是不能有效的利用浏览器宽度
（1）以便于当用户调整屏幕时，跟原来一样。冻结布局把元素锁住，冻结到页面上所以不能移动。因此避免许多窗口扩展带来的问题。
（2）冻结布局只需要给xhtml 增加一样东西，再给css 增加一条规则。
（3）在你的xhtml中添加一个新的id 为“allcontent”的<div>元素。这个<div>包围页面中的所有内容。所以把开始<div>标签放到标题<div>之前
结束标签放在footer<div>之后
<body>
<div id="allcontent">
<div id="hearder">
.....
</div>
</div>
</body>
(4)改变css
现在用这个<div> 来把所有元素的大小和“allcontent” <div> 中的内容限制固定像素。以下的css可以做到这些
#allcontent{
with: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color： #675c47;
}
<五>; 凝胶物（流动的与冻结之间的状态）
内容区的宽度是固定的，但边界随着浏览器窗口的变化扩大或缩小
优点：是能控制好你设计，更能引人注目
把内容放置浏览器中央
原因（冻结布局有几个好处但是当你把浏览器调宽时外观明显变差）
不是把allcontent<div>的左右边界固定。而是把边界设置成“auto
#allcontent{
with: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color： #675c47;
margin-left: auto;
margin-right: auto; 。当一个内容区的宽度设置为“auto”时，浏览器根据内容区的需要调整内容区的宽度
把边界设置为"auto",浏览器会计算出合适的边界是多少，并且保证左右边界相等。以使内容居中。
}
<六>：static是默认布局，把元素放在页面的正常流中
< 七>： 绝对布置（无需漂移元素）可以把元素放在页面的任何位置 。默认的状态下，绝对布置相对于页面边放置元素
top、right、bottom、和left.属性来放置绝对、固定和相对布置的元素。
利用cssd 一个特点，就是用它可以在页面上的精确的放置元素，用绝对布置创制一些好看的效果
当一个元素被绝对放置了，浏览器做的第一件事是把它从流中完全移走。接着浏览器把元素放置在top和right属性指明的位置（可以用bottom或left）
如：id为“annoyingad"的<div>
#annoyingad{
position: absolute;
top: 150px;
left: 100px;
with: 400px;
}
注：绝对布置元素对其他元素没有任何影响
绝对布置元素可以相互层叠放置（如果几个绝对布置的元素放在页面的同一位置，用z-index的属性来指定它的层叠位置）
<八>: 固定布置
固定布置非常直接。使用固定布置指定元素的位置和使用绝对布置一样，不过这个位置是相对于浏览器窗口边缘的偏移，而不是页面
固定布置放置的内容放在一个地方再也不动（只要显示页面它们就一直在那个位置）
<九>：相对布置
仍然是页面流中的一部分，不过在最后一刻，就在元素被显示之前浏览器偏移它的位置
<十>：三栏布局有待参考csss设计的在线资源http://www.headfirstlabs.com/books/hfhtml/chapter12/threecolumn/
