DIV+CSS基础DIV+CSS十日教程8:了解和学习CSS的定位

DIV+CSS十日教程8:了解和学习CSS的定位

所谓定位,基本含义很简单,它允许你定义元素相对于其正常位置,或相对于父元素、另一个元素甚至浏览器窗口本身的位置。我们简单的将html中出现的元素所占用的部分称为元素框,它分为块级元素和行内元素。

我们常用的如div,p,h1-h6,ul,table等都是块级元素,而如a,span,em,strong,img等为行内元素,我们看下面这个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
*{margin:0;padding:0;font-size:120%;color:#f7f7f7;}
h1 {background:#33CCFF;}
div {background:#FF3EFF;}
p {background:#00AA55;}
span {background:#4B0082;}
a {background:#87CEFA;}
strong {background:#FF4500;}
</style>
</head>
<body>
<h1>发达国家</h1>
<div>美国</div>
<p>加拿大</p>
<span>英国</span>
<strong>新西兰</strong>
<a href="#">西班牙</a>
</body>
</html>

我们分别给一些元素定义了背景颜色,浏览这个网页可以看出块级元素都独占一行,从上到下排列显示,而行内元素则从左到右依次显示。

认识块级元素和行内元素.png

块级元素和行内元素可以通过CSS中的display属性互相转化,例如display:inline可以将块级元素定义为行内元素,而display:block可以将行内元素变成块元素,对于初学CSS的朋友,最常用的一个场景就是将文字链接转化成块元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
* {margin:0;padding:0;font-size:120%;color:#f7f7f7;}
a {background:#666;display:block;width:400px;height:200px;}
</style>
</head>
<body>
<a href="http://www.google.com/">Google</a>
</body>
</html>

我们将链接a转化为块级元素后,定义它的宽和高,浏览这个网页后发现不单是链接文字,而是整个矩形块都可以点击,在网页设计中,有时候将链接转化成块级元素增大了可点面积,让用户更方便点击。

行内元素转块级元素.png

每种元素都占据了一个元素框,元素框存在的位置有三个情况,分别是普通流、浮动和绝对定位

关于定位,我们需要学习CSS中的重要属性position,该属性有四种属性值:

1. position:static

元素框的默认状态,块级元素生成一个矩形框,作为文档流的一部分,行内元素从左到右置于父元素中。

2. position:relative

元素框相对于原本的位置偏移某个距离,其仍保持其未定位前的形状,它原本所占的空间不变。

3. position:absolute

元素框从文档流中脱离,并相对于其包含块而定位,包含块可能是文档中的另一个元素。元素框原本在正常文档流中所占的空间会消失,元素定位后生成一个块级框。

4. position:fixed

元素框相对于浏览器的窗口来定位。

我们先来演示一下相对定位,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
* {margin:0;padding:0;font-size:120%;color:#f7f7f7;}
a {background:#666;display:block;width:400px;height:100px;margin:10px;}
#a1 {position:relative;top:250px;left:50px;}
</style>
</head>
<body>
<a id="a1" href="http://www.google.com/">Google</a>
<a id="a2" href="http://www.yahoo.com/">Yahoo</a>
</body>
</html>

我们给第一个链接元素a1增加相对定位属性,并设置离左边的距离是50px,离顶部距离为250px,浏览后我们发现,第二个链接显示在正常的位置,而第一个则偏离了“正常位置”,而原本所在的空间并没有变。

相对定位.png

我们再来试试绝对定位,将上述实例中的position:relative改为position:absolute,浏览后发现,第一个链接偏离了位置,而原本所在的空间消失了。

绝对定位.png

使用相对定位和绝对定位可以实现很多效果,我们做一个简单的例子,实现下图文字显示在图片上的简单效果:

文字显示在图片上.png

先布局一张图片和一行文字,html代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
*{margin:0;padding:0;font-size:120%;color:#f7f7f7;}
</style>
</head>
<body>
<div>
<img alt="win10" src="win10.png" />
<p>Windows 10</p>
</div>
</body>
</html>

在没做定位的情况下,p标签内的文字会显示在图片的下方,下面给父元素div加上position:relative属性,给p元素加上position:absolute属性,并设置偏移距离:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
* {margin:0;padding:0;font-size:120%;color:#f7f7f7;}
div {position:relative;}
p {position:absolute;bottom:330px;left:50px;}
</style>
</head>
<body>
<div>
<img alt="win10" src="win10.png" />
<p>Windows 10</p>
</div>
</body>
</html>

浏览网页后,我们发现已经成功实现了图片上显示文字的效果。这里请注意我们给父元素div设置了position:relative属性,在CSS中,如果父级(包括直接和间接父级)中没有定义position属性,那么子元素将会参照浏览器的左上角进行定位,当给父元素定义了该属性,则子元素会参照父元素进行定位,例如上述例子中,文字离图片底部的距离为330像素。

对于初学者,可能并不能完全理解相对定位和绝对定位,那么只需要根据“子元素使用绝对定位,父元素使用相对定位”这条简单的做法即可。

关于position:fixed属性,它表示元素以浏览器窗口为标准,通过"left"、"top"、"right"、"bottom" 四个属性进行定位。经常遇到有些网站页面往下拖动滚动条的时候,其顶部导航条一直保持固顶,具体实现方法我们来看看:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位布局</title>
<style type="text/css">
* {margin:0;padding:0;font-size:120%;background:#777;color:#f7f7f7;}
#nav {height:50px;line-height:50px;width:100%;position:fixed;top:10px;}
.div1 {height:400px;background:#80B54C}
.div2 {height:400px;background:#EC78D0}
.div3 {height:400px;background:#5B78D0}
</style>
</head>
<body>
<div id="nav">顶部导航 网站首页 产品中心 网站栏目 联系我们</div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

浏览这个网页,我们会发现拖动滚动条后,顶部的“导航”位置始终保持离浏览器顶部10px不变,这正是position:fixed的功劳

关于CSS的定位,我们要学习的东西还有很多,本文仅仅介绍了最浅显易懂的部分,对于初学者来说,先将这些记住吧。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/9.html