依依不舍地搬家

[转]咖啡鱼版CSS教程——十步学会CSS

獨立的圓 posted @ 2008年3月05日 20:25 in 保留 with tags css , 4719 阅读

 本站文章已轉移,敬請移步:http://www.xxb.me/ ,謝謝!

本教程并没有像普通的教程一样着重介绍各种属性,相反基本上一点都没提及,因为用到属性的时候我们可以查询CSS2中文手册。本教程着重介绍了CSS中的各种模型和概念,它们是CSS的灵魂。适合入门者,大虾可略过,欢迎批评指正。

1.CSS的产生
2.简单的Html语法
3.CSS语法和应用
4.ID和类
5.常用的选择器
6.继承、层叠和特殊性
7.标准框模型和IE非标准框模型
8.空白边的叠加
9.相对定位和绝对定位
10.浮动和清理



1.CSS的产生

大虾请略过,欢迎批评指正。本人菜鸟。

话说盘古开天那会,嗯,还没有网络,再后来出现了网络,一种简单的容易理解的语言——HTML出现了。或许现在的网页都很漂亮,但用最原始的有语义的HTML形成的网页只能用简陋来形容。
再后来,网页变得越来越复杂,直到很少有人能再看懂自己写的代码。那个时代,Html的最重要的作用变成表现页面的一种方式,那么当时是怎么来修饰页面的呢?

人们用块引用(Blockquote)来添加空白而不是表示引用;表格完全成了布局工具,而不是来显示数据;用字体和粗体标签的组合来创建所需的视觉效果,而不只是用标题元素突出显示页面标题。总之,Html这种原本为非表现性语言变成了多能的,后果就是谁也理不清那一堆乱乱的代码。

这时人们急需一种独立的,细化的,简单的,易实现的表现性语言,来独立于Html之外表现页面。CSS出现了。

CSS全称为Cascading Style Sheets,翻译过来为层叠样式表,一般称样式表。它是Html的一种扩展语言。

那么我们可以用CSS来做什么呢?
有了CSS,我们就可以控制网页外观并且将文档的表现部分与内容分离开来。例如我们可以用CSS直接控制布局,而不是没有语义的表格。总之,CSS让以前复杂难懂的Html变得简单,有意义。

CSS 的语法是非常简单的,但CSS在大多数人眼里是难掌握的。这并不是CSS本身的错,而是浏览器Bug和不一致的显示方式导致的。像我们最常用的IE就是最令设计人员头痛的一个非常糟的浏览器。我们日常使用一般都要尽量避免这些因浏览器而导致的BUG。比如最常见的一种就是网页在Firefox下显示正常,而在IE下,侧边栏却被“挤”到了下面,这就是由于IE错误的不符合标准的框模型造成的。当然,也存在一些修复Bug的方法(一般称Hack),但并不推 荐。当你在不同浏览器上测试代码时,你的设计可能在一种浏览器上显示的很好,但在另一浏览器上布局可能会支离破碎。不要惊讶,这是一个现实的世界,并不完美。可以尽量找一些修复的方法。

现在用的CSS标准一般为2.1。

第一次写系列教程,肯定有好多好多疏漏和错误,以后发现了会逐步完善,欢迎指正哦。以后尽量先写到纸上,这样思考的会细一些。这也是本人的一个深入学习的机会。记住:我也是菜鸟哦,比你知道的多不了多少。



2.简单的Html语法

在此系列教程中,我主要是根据自己的学习经历和经验,以最通俗的语言及例子说明一些抽象的概念,相信即使你从来没有接触过Html或CSS都可以学会。另外本教程所介绍的也是最基本的概念及最常用到的知识。

我接触Html也是从Blogger开始的,以前的Blogger模板是纯Html格式的。相信好多朋友连最基本的Html标记都不清楚,在学CSS之前,我将介绍我们最常用到的一些Html标记。算是CSS的基础。

1.Html简介

HTML的英文全称是Hyper Text MarkUp Language,中文叫做“超文本标记语言”。

HTML文件看上去和一般文本类似,但是它比一般文本多了Tag(标记),比如<html>,<b>等,通过这些Tag,可以告诉浏览器如何显示这个文件。我们用记事本就可以编辑Html。

