CSS入门教程——定位(positon)
来源:互联网 发布:手机淘宝占用空间大 编辑:程序博客网 时间:2024/05/20 12:47
CSS入门教程——定位(positon)
CSS定位在网页布局中是起着决定性作用。
定位
CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
…… <style type="text/css">
.dingwei{
position:relative; left:50px;
} </style> …… <p>我是一段正常的文本</p> <p class="dingwei">我本来应该在它的正下方,
可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p> </body> </html>
2.绝对定位(absolute)
绝对定位非常好理解,你指定元素出现的坐标(x,y),然后它就准确无误地显示在那里。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>s <title>我真惨!被用来演示CSS!</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> p{ font-size:24px; font-weight:bold; } .dingwei1{ position:absolute; top:35px; left:35px; color:#FF0000 } .dingwei2{ position:absolute; left:50px; top:50px; color:#0000FF; } </style> </head> <body> <p class="dingwei1">CSS</p> <p class="dingwei2">绝对定位</p> </body> </html>
定位中使用的left属性表示元素距离左侧的距离,而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x,而top就是纵坐标y。
绝对定位为其实也是相对定位
“什么?你不是在搞笑吧?”
没错,绝对定位会按照我们给定的坐标x,y来准确地定位你一个元素。但是问题在于,坐标系的原点在哪里呢?答案就是父元素。
上例中,class为"dingwei2"的元素设置为绝对定位,它的父元素为body,所以它其实是相对body位置来定位的的。如果有如下代码:
<p>
段落正文 <strong>强调文字</strong><p>
若给strong元素设置绝对定位,那么坐标原点将会是父元素p的位置。
尽管定位的语法非常简单,但是它的功能强大和实用是不容置疑的。合理地使用定位和盒子可以实现网页布局等等。
0 0
- CSS入门教程——定位(positon)
- CSS positon 属性总结
- CSS positon absolute
- CSS之positon:absolute
- positon:absolute; 复习绝对定位
- day14 Python css Positon relative
- CSS—定位
- POSITON
- day14 Python css positon学习 之 fixed
- day17 Python Css 之Positon __absolute
- CSS——相对定位绝对定位固定定位
- CSS简明教程——CSS定位
- 说说positon相对定位和绝对定位的问题
- CSS(2)——定位
- CSS——定位模式
- CSS—定位与浮动
- CSS基础—定位、选择器
- CSS定位机制——普通流、浮动、定位
- 使用命名空间:别名/导入
- 菜鸟”和“大神”
- ThinkPHP中的__initialize()和类的构造函数__construct()
- static静态属性和静态方法的原理与调用技巧
- a:link,a:visited,a:hover,a:active
- CSS入门教程——定位(positon)
- SQL优化
- mysql 数据类型
- mysql 常用命令
- UBUNTU 下GIT的安装
- Python @property装饰器
- Linux 删除文件夹和文件的命令
- linux下git使用记录1 git 提交
- Linux命令之nano -