CSS样式表一席谈之绝对定位与相对定位

2016-02-19 18:33 7 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐CSS样式表一席谈之绝对定位与相对定位,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

  定位属性将是网虫们打开幸福之门的钥匙:

绝对定位

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

H4 { position: absolute; left: 100px; top: 43px }

  这项CSS规则让浏览器将起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果。

  注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。

  左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。

  设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。

相对定位

  绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例:

I { position: relative; left: 40px; top: 10px }

  请点击查看代码的执行效果

  相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位,则文字的显示位置将恢复正常。范例。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  使用相对定位时要小心,否则容易将页面弄得非常乱。

  除了相对定位和绝对定位,你还可以使用static(静止)参数值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。

来源:http://www.tulaoshi.com/n/20160219/1618134.html

延伸阅读
标签: Web开发
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relat...
标签: Web开发
一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html)。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加...
标签: Web开发
今天做页的时候,遇到了一个问题:div无法对父对象绝对定位。 div id="fa"      div id="so" style="position:absolute; top:0; right:12px"      /div /div 但是发现无论怎么调整都是针对body定位,郁闷! 看了下css手册,也没发现有什么不对。到网上查了下...
标签: Web开发
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与结构分离开来。这样做的好处在于: 1:增加站点的寿命 不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时...
标签: Web开发
CSS样式表常用小技巧 · ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值。 · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次;对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效。 · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE ...

经验教程

513

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部