我们平常浏览网页是通过IE,Firefox此类的浏览器,为什么需要浏览器呢?浏览器是一种翻译工具,它会解释看起来复杂、凌乱的Html,让人们得到最直观的表现方式。先介绍一下Html的几个基本概念:(1)标记(Tag),有的地方也称作标签。标记在Html中是用于描述功能的符号。标记是用来实现某种功能的,标记必须用<>括起来.举个例子吧.

<B>一些文字</B>

在上面的一行代码中,<B>和</B>就是标记,那么它们可以实现什么功能呢?这两个标记只有一个差别,就是后面的标记多了一个 "/",这个标记的功能就是让两个标记中间的文字加粗显示.我们会注意到在浏览器中标记是不会显示的,显示出来的是它们之间的内容.所以我们可以看出,标记在这儿就起了某种功能的作用,标记指出了处于它们之间的内容在浏览器中的表现方式.

标记一般都有一个“始标记”和一个“尾标记”,像上面 例子中<B>就是始标记,带上一个斜线就变成了尾标记。那么为什么需要两个标记呢?只用一个不行吗?其中始标记告诉浏览器从此处开始标记所表示的功能,而尾标记则告诉浏览器到这里该功能结束。相信这是很容易理解的。当然也有一些单标记,比如最常用的单标记<BR>,它用来表示换行。

新版的Blogger用的是XML,它对标记的检查非常严格,一般标记必须含有结束标记,有时候我们修改了代码却无法保存,或许就是漏了结束标记。

(2)属性。HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:

<body bgcolor="red">

(3)注释语句。注释语句的格式为:<!--注释文-->

2.Html的基本结构

<html>

  <head>

    <title>Title of page</title>

  </head>

  <body>

    This is my first homepage. <b>This text is bold</b>

  </body>

</html>


浏览器在解释Html的时候会由上而下执行,像流水一样,这就是以后我们会接触Html的一个“流”的概念,尽管简单,却是基础。

上面的Html基本结构的第一个Tag是<html>,这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>,表示HTML文件到此结束。

在<head>和</head>之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。Head信息是预加载的一些信息,比如CSS以及JS就可以放在Head里。

在<title>和</title>之间的内容,是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息,是正文。

在<b>和</b>之间的文字,用粗体表示。<b>顾名思义,就是bold的意思。

3.本节最重要的内容,介绍常用的标记。大多数将会在使用的时候简单介绍。Html标记是CSS的样式附着的地方,是“钩子”。

h1,h2等

ul li等

div span p等



3.CSS语法和应用

这一节我们终于真正的开始接触CSS本身了,会不会等得有点久呢?呵呵,开始吧。

一、基本语法

掌握一件事物最快的方法就是直接去使用,看看下面一段代码,这段代码来自Blogger模板。它是介于<b:skin><![CDATA [ 和 ]]></b:skin>之间的部分。这部分包含了XML的变量定义(Variable definitions)和CSS。类似下面的代码就是CSS。

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}

仔细观察上面的代码,我们可以分析出CSS的规则,实际上CSS只包含了三部分,大括号外的,冒号前面的,最后就是冒号后面的。这三部分是什么?起什么作用呢?

我们用一条更简单的规则来说明:

H1 { color: green;}

这里有三个概念,分别是大括号外的“选择符(Selector)”、冒号前的“属性(Property)”以及冒号后面的“属性的值”或者说是“属性的参数”。

上面一条代码具有什么作用呢?它告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

1. 选择符(有的地方称作选择器)。上面代码中的H1。顾名思义,它的作用就是起筛选的作用。就像上一条代码,它只对所有<H1></H1>包围的文字起作用。所有的Html标记都可以充当选择符,所以你可以将CSS的任何信息应用到任何元素。如果有不同的选择符,但他们的属性及值是完全一样的,为了方便,我们可以将它们合并起来写,例如:

H1, P, Span
{ font-family: arial;}

上面的代码就会把所有的H1,P,Span包围起来的文字的字体设置为Arial。

2. 属性。上面代码中的color。每件东西都有属性。比如人类,性别,肤色,体重等等都是人类的属性。一段文字,一个段落也有自己的属性,比如字体类型,大小,颜色之类。不同的对象属性也有所不同。在CSS中要掌握很多属性,可以搜索“CSS2中文手册”,下载一份。在以后的使用中也会介绍一些常用的属性。

3.属性的值。上面代码中的green。这更容易理解了吧,比如性别男,肤色是黄色。字体类型为黑体……

4.最后不要漏了那个小分号,每一句后面都要加上分号。

