代码
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文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。比如块元素,每两个之间都有换行。所以先显示文件中的第一个元素,接着显示换行,再显示第二个元素,再换行,从文件开始一直到末尾。这就是流。
对于块元素
块元素是从头流到尾的。
注意元素都是占满页面整个宽度的。对于内联元素
内联元素在水平方向上一个接一个地流,从左上方到右下方。内联元素是在水平方向上一个接一个放置的,从左上方开始,只要右边可以有地方放置。
注意文本是内联元素的一个特殊例子,浏览器把它归为刚好适合于那个空间的内联元素。
当浏览器窗口变窄一些,或者用width属性把内容区的大小减少一些,那么放置内联元素的空间就小了
内容从左流到右直到没有足够的空间,就放到下一行。需要多少行,浏览器就用多少行让内容流入空间。注意浏览器器必须把文本分成不同的几部分以放置得更好。
如何一起工作
了解了块元素和内联元素如何流入,那么让它们放到一起。
关于流和盒一些补充
浏览器根据元素的类型对边界做不同的处理。
当浏览器并排放置两个内联元素
当浏览器要并排放置两个内联元素,且这些元素都有边界时,浏览器就会如你所希望的那么做。它在元素之间创建了足够的空间,该空间等于两个边界之和。
如果左边的元素有10px的边界,右边的有20px的边界,两个元素之间就会有30px的空间。当浏览器并列放置两个块元素
当浏览器并列放置两个块元素时,它把共同的边界重叠到一起,重叠边界的高度是最大边界的值。
如果上面元素的下边界是10px,下面元素的上边界是20px,则重叠的边界就是20px。
内联元素的边界
尽管通常不设置内联元素的边界值。图像就是一个例子,通常不仅设置图像的边界而且设置边框和补白。
嵌套元素的边界
一个元素嵌套在另一个元素中,而它们都有边界时,边界会重叠。这种情况下计算边界的方法:
如果两个垂直方向的边界相交,即使一个元素嵌套在另一个元素中,它们也会重叠。注意如果外层的元素有边框,边界就不会相交,所以不会重叠,一旦把边框去掉,就会重叠。
文本是如何作为内联元素工作的。它是内容又不是元素。
即使文本是内容,浏览器也需要让它流到页面上,所有浏览器计算出多少文本适合于给定行,然后把那行文本看作是内联元素。浏览器甚至可以在它周围创建一个小盒子。
要理解float,必须先理解flow
float属性让一个元素尽可能靠左或靠右(取决于float的值)。然后让它后面的元素流到这个元素的周围。
如何漂移元素
首先,给它一个标识符
给其中的一个段落一个id。amazing给它设置宽度
漂移元素必须有宽度。
#amazing {
width: 200px;
}
现在这个段落的宽度是200px,其中的行内容也被调整到那个宽度。谨记,段落是块元素,所以没有元素会向上移到它旁边,因为所有的块元素前后都有换行。
- 开始漂移
添加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