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)的更多相关文章

  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. [think in java]知识点学习

    java中 全部数值都有正负号,不存在无符号整数. java中的基本类型存储在堆栈中. 其它对象存储在堆中. java确保数组会被初始化,并且不能在它的范围之外被訪问. 下面代码在c和c++中是合法的 ...

  2. [Protractor] Protractor Interactive with elementor

    Install: npm install -g elementor Then run: webdriver-manager start Lets say if we want to test 'htt ...

  3. SQLLoader3(数据文件没有分隔符时的导入)

    数据文件:D:\oracletest\ldr_tab_fiile.dat1.数据文件字段中间以制表符TAB隔开:7369 SMITH CLERK7499 ALLEN SALESMAN7521 WARD ...

  4. RadioButton 和 RadioButtonList 比较

    第一次接触RadioBttonList时候,觉得这个控件完全可以取代RadioButton,操作更加简便.直到今天,完成了一个小小的功能,才发现,尺有所短不是瞎掰的. 需求如下: Add Prorat ...

  5. 细讲encodeURI和encodeURIComponent以及escape的区别与应用

    首先,我们都知道这三个东西都是用来编码的 先来说encodeURI()和encodeURIComponent() 这两个是在转换url时候用来编码解码用的. 有编码就会有解码, 解码就是decodeU ...

  6. Mysql 复制表结构 及其表的内容

    顺便转一下Mysql复制表结构.表数据的方法: 1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们 ...

  7. UML学习-活动图创建

    活动图(Activity Diagram)可以实现对系统动态行为的建模,主要是将用例细化,即用例内部的细节可以以活动图的方式描述.活动图描述活动的顺序,主要表活动之间的控制流,是内部处理驱动的流程,在 ...

  8. UIWindow & UIWindowLevel详解

    一.UIWindow是一种特殊的UIView,通常在一个程序中只会有一个UIWindow,但可以手动创建多个UIWindow,同时加到程序里面.UIWindow在程序中主要起到三个作用: 1.作为容器 ...

  9. I/O多路复用之epoll

    1.select.poll的些许缺点 先回忆下select和poll的接口 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set ...

  10. （原）ippicvmt.lib(ippinit.obj) : error LNK2005: _ippSetCpuFeatures@8 已经在 ippcoremt.lib(ippinit.obj) 中定义

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5497234.html 参考网址: http://answers.opencv.org/question ...