5./*注释性文字*/ 夹在/*和*/之间的是注释,不执行.

二、CSS的应用

应用CSS一般有三种

1.内嵌样式. 它写在标记里面,只对此标记起作用。格式:

<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。</p>

2.内部样式表。写在所在网页的<head></head>之间,只对所在网页起作用。格式:

<STYLE type="text/css">

......

</STYLE>

3.外部样式表。用Link链接到网页,可重复应用到许多网页。格式:

<link href="css文件地址" rel="stylesheet" type="text/css">

下一节我们将接触类和ID。越来越觉得自己脑子里的东西太凌乱,在短时间内将它们写出来有好多地方前言不搭后语,不条理,请见谅。



4.ID和类

尽管所有的Html标记都可以用作选择符,但是现实中我们仍需要实现更加精细,更加复杂的目的。例如:有三个段落,我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色,代码会这样写:p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

(1)定义ID

#名称 {属性:值;}

(2)定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多,ID前面加一个#号,类名前面加一个点(半角)。

2.ID和类的命名

在命名上,ID和类是随意的,你几乎可以将它们命名为任何的名字。比如上面的三个段落,我们把第一段的类名命名为:first,代码就要这样写,

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字,让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写,即多个单词的情况下,首单词无大写字母,其后单词首字母大写,如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID,那么我们怎么把它应用到Html中呢?

<P class="first">第一个段落</P>

若当初我们定义的是ID,#first {color:red;}。那么现在我们应该这样写:

<P id="first">第一个段落</P>

这样应用了之后,只有第一个段落的颜色为红色,其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后,你可能会觉得ID和类除了书写上的区别之外,功能上好像没有区别。的确,它们在功能上也没有区别,它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID,一个类。

#first {color:red;}

.second {color:green;}

first因为前面有个#号所以属于ID,Second则属于类。则:

<P id="first">段落一</P>
<P class="second">段落二</P>
<P class="second">段落三</P>

上面的代码中“Second”这个类被使用了两次,说明类可以被多次使用,但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的,正因如此,它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。



5.常用的选择器

在上一篇教程中,我们了解到类非常灵活且功能强大,但我们在使用中却极容易过份依赖它。我们应该如何去避免类的滥用呢?我们可以通过使用“后代选择器”来减少类的使用。

最常用的选择器是类型选择器(或称作元素选择器、简单选择器)和后代选择器。

1.类型选择器。

这种类型的选择器已被我们熟知,它用来筛选特定类型的元素。如段落、锚或标题元素等。

p {color:black;}

a {text-decoration:underline;}

h1 {font-weight:blod;}

2.后代选择器。

后代选择器用来筛选特定元素或元素组的后代。后代选择器的表示方法很简单,在父选择器和子选择器之间加一个空格。举个例子。

p span {color:red;}

<p>这是第一段文字<span>这是被Span标记包围的文字,颜色为红色</span></p>

<span>这是第二段文字,颜色不变</span>

在上面的例子中被第一段文字中被Span包含的部分的颜色将是红色,其余文字颜色不变。

理解后代选择器的作用了吗?在第一段文字中Span是P的子代(或叫做后代),因为Span包含于P中。所以这段文字的颜色将是CSS中定义的红色。而第二段文字并非P的子代,所以不会应用样式,颜色不变。

现在你可以理解为什么我们不需要很多类了吗?不妨思考一下。

3.伪类

如果你之前没有接触过编程,伪类这个名字乍听起来有点怪。为什么会称作“伪”类呢?(日伪军是不是很熟悉,^-^)

伪类也是类,但它是固定的,CSS中事先定义好的,用来根据文档结构之外的其它条件对元素应用样式。比如链接的状态。它是类,但又不是我们通常意义上的类,所以称作伪类。

我们常用的伪类有四个,其它的一些伪类因在IE中不支持,所以一般不用。

这四个伪类是(伪类前有一个冒号):

:link (链接) :visited (已访问的链接) :hover (鼠标停留状态) :active (激活状态)

其中前面两种称为链接伪类,只能应用于锚(a)元素。后两种称为动态伪类,理论上可以应用于任何元素。

例如,假设默认的标题颜色为黑,访问后是白色,鼠标停留时字体为红色,激活状态为黄色,那么CSS应该怎么写呢?

a:link {color:black;}

a:visited {color:white;}

a:hover {color:red;}

a:active {color:yellow;}

