CSS入门教程——定位(positon)
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的位置。
尽管定位的语法非常简单，但是它的功能强大和实用是不容置疑的。合理地使用定位和盒子可以实现网页布局等等。
CSS入门教程——定位(positon)的更多相关文章
- HTML和CSS入门教程
慕课网上面的HTML+CSS基础课程感觉非常适合入门.
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- Linux pwn入门教程(10)——针对函数重定位流程的几种攻击
作者:Tangerine@SAINTSEC 本系列的最后一篇 感谢各位看客的支持 感谢原作者的付出一直以来都有读者向笔者咨询教程系列问题,奈何该系列并非笔者所写[笔者仅为代发]且笔者功底薄弱,故无法解 ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- CTF丨Linux Pwn入门教程：针对函数重定位流程的相关测试（下）
Linux Pwn入门教程系列分享已接近尾声,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/a ...
- HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 【军哥谈CI框架】之入门教程之第二讲：分析CI结构和CI是怎么工作的
[军哥谈CI框架]之入门教程之第二讲:分析CI结构和CI是怎么工作的 之入门教程之第二讲:分析CI结构和CI是如何工作的大家好!上一节,我们共同部署了一个CI网站,做到这一点非常简单,但是,亲们, ...
随机推荐
- 解决WCF 调用方未由服务器进行身份验证或消息包含无效或过期的安全上下文令牌
错误描述: 1. WCF:调用方未由服务器进行身份验证 2. 无法处理消息.这很可能是因为操作“http://tempuri.org/ISCCLSvc/GetCarriersByWareHouse”不 ...
- [Regular Expressions] Match the Start and End of a Line
We can use: ^: match the beginning $: match the end Let's say we have the string like the following: ...
- BOOST 线程完全攻略 - 扩展 - 可被关闭的线程类
本文假设读者已经基本了解boost线程库的使用方法. boost是个开源工程,线程这一块也在不断完善之中,到现在这个阶段,boost::thread仅仅实现了一个完美的技术框架,但是读者在实际使用中会 ...
- 为github帐号添加SSH keys
为github帐号添加SSH keys 2012-05-26 00:05 34279人阅读 评论(6) 收藏 举报 ssh文本编辑gitvim工具up 使用git clone命令从github上同步g ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- Josn转DataTable（转）
使用UI框架开发的时候就常常用到DataTable转Json的情况,但是最近完成一个微信公众号开发的项目,需要把微信接口传过来的json值作为转为DataTable后绑定到服务器控件上. 在网上找了很 ...
- WCF入门教程系列二
一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Service,WSE,MSMQ的并集,有一副很经典的 ...
- poj2243 bfs
O - 上一个题的加强版 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:65536KB 6 ...
- Java—Integer类
Integer类 Integer 类在对象中包装了一个基本类型 int 的值.Integer 类型的对象包含一个 int 类型的字段. 该类提供了多个方法,能在 int 类型和 String 类型之间 ...
- 【1】python核心编程 第三章
1.继续( \ ) 有两种例外情况一个语句不使用反斜线也可以跨行.在使用闭合操作符时,单一语句可以跨多行,例如:在含有小括号.中括号.花括号时可以多行书写.另外就是三引号包括下的字符串也可以跨行书写 ...