HTML&CSS基础篇之十四：布局与排版

代码

body {  font:                small/1.6em Verdana, Helvetica, Arial, sans-serif;}h1, h2 {  color:               #007e7e;}h1 {  font-size:           150%;}h2 {  font-size:           130%;}#guarantee {  line-height:         1.9em;  font-style:          italic;  font-family:         Georgia, "Times New Roman", Times, serif;  color:               #444444;  border:              1px dashed white;  background-color:    #a7cece;  padding:             25px;  padding-left:        80px;  margin:              30px;  margin-right:        250px;  background-image:    url(images/background.gif);  background-repeat:   no-repeat;  background-position: top left;}#elixirs {  border:              thin solid #007e7e;  width:               200px;  padding:             0px 20px 20px 20px;  margin-left:         20px;  text-align:          center;  background-image:    url("images/cocktail.gif");  background-repeat:   repeat-x;  float:               right;  line-height:         1;}#elixirs h2 {  color:               black;}#elixirs h3 {  color:               #d12c47;}#footer {  font-size:           50%;  text-align:          center;  line-height:         normal;  margin-top:          30px;}.cd {  font-style:          italic;}.artist {  font-weight:         bold;}a:link {  color:               #007e7e;}a:visited {  color:               #333333;}#elixirs a:link {  color:               #007e7e;}#elixirs a:visited {  color:               #333333;}#elixirs a:hover {  background:          #f88396;  color:               #0d5353;}

body {   background-color: #b5a789;  font-family:      Georgia, "Times New Roman", Times, serif;  font-size:        small;  margin:           0px;}#header {  background-color: #675c47;  margin:           10px;  height:           108px;}#main {  background:       #efe5d0 url(images/background.gif) top left;  font-size:        105%;  padding:          15px;  margin:           0px 330px 10px 10px;}#sidebar {  background:       #efe5d0 url(images/background.gif) bottom right;  font-size:        105%;  padding:          15px;  margin:           0px 10px 10px 10px;  position: absolute;  top: 128px;  right: 0px;  width: 280px;}#footer {  background-color: #675c47;  color:            #efe5d0;  text-align:       center;  padding:          15px;  /*margin:           10px;*/  margin: 0px 330px 10px 10px;  font-size:        90%;}h1 {  font-size:        120%;  color:            #954b4b;}h2 { font-size: 110%; }.slogan { color: #954b4b; }.beanheading {  text-align:       center;  line-height:      1.8em;}a:link {  color:            #b76666;  text-decoration:  none;  border-bottom:    thin dotted #b76666;}a:visited {  color:            #675c47;  text-decoration:  none;  border-bottom:    thin dotted #675c47;}#award {  position: absolute;  top: 30px;  left: 365px;  z-index: 99;}

body {   background-color: #b5a789;  font-family:      Georgia, "Times New Roman", Times, serif;  font-size:        small;  margin:           0px;}#header {  background-color: #675c47;  margin:           10px;  height:           108px;}#main {  background:       #efe5d0 url(images/background.gif) top left;  font-size:        105%;  padding:          15px;  /*margin:           0px 10px 10px 10px;*/  margin:           0px 330px 10px 10px;  /*margin:           0px 10px 10px 10px;  width:            420px;  float:            left;*/}#sidebar {  background:       #efe5d0 url(images/background.gif) bottom right;  font-size:        105%;  padding:          15px;  margin:           0px 10px 10px 10px;  width: 280px;  float: right;}#footer {  background-color: #675c47;  color:            #efe5d0;  text-align:       center;  padding:          15px;  margin:           10px;  font-size:        90%;  clear:            right;}h1 {  font-size:        120%;  color:            #954b4b;}h2 { font-size: 110%; }.slogan { color: #954b4b; }.beanheading {  text-align:       center;  line-height:      1.8em;}a:link {  color:            #b76666;  text-decoration:  none;  border-bottom:    thin dotted #b76666;}a:visited {  color:            #675c47;  text-decoration:  none;  border-bottom:    thin dotted #675c47;}/*#allcontent {  width: 800px;  padding-top: 5px;  padding-bottom: 5px;  background-color: #675c47;  margin-left: auto;  margin-right: auto;}*/#award {  position: absolute;  top: 30px;  left: 365px;  z-index: 99;}#coupon {  position: fixed;  top: 300px;  left: -90px;}#coupon img {  border: none;}#coupon a:link {  border: none;}#coupon a:visited {  border: none;}.beanheading img {  position: relative;  left: 120px;}

body {     background-color: #b5a789;    font-family: Georgia, "Times New Roman", Times, serif;    font-size: small;    margin: 0px;}#main {    background: #efe5d0 url(images/background.gif) top left;    font-size: 105%;    padding: 15px;    margin: 0px 10px 10px 10px;}#sidebar {    background: #efe5d0 url(images/background.gif) bottom right;    font-size: 105%;    padding: 15px;    margin: 0px 10px 10px 10px;}#footer {    background-color: #675c47;    color: #efe5d0;    text-align: center;    padding: 15px;    margin: 10px;    font-size: 90%;}#header {    background-color: #675c47;    margin: 10px;    height: 108px;}#drinks {    background: #efe5d0 url(images/background.gif) top left;    font-size: 105%;    padding: 15px;    margin: 0px 10px 10px 10px;}h1 {    font-size: 120%;    color: #954b4b;}h2 {    font-size: 110%;}.slogan {    color: #954b4b;}.beanheading {    text-align: center;    line-height: 1.8em;}.beanheading img {    width: 60%;}a:link {    color: #b76666;    text-decoration: none;    border-bottom: thin dotted #b76666;}a:visited {    color: #675c47;    text-decoration: none;    border-bottom: thin dotted #675c47;}#sidebar {    float: right;    width: 180px;}#main {    margin-right: 230px;    margin-left: 165px;}#drinks {    float: left;    width: 115px;}#footer {    clear: both;}/*#coupon {    display: none;    position: fixed;    top: 300px;    left: -90px;}#coupon img {    border: none;}#coupon a:link {    border: none;}#coupon a:visited {    border: none;}#content {    width: 800px;    margin: auto;}#award {    position: absolute;    top: 30px;    left: 365px;}*/#coupon {    display: none;}#award {    display: none;}

---

使用流

流赋予了CSS主人力量。

浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始，从头到尾跟着元素的流显示它遇到的每个元素。比如块元素，每两个之间都有换行。所以先显示文件中的第一个元素，接着显示换行，再显示第二个元素，再换行，从文件开始一直到末尾。这就是流。

1. 对于块元素
   块元素是从头流到尾的。
   注意元素都是占满页面整个宽度的。

2. 对于内联元素
   内联元素在水平方向上一个接一个地流，从左上方到右下方。

   内联元素是在水平方向上一个接一个放置的，从左上方开始，只要右边可以有地方放置。

   注意文本是内联元素的一个特殊例子，浏览器把它归为刚好适合于那个空间的内联元素。

   当浏览器窗口变窄一些，或者用width属性把内容区的大小减少一些，那么放置内联元素的空间就小了

   内容从左流到右直到没有足够的空间，就放到下一行。需要多少行，浏览器就用多少行让内容流入空间。注意浏览器器必须把文本分成不同的几部分以放置得更好。

---

如何一起工作

了解了块元素和内联元素如何流入，那么让它们放到一起。

关于流和盒一些补充

浏览器根据元素的类型对边界做不同的处理。

1. 当浏览器并排放置两个内联元素
   当浏览器要并排放置两个内联元素，且这些元素都有边界时，浏览器就会如你所希望的那么做。它在元素之间创建了足够的空间，该空间等于两个边界之和。
   如果左边的元素有10px的边界，右边的有20px的边界，两个元素之间就会有30px的空间。

2. 当浏览器并列放置两个块元素
   当浏览器并列放置两个块元素时，它把共同的边界重叠到一起，重叠边界的高度是最大边界的值。
   如果上面元素的下边界是10px，下面元素的上边界是20px，则重叠的边界就是20px。

内联元素的边界
尽管通常不设置内联元素的边界值。图像就是一个例子，通常不仅设置图像的边界而且设置边框和补白。

嵌套元素的边界
一个元素嵌套在另一个元素中，而它们都有边界时，边界会重叠。这种情况下计算边界的方法：
如果两个垂直方向的边界相交，即使一个元素嵌套在另一个元素中，它们也会重叠。注意如果外层的元素有边框，边界就不会相交，所以不会重叠，一旦把边框去掉，就会重叠。

文本是如何作为内联元素工作的。它是内容又不是元素。
即使文本是内容，浏览器也需要让它流到页面上，所有浏览器计算出多少文本适合于给定行，然后把那行文本看作是内联元素。浏览器甚至可以在它周围创建一个小盒子。

---

要理解float，必须先理解flow

float属性让一个元素尽可能靠左或靠右（取决于float的值）。然后让它后面的元素流到这个元素的周围。

如何漂移元素

1. 首先，给它一个标识符
   给其中的一个段落一个id。amazing

2. 给它设置宽度
   漂移元素必须有宽度。

#amazing {    width: 200px;}

现在这个段落的宽度是200px，其中的行内容也被调整到那个宽度。谨记，段落是块元素，所以没有元素会向上移到它旁边，因为所有的块元素前后都有换行。

1. 开始漂移
   添加float属性，float属性值可以设置为left或right。我们还是设置为right。

#amazing {    width:200px;    float:right;}

“amazing”段漂移过去了，下面分步骤看看浏览器是如何将它和页面上的其他内容流入的。
(1). 首先，浏览器跟平常一样往页面流入元素，从文件的开头开始一直到结尾。

(2). 当浏览器遇到漂移元素，就把它放到最右边。同时把段落从流中移走，就像它漂在页面上了。

(3).因为把漂移段落从正常的流中移走，并用块元素代替了。那个段落根本就像不在那儿似的。
注意块元素放置在漂移元素之下，因为漂移元素不再是正常流的一部分。

(4). 不过当放置内联元素的时候，不考虑漂移元素的边界，所有它们流在它的周围。？？应该是考虑漂移元素的边界
当内联元素被注入块元素中时，它们流入漂移元素边界的周围。

XHTML顺序问题
如果要把一个元素漂移到另一个元素之后，那么它们的XHTML也要遵循相应的先后顺序。

Clear属性
现在的情况是这样：main div 缩短到footer div 可以上升到与sidebar div 重叠的程度。

发生这种情况是因为把sidebar从流中拉出去。所有浏览器只是把main和footer div正常地进行布置，忽略了sidebar（虽然浏览器流入内联元素时，它会考虑siderbar 的边框并让内联元素包围在它周围）？考虑边框应该是边界

可以设置一个元素的这个属性，使元素流入页面时，不允许漂移元素出现在这个元素的左边，右边或两边。

#footer {    background-color:#675c47;    color：#efe5d0;    text-align: center;    padding:15px;    margin: 10px;    font-size: 90%;    clear: right;}

说明页脚的右边不能有漂浮内容。

设置后当浏览器在页面上放置元素时，它会注意看有没有漂移元素会到页脚的右边，如果有，它把页脚向下移动，知道它的右边没有任何内容为止。

补充

元素能漂移到中间？
CSS只允许把元素漂移到左边或右边。

边界会在漂移元素上相重叠吗？
不会重叠。不像流到页面上的块元素，漂移元素只是漂移，换句话说，漂移元素的边界实际上不和正常流中元素的边界相交，所有它们不会重叠。
重点：
如果有一个主内容区和一个sidebar,给每个都设置上边界是很常见的。那么如果漂移sidebar，它还有个边界，这个边界就不会跟它前面的任何内容相重叠。所以如果不记得漂移元素和边界不重叠，可以很容易地给sidebar和主内容设置各自的边界来结束。？？

可以漂移一个内联元素吗？
可以。
漂移图像。可以漂移别的你喜欢的内联元素，但这并不常见。

块元素忽略漂移元素，而内联元素知道它们在那儿，对吗？
是的。
嵌套在块元素中的内联元素通常流到漂移元素周围，留意漂移元素的边界，而块元素跟平常一样流向页面。
例外的是当你在一个块元素中设置了clear属性，它会把一个块元素向下移直到它的右边，左边或者两边（取决于clear的值）都没有漂移元素。

---

流动和冻结设计

流动布局，无论把浏览器调整到多大，它们都会扩展填满浏览器为止。这种布局很有用，因为通过扩展，它们把现有的空间填满了，并且允许用户充分利用屏幕空间。不过有时把布局锁定很重要，以便当用户调整屏幕时，设计看起来还跟原来的一样。

冻结布局

冻结布局把元素锁住，冻结到页面上，所以它们根本不能移动，因此避免了许多窗口扩展带来的问题。
调整XHTML，添加一个div，包围页面中所有内容。

<body>    <div id="allcontent">        <div id="header">            ..rest fo the XHTML goes here...        <.div>    </div></body>

用这个div把所有它包含的内容限制在固定的宽度

#allcontent {    width: 800px;    padding-top:5px;    padding-bottom:5px;    background-color:#675c47;}

外部的”allcontent” div通常是800px，甚至当浏览器被重新调整的时候也是这样，所以我们有效地把div以及它包含的所有内容都冻结到页面上了。

凝胶物布局

流动的和冻结的之间的状态是什么，当然是凝胶物！
冻结布局有几个好处，当你把浏览器调宽时外观明显变差。
不过有一个解决办法，它是一个你能再网站上看到的很普通的设计。这种设计在冻结和流动之间，它有一个相应的名字叫凝胶物。凝胶物布局锁定了页面中内容区的宽度，但把它放到浏览器中央。

#allcontent {    width: 800px;    padding-top:5px;    padding-bottom:5px;    background-color:#675c47;    margin-left: auto;    margin-right:auto;}

当把一个内容区的宽度设置为auto时，浏览器根据内容区的需要调整内容区的宽度。

把边界设置成 auto，浏览器会计算出合适的边界是多少，并且保证左右边界相等，以使内容居中。

---

绝对布置如何工作

#sidebar {    position:absolute;    top:100px;    right: 200px;    width:280px;}

当一个元素被绝对放置了，浏览器做的第一件事是把它从流中完全移走。接着浏览器把元素放置在top和right属性指明的位置（也可以用bottom和left）。

因为sidebar现在是绝对布置的，它就被移出了流，然后根据所有指定的top、left、right、bottom属性来放置。
因为sidebar不在流中了，其他的元素甚至不知道它在那儿，就完全把它忽略了。

流中的元素甚至不把他们的行内容包围在绝对布置的元素周围。它们完全被遗忘在页面上。

再放置一个div 绝对布置

#annoyingad {    position:absolute;    top: 150px;    left: 100px;    width:400px;}

它后面的任何元素都在页面的正常流中，与上层绝对布置的元素没有任何联系。绝对布置的元素对其他元素没有任何影响。

谁在上面呢
关于绝对布置的元素的另一点有趣的地方是，你可以把它们互相层叠放置。如果把几个绝对布置的元素放在一个页面的同一个位置，你怎么知道层次。谁在上面？
每个布置的元素有一个叫z-index的属性，用来指定它的层叠的位置。

annoyingad div和 sidebar div 都在页面上，annoyingad有一个较大的z-index，因此它在上面。

QA

默认的position属性值是什么？
布局的默认值”static”，static布局元素把元素放置在正常的文档流中，并且不用你布置—浏览器决定哪个元素放哪儿。你可以用float属性把一个元素从流中拿出来，可以决定它应该漂向左边还是右边，不过最终还是浏览器决定它放置的位置。与之相对的是position的属性值”absolute”，用绝对布置，你告诉浏览器放置元素的精确位置。

只能布置div？
可以布置任何元素，无论是块还是内联。记住当绝对放置一个元素时，就把它从正常的页面流中移走了。
布置img元素是很常见的。也可以布置em,span以及其他，但一般不这么做。

position属性的值？
position属性一共4个：
static 默认 正常流
absolute 绝对布局
fixed 固定布局
relative 相对布局

fixed把一个元素放置在跟浏览器窗口（而不是页面）有关的位置，所有fixed元素不移动。
relative 取出一个元素并让它正常地流到页面上，然后在页面显示之前让它偏移。

必须与漂移元素一样指定绝对布置元素的宽度吗
不，不一定非要指定绝对布置元素的宽度。
如果没有指定，块元素默认状态下会占据整个浏览器的宽度，减去你指定的左边或右边的偏移。

必须要用像素指定位置？
不，还有另一种常用的布置元素的方法，百分数。
如果用百分数，元素的位置会随着浏览器宽度的改变而改变。

例如：
如果浏览器宽度是800px，元素的左边设置成10%，那么就离浏览器窗口的左边80px。
如果浏览器窗口调整到400px，那么离浏览器窗口的左边40px;

百分数的另一个常用的用途是指定宽度。如果不需要元素或边界具体的宽度，那么可以用百分数把主内容区和sidebar大小设置得灵活一些。在两栏和三栏布局中比较常用。

要用绝对布置，是否必须只用z-index？
不，z-index似乎大多被用于各种高级的css使用中，特别是在包括网页脚本的时候。当它确实是绝对布置工作方法的一部分。

绝对布置中的left、right、top和bottom属性
当你放置一个元素时，你就把它指定为跟最近放置的祖先元素相关的位置。

<div id="sidebar">    <div id="tv">        <img src="AsSeenOnTv.gif" alt="As Seen on TV" />    </div>    <p>        ...more XHTML here    </p></div>

#tv {    position:absolute;    top: 100px;    left:100px;    width:100px;}

绝对放置”tv”<div>,它的最近放置的祖先是sidebar<div>。所以它的位置就会跟sidebar相对，而不是页面。
最近放置的祖先，最近放置的包含块元素的元素。？？？

如果你把元素放置为与<html>元素相对，bottom属性可能就不会如你所愿。你也许认为bottom是网页本身的底部，但是<html>元素实际上把它定义为浏览器窗口的底部。所以，如果你想把一个元素从页面底部绝对布置，而不是浏览器窗口，你需要把元素放进一个延伸到页面底部放置的元素中。实际它的一个方法是把元素放进一个相对布置的页面底部的元素中。？？？

---

固定布置如何工作

使用固定布置指定元素的位置和你使用绝对布置一样，不过这个位置是相对于浏览器窗口边缘的偏移，而不是页面。
这种方法有趣在一旦用固定布置放置了内容，它就呆在你放置的地方，再也不动了，即使滚动页面。

#coupon {    position:fixed;    top: 300px;    left: 100px;}

固定布置的元素不动，只要显示页面它们就一直在那个位置。

<div id="coupon">        <a href="freecoffee.html" title="Click here to get your free coffee">          <img src="images/ticket.gif" alt="Starbuzz coupon ticket" />        </a>      </div>

#coupon {  position: fixed;  top: 300px;  left: 0px;}#coupon img {  border: none;}#coupon a:link {  border: none;}#coupon a:visited {  border: none;}

使用负的left属性值

#coupon {  position: fixed;  top: 300px;  left: -90px;}

---

了解相对布置

不像绝对布置和固定布置，相对布置的元素仍然是页面流中的一部分，不过在最后一刻，就在元素被显示之前，浏览器偏移它的位置。
用绝对布置来做的话，因为元素不在流中了，页面其他部分就会一到它下面，被它覆盖。

.beanheading img {    position: relative;    left:120px;}

注意图像是内联元素，但没有关系，可以用任何一种布置技术，其实在内联元素上用漂移也行。

我们定义一个相对位置，以及我们希望偏移的值。偏移与它在流中放置的位置相对应。

我们指定图像应该显示在相对于文档流位置的左边120px。在指定偏移的时候，你也可以用right，top,bottom。

相对布置稍微有些像静态布置，又稍微加了点绝对布置。不过，不像绝对布置，相对布置被定义为相对于元素实际位置的偏移，而不是与最近包含的块绝对地平行。
相对布置来让一个元素在流中越过自己的盒子，以便很好地显示，用补白和边界就做不到这点。

---

要点

• 浏览器用流在页面上放置元素。

• 块元素从开始流到结尾，元素之间有换行。每个块元素默认占据浏览器窗口的整个宽度。

• 内联元素在块元素中从左上方流到右下方。如果需要多余一行的空间，浏览器就新创建一行，在垂直方向上扩展包含块元素以包含内联元素。

• 普通页面流中的两个并列放置的块元素，上边元素的下边界和下边元素的上边界会重叠，它们之间的边界就是较大边界的大小，或者如果大小相等就是一个边界的大小。

• 漂移元素被移出了正常的流，放到左边或右边。

• 漂移元素放置在块元素的上面，不影响它们的流。不过，行内容考虑漂移元素的边界，流到它的周围。

• clear属性是用来之指定一个块元素的左边或右边（或两边）不能有漂移元素。一个设置了clear属性的块元素会一直向下移直到它边上没有块元素。

• 漂移元素必须设置一个明确的宽度值，不能是默认的。

• 流动布局是：当你扩大浏览器窗口时，页面内容也随之扩大来填满页面。

• 冻结布局是：内容的宽度是固定的，不随浏览器窗口的变化而扩大或缩小。这有一个优点是你可以更好地控制你的设计，但代价是不能有效地利用浏览器的宽度。

• 凝胶物布局是：内容区的宽度是固定的，但边界随着浏览器窗口的变化扩大或缩小。凝胶物布局通常用来把内容放在页面的中间。它跟冻结布局有一样的优点，但总是更引人注目一些。

• 可以把position属性设置为四个值：static、absolute、fixed和relative。

• static是默认布局，把元素放在页面的正常流中。

• 用绝对布置可以把元素放在页面的任何位置。默认状态下，绝对布置相对于页面边放置元素。

• 如果把一个绝对布置嵌入另一个布置过的元素中，那么它的位置就是相对于布置过的那个包含它的元素。

• top、right、bottom和left属性用来放置绝对、固定和相对布置的元素。

• 绝对布置的元素可以用z-index属性互相层叠放置。较大的z-index值表明它在上层（在屏幕上更靠近你）

• 固定布置的元素总是以相对于浏览器窗口的位置放置，页面滚动时不移动。页面上其他内容在这些元素下面滚动。

• 相对布置的元素先和正常流一样流到页面上，然后按照指定的数字偏移，在它们应该正常显示的地方留出了空间。

• 用相对布置时，left，right，top， bottom涉及到与元素在正常流中的位置相对的偏移量。

• 通常使用漂移元素或绝对布置的元素可以完成同样的设计。

• float提供了一种形成两栏布局的灵活的解决方法，元素可以把漂移元素从它们身边清理掉，绝对布置做不到这点。

整理自Head First HTML