注意事项:这几个伪类组合的时候根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。可以记为“LoVe HAte”。

4.通用选择器

我觉得它就是个通配符,通用选择器用*表示,它一般用来对页面上所有元素应用样式。例如:让所有元素的填充和空白边置0。

* {padding:0;

margin:0;}

另外,通用选择器和其他选择器结合使用时,通用选择器可以用来对特定元素的所有后代应用样式,或者跳过一级后代。

5.高级选择器

IE对高级选择器基本上不支持,平时用到的很少,但功能却极为强大。此处略去。



6.继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的,此节开始将介绍CSS中的一些非常重要的概念。

1.继承。

继承是一个非常容易理解的概念,我们可以形象的把它比作遗传,父元素的特性会继承给它的子元素。

body {color:red;}

<body>

<p>一些文字</p>

</body>

上面的代码我们没有定义P的颜色,但它包围的文字的颜色为红色,因为它继承了父元素body的颜色。

2.层叠和特殊性。

body {color:red;}

p {color:green;}

<body>

段落一

<p>段落二</p>

</body>

我们把第一个例子稍稍修改一下,现在的结果是段落一为红色,段落二为绿色。

有些人或许会有疑问,根据刚才介绍的继承,段落二是不是应该继承红色呢?

实际中,在CSS里,某个元素的某个属性,我们可能在不同的地方定义了多次,这样它的样式就会发生“层叠”,这时候浏览器会不会不知所措呢?究竟应该应用哪种样式呢?

CSS中以不同规则的“特殊性”来决定应该应用何种样式,特殊性高的规则优先,若两个规则特殊性相同,则后定义的规则优先。

另外,对于我们正在浏览的同一网页,可能会有多个样式表对其产生作用,一般有原网页作者的样式表,浏览的用户的样式表以及浏览器或用户代理使用的默认样式表。将样式标记上!important会提高它的重要度,可以优先于任何规则。

层叠的重要度次序:

  • 标有!important的用户样式
  • 标有!important的作者样式
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用的样式
  • 最后根据选择器的特殊性决定规则的次序。

特殊性的一般规律:行内样式,即用Style属性编写的规则特殊性最高,其次,具有ID选择器的规则比没有ID选择器的规则特殊,再次具有类选择器的规则比只有类型选择器的规则特殊。最后,如果两个规则特殊性相同,那么后定义的规则优先。

注意:继承的样式的特殊性为空,即直接应用于元素的任何样式一定会覆盖继承的样式,这就是为什么第二个例子中P的颜色没有继承Body颜色的原因。

3.特殊性的计算

除了上述的一般规律外,我们也可以计算出某个规则的特殊性。

  • 行内样式是最高的,如果是行内样式则无需计算。
  • 计算ID选择器的数量 a
  • 计算类和伪类的数量 b
  • 计算类型选择器的数量 c

上面我们一共算了三个数,假设ID选择器的数量为a,类和伪类的数量为b,类型选择器的数量为c。最后得到它的特殊性为:abc (并非三个值相加,而是按顺序排列)

例如,有这样一条规则:

#wrapper #content .post p {color:red;}

这条规则中共有两个ID,一个类和一个类型选择器,则计算出的三个值为:2,1,1。将它们按顺序排列起来得到的数值是211。如果还有一条规则也定义了P的样式,但计算出的值小于211,那么第一条规则的特殊性就高。



7.标准框模型和IE非标准框模型

CSS中最重要的三个概念是:浮动(float)、定位(position)和框模型(box model,或称作盒模型)。这三种概念控制元素在页面上的排列和显示方式,它们是布局的基础,理解了这三种概念后,CSS在你的手中就如鱼得水,但真正的掌握往往在我们在日常进行了大量实践之后,所以一时不理解没有关系,学习本身就是一个反复的过程,多多实践,自然就会理解。

框模型是CSS的基石之一,网页上的每个元素都是一个矩形框,可能我们没有看到框本身,但是实际上我们所看到的内容都是包含在一个个的框中的,因为我们把框的边框隐藏了,如果需要我们就可以让它显示出来。例如:

<p>一些文字</p>

如果把这个段落放在网页中,我们肉眼上并不能看到框,但内在它就是一个框。我们可以定义样式:p {border:1px;}来把它的边框显示出来。

1.框的组成。

