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

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

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

【 tulaoshi.com - Web开发 】

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

绝对定位

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

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

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

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

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

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

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

相对定位

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

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

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

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

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

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

来源:https://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开发
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页 你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。   ...
标签: Web开发
整理了一下自己写CSS时的顺序,跟大家分享下。 下表顺序为从上到下,从左到右: ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...
标签: Web开发
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与结构分离开来。这样做的好处在于: 1:增加站点的寿命 不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时...

经验教程

762

收藏

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