CSS入门教程——定位(positon)

CSS定位在网页布局中是起着决定性作用。

 

定位

CSS的定位功能是很强大的，利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。

1.相对定位(relative)

相对定位是指相对它本来应该处的位置所做的移动。

  1. ……
  2.  <style type="text/css">
    .dingwei{
     position:relative;
  3.  left:50px;
    }
  4.  </style>
  5.        ……
  6.  <p>我是一段正常的文本</p>
  7.  <p class="dingwei">我本来应该在它的正下方，
    可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
  8.  </body>
  9.  </html>

2.绝对定位(absolute)

绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>s
  4.  <title>我真惨!被用来演示CSS!</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6.  <style type="text/css">
  7.        p{
  8.        font-size:24px;
  9.        font-weight:bold;
  10.        }
  11.        .dingwei1{
  12.      position:absolute;
  13.      top:35px;
  14.      left:35px;
  15.      color:#FF0000
  16.      }
  17.      .dingwei2{
  18.      position:absolute;
  19.      left:50px;
  20.      top:50px;
  21.      color:#0000FF;
  22.      }
  23.  </style>
  24.  </head>
  25.  <body>
  26.  <p class="dingwei1">CSS</p>
  27.  <p class="dingwei2">绝对定位</p>
  28.  </body>
  29.  </html>

定位中使用的left属性表示元素距离左侧的距离，而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。

绝对定位为其实也是相对定位

“什么？你不是在搞笑吧？”

没错，绝对定位会按照我们给定的坐标x，y来准确地定位你一个元素。但是问题在于，坐标系的原点在哪里呢？答案就是父元素。

上例中，class为"dingwei2"的元素设置为绝对定位，它的父元素为body，所以它其实是相对body位置来定位的的。如果有如下代码：

  1. <p>
     段落正文
  2.  <strong>强调文字</strong>
  3. <p>

若给strong元素设置绝对定位，那么坐标原点将会是父元素p的位置。

尽管定位的语法非常简单，但是它的功能强大和实用是不容置疑的。合理地使用定位和盒子可以实现网页布局等等。

CSS入门教程——定位(positon)的更多相关文章

  1. HTML和CSS入门教程

    慕课网上面的HTML+CSS基础课程感觉非常适合入门.

  2. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  3. Linux pwn入门教程(10)——针对函数重定位流程的几种攻击

    作者:Tangerine@SAINTSEC 本系列的最后一篇 感谢各位看客的支持 感谢原作者的付出一直以来都有读者向笔者咨询教程系列问题,奈何该系列并非笔者所写[笔者仅为代发]且笔者功底薄弱,故无法解 ...

  4. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  5. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  6. CTF丨Linux Pwn入门教程：针对函数重定位流程的相关测试（下）

    Linux Pwn入门教程系列分享已接近尾声,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/a ...

  7. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  8. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  9. 【军哥谈CI框架】之入门教程之第二讲：分析CI结构和CI是怎么工作的

    [军哥谈CI框架]之入门教程之第二讲:分析CI结构和CI是怎么工作的   之入门教程之第二讲:分析CI结构和CI是如何工作的大家好!上一节,我们共同部署了一个CI网站,做到这一点非常简单,但是,亲们, ...

随机推荐

  1. java类加载器行为[笔记]

    1. Java虚拟机使用第一个类的第一件事情就是将该类的字节码装进来,装载类字节码的功能是由类装器完成的,类半遮器负责根据一个类的名称来定位和生成类的字节码数据后返回给Java虚拟机. 2. 类装载器 ...

  2. web项目的两个创建形式website和webapplication

    前言 在利用VS2010创建web项目的时候,会有两个选择.可以选择直接创建website网站,还可以选择使用 webapplication应用程序.刚刚接触web开发,看到这两个就疑惑了,既然是都可 ...

  3. 《TCP/IP具体解释卷2：实现》笔记--4种不同类型的mbuf

    mbuf的主要用途是保存子进程和网络接口间互相传递的用户数据.但mbuf也用于保存其它各种数据:源于目的地址.插口 选项等等. 以下介绍我们要遇到的四种类型的mbuf,它们根据在成员m_flag中填写 ...

  4. EffectiveC#1--尽可能的使用属性（property），而不是数据成员（field）

    1.属性可以进行数据绑定 2.可以做数据安全校验.在对数据检测时,如果发现数据不满足条件,最好以抛出异常的形式来解决 如下代码不可取 public string Name { get { if(thi ...

  5. Asp.net Mvc 请求是如何到达 MvcHandler的——UrlRoutingModule、MvcRouteHandler分析，并造个轮子

    这个是转载自:http://www.cnblogs.com/keyindex/archive/2012/08/11/2634005.html(那个比较容易忘记,希望博主不要生气的) 前言 本文假定读者 ...

  6. Ubantu 命令

    进入窗口删除文件(所有文件都可以删除) gksudo nautilus 输入法问题 ibus-daemon -drx

  7. （转载）Windows下手动完全卸载Oracle

    使用Oracle自带的Universal Installer卸载存在问题: 不干净,不完全,还有一些注册表残留,会影响到后来的安装. 所以,推荐使用手工卸载Oracle. 1.[win+R]-> ...

  8. Xcode no visible @interface for xxx declares the selector errors

  9. (转) C/C++中结构体(struct)知识点强化

    本文转载于 http://pcedu.pconline.com.cn/empolder/gj/c/0503/567942_all.html#content_page_1 所有程序经过本人验证,部分程序 ...

  10. uva11630 or hdu2987 Cyclic antimonotonic permutations(构造水题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Cyclic antimonotonic permutations Time Li ...