我们先抛开CSS,想像一下我们日常所见的矩形的框。既然是框就要有一个边框,框里面放着东西,里面的东西和框之间往往有一些空间,因为我们不可能把它塞得太满,还有什么呢?如果把这个框放在空间中,这个框与其它的物体往往也有一些距离,放得太挤了不好看。

也可以这样想像,我们在一张白纸上画一个矩形框,在框里面写字的时候,我们不可能紧靠着框的边,那样不美观,这样内容与边框之间就会空出一些距离,另外我们画框的时候也不会紧靠着纸的边,一般会留出一定的页边距。

边框、内容、内容和边框的距离和与其它物体的距离,这就是一般框的四项内容。

同样在CSS中的框也是由这四部分组成的。它们分别是:边框(border)、内容(content)、填充(padding)和边距(margin,也称作空白边)。我们可以形象的通过一张图片来看一下CSS中框的组成。

注意:填充是边框和内容之间的距离,空白边是边框和其它框之间的距离。如果给一个框添加背景,那么背景会应用于内容和填充组成的区域。

2.标准框模型的计算。

在布局的时候我们一般把页面分成几栏,这样就要计算各栏的宽度,框的宽度是怎么计算的呢?在CSS中我们是用width和height来定义框的宽度和高度的,一般意义上,我们会认为这个宽度(或高度)就是包含所有的四项的宽度(或高度),但实际上不是这样的,标准框模型中,width和height的值仅指的是内容区域的宽度和高度,不包含其它三项,这有些不太合常规,但既然是这样规定的,我们就要接受这样的概念。

那么一个标准框的四项的总的宽度应该怎样计算呢?例如我们定义一个框:

#box {width:70px;

padding:5px;

margin:10px;}

这个框的总宽度是:70+5×2+10×2=100px。如图:

注意:width和height仅指内容区域的宽度和高度。空白边可以是负值。

3.IE的非标准框模型

IE是使用最多的浏览器,正因如此,微软才这样令人可恶,IE中有许多不合标准的地方,框模型就是其中之一。IE中的width和height的值是指除空白边之外的宽度和高度,它包含了内容区域和填充区域。这正是现实世界中我们比较熟悉的框。尽管这样,不同的标准会让网页在不同的浏览器里的显示方式大相径 庭,会造成比较严重的后果。如果我们还像上面例子一样定义一个框,那么在IE中框的宽度是多少呢?

此时框的宽度为:70+10×2=90px

比上面的框小了10px,这10px是原来的填充的宽度,它现在去哪儿了呢?因为框的宽度为70px,这个宽度包含了内容和填充的宽度,所以内容区域的宽度为70-5×2=60px。如图:

注意事项:正因为IE的非标准模型,所以在使用的时候,我们尽量不要给具有指定宽度的元素添加填充,而是把填充或空白边添加到元素的父元素或子元素中。



8.空白边的叠加

上节我们刚学了CSS中的框模型,我们知道了在浏览器中我们所看到的内容的存在形式——它们是由一个个的框组成的。每个框都有一个空白边,两个空白边相遇的时候会遇到什么问题呢?

举一个例子,在一个网页中有几个段落,第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加,后面的段落之间的空白边将是相邻顶空白边和底空白边的和,这就意味着段落之间的空间是页面顶部的两倍。如果空白边叠加在一起,那么各处的距离就变得一致了。如图

空白边叠加的定义:当两个空白边相遇时,它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。

以后我们学到定位和浮动的时候会知道,浮动的元素和绝对定位的元素是脱离了普通文档流的,它们不会发生空白边叠加。行内框也不会发生空白边叠加。

叠加图示:

注意:空白边的叠加是相当广泛的,当一个元素包围另一个元素时,如果没有填充或边框将空白边隔开,它们的空白边相遇时也会叠加。空元素的空白边也会自身发生叠加。



9.相对定位和绝对定位

定位是网页布局中非常重要的概念,决定了网页的表现形式,是CSS中我们最常用到的功能之一。

学完框模型之后我们知道网页是由一个个的框组成的,那么在最简单的不包含CSS的页面里,浏览器怎样定位各种框呢?在这种情况下,浏览器会根据各个框在 Html中出现的顺序,由上而下一个接一个的排列,形象一点我们把这样方式称作“流”,区别于浮动和绝对定位这两种较特殊的定位方式,这种流我们称之为 “普通流”。

其实,刚才我们已经提到了CSS中三种基本的定位机制:普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。

1.定位的语法

语法:

position : static absolute fixed relative

