网页制作基础教程(八)---CSS定位

  • 编辑时间: 2014-05-16 18:39:00
  • 浏览量: loading...
  • 作者: 段亮

我们都知道网页的布局是流体布局,从上依次往下布局。在CSS中有三种基本的定位机制:普通流、浮动和绝对定位。若没有专门指定,所有框(div、h1 或
   p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong
   等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。)都是普通流的定位。也就是说,普通流中的元素的位置由元素在HTML
   中的位置决定,从上到下一个接一个地排列。那么到了定位流中,就改变了这种状况。我认为:在定位流中有以下几种定位属性。分别是:

一、relative(相对定位)

相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。也就是说:相对于父元素来定位,但原本的位置依然保留。

如图:

相对定位

二、absolute(绝对定位)

绝对定位:元素框从文档流完全删除,并相对于其包含块定位。也就是说:给父元素一个(relative)来定位,但不保留原本的位置。

如图:

绝对定位

三、fixed(固定定位)

固定定位:是相对于浏览器视窗来定位。

代码演示:http://www.w3school.com.cn/css/css_positioning.asp

写在最后:定位在CSS布局中,应用的非常广泛,在将来你网页布局的时候,会起到意想不到的作用。现在很多人对自己的人生感到迷茫,那只是你们还没有找到适合自己的定位。给自己定位成功了,相信也有一个方向去奋斗。不会在做一个碌碌无为的少年!

阿里云服务器优惠

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

站长推荐
loading... 数据加载中...

超低服务器价格,值得购买!

超低服务器价格,值得购买!