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

986667

986667

2016-02-19 18:33

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

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

绝对定位

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

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

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

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

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

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

相对定位

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

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

CSS样式表一席谈之CSS快速入门

Web开发
CSS样式表一席谈之CSS快速入门

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS样式表一席谈之利用CSS改变字体

Web开发
CSS样式表一席谈之利用CSS改变字体

CSS网页中的相对定位与绝对定位

Web开发
CSS网页中的相对定位与绝对定位

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS中关于相对定位和绝对定位

Web开发
CSS中关于相对定位和绝对定位

CSS网页布局教程:绝对定位和相对定位

Web开发
CSS网页布局教程:绝对定位和相对定位

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

电脑花屏怎么办?

电脑花屏怎么办?

CSS样式表中SPAN和DIV的区别

CSS样式表中SPAN和DIV的区别
下拉加载更多内容 ↓