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

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

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

一、relative(相对定位)

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

如图:

相对定位

二、absolute(绝对定位)

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

如图:

绝对定位

三、fixed(固定定位)

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

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

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

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 美丽搜
    2016-03-31 17:53:17发表

    规范和规划

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

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