取值:

  • static : 默认值。无特殊定位,对象遵循HTML定位规则 。
  • absolute : 绝对定位。将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 。
  • relative : 相对定位。对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置 。
  • fixed : 固定定位。IE6等版本不支持。它其实是绝对定位的一个子类别,它能使元素出现在页面的相同位置处,而不随页面上下的拖动。一般使用JavaScript实现。

2.相对定位

“相对”定位,“相对”什么地方呢?相对定位是相对于文档流中的初始位置,通过设置垂直或水平距离,让这个元素移动。元素本身即使移动到了别处也要占据原来没有变化时的初始位置。相对定位的元素并没有脱离原Html流。例如:

#box {position:relative;

left:20px;

top:20px;}

3.绝对定位

绝对的意思我们都很清楚,它的功能就是让我们可以把某个元素精确的定位在某个地方。既然我们要自由的把某个元素定位在页面的某个地方,所以绝对定位的元素已经脱离了普通流。这里就像Photoshop里层的概念一样,绝对定位的元素会被放到一个新层上,它可以覆盖普通流的元素。绝对定位的元素不受普通流的影响,仿佛它们不存在一样。我们可以通过设置z-index(z就是指的z轴,各个层相互叠加垂直的方向上)属性来更改它们层叠的顺序。

绝对定位的元素的位置相对于“最近”的“已定位”的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于body。图示:



10.浮动和清理

这是基本概念的最后一篇,终于写完了。:) 没办法,我这人急性子。

1.浮动

浮动模型是在布局中用到的最重要的概念之一,以前介绍的把Blogger变成三栏的布局中就用到了浮动。我们通过定义float属性来让元素浮动,浮动的元素脱离了文档流,就像上一节讲的绝对定位的元素一样,普通流中的框表现的就像浮动框不存在一样,我们可以形象的把它想像作它在空间中“飘浮”,周围环绕着一些内容。因此,一个向左浮动的元素有文本在它的右侧运动,并环绕着它的底边;一个向右浮动的元素将有内容在它的左侧移动。

浮动的框可以左右移动,直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。

对一个元素应用float属性会自动将它转变成一个块级元素,其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围,形成Word中文字环绕的效果。例如在Blogger中我们添加图片的时候可以选择向左,向右或者居中,这就是用了Float属性,添加完图片后,你可以查看源代码,其中必有一条float属性。

float属性可以取三个可能的值:left,使元素向左浮动;right,使元素向右浮动;none,消除浮动。

2.浮动的一些规则

  • 多个浮动元素不会相互覆盖,一个浮动元素的框碰到另一个浮动元素的框后便停止运动。
  • 浮动元素的顶端不能高于父元素的内顶端,也不能高于先于它出现的浮动元素或段落的顶端。另外,浮动元素的顶端不能高于行框的顶端,如果行框中有先于浮动元素的内容。这些规则限制了元素向上浮动,使浮动低于其父元素。
  • 一个浮动元素不能伸出其容纳元素的边线,除非它的宽度太大而不能被容纳。如果多个浮动元素,当一行不能全部容纳它们的时候,则另起一行,剩余的被“挤”到下一行。
  • 在遵从其它限制下,浮动元素尽可能高。向左浮动的元素尽可能向左,向右浮动的元素尽可能向右,较高的位置优先给更偏左或偏右的元素。

3.清理

清理(clear)属性是浮动(float)属性的一个同伴。它控制跟随一个浮动元素的元素的位置。这个属性中用来防止内容跟随一个浮动的元素,迫使它移动到浮动的下一行。

clear属性可以取四个值:left,它把元素推到前面生成的向左浮动的元素下面;right,它把元素推到前面生成的向右浮动的元素下面;both,它把元素推到前面生成的所有元素下面;和none,它取消前面的定位。clear属性不仅限于非浮动元素;相反,它还可以用来控制浮动元素的行为,把一个浮动元素推 到其它浮动元素下面。

我们可以通过两张图片来明白清理的作用:


第一张图片没有对行框进行清理,它环绕在浮动的图片的周围,第二张图片对段落进行了清理,它便不再环绕图片,到了浮动框的下面,相当于增加了这个段落的顶空白边,为浮动框留出了空间。对元素进行清理实际上就是为前面的浮动元素留出了垂直空间。

原文链接:咖啡鱼版CSS教程 十步学会CSS(原文分十一篇,我综合为一篇了)

 


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter