位置:首页 » 教程 » CSS教程:CSS定位属性

CSS教程:CSS定位属性

日期:2009-08-02 阅读:0num
Advertisement
网页制作poluoluo文章简介:CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务.

  CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

  定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

  另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

  您可以使用 display 属性 改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

  但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

<div>
some text
<p>Some more text.</p>
</div>

  在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

  块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制

  CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

  除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 X(HTML) 中的位置决定。

  块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

  行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box) ,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

  在下面,我们会为您详细讲解相对定位、绝对定位和浮动。

CSS position 属性

  通过使用 position 属性 ,我们可以选择 4 中不同类型的定位,这会影响元素框生成的方式。
  position 属性值的含义:
  static
  元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  relative
  元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  absolute
  元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  fixed
  元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
  提示: 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

CSS 定位属性

  CSS 定位属性允许你对元素进行定位。
  属性 描述
  position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  overflow 设置当元素的内容溢出其区域时发生的事情。
  clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
  vertical-align 设置元素的垂直对齐方式。
  z-index 设置元素的堆叠顺序。

相关文章
  • CSS教程:padding属性定义边内补白

    网页制作poluoluo文章简介:CSS教程:padding属性定义边内补白. 边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离. 边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 边内补白只有width一种属性. 相关教程:CSS教程:margin属性定义边外补白 padding -- 定义边内补白 取值: <padding-width>{1,4} | inherit <padding

  • CSS教程:margin属性定义边外补白

    网页制作poluoluo文章简介:CSS教程:margin属性定义边外补白. 边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width一种属性. margin -- 定义边外补白 取值: <margin-width>{1,4} | inher

  • CSS教程:CSS控制浏览器滚动条的源代码

    网页制作poluoluo文章简介:CSS教程:CSS控制浏览器滚动条的样式源代码:1.overflow内容溢出时的设置 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-

  • CSS教程:CSS定位属性

    网页制作poluoluo文章简介:CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊

  • CSS教程:CSS文本样式全攻略 CSS教程:CSS文本样式全攻略

    网页制作poluoluo文章简介:由于 Web 是 HTML 文档的集合体--有些是动态的,有些是静态的,有些是功能性的--它们的排版所遵循的惯例来自于我们的最佳参考对象:六个世纪的印刷传统.这种传统包括了排?5峭缡且桓鋈露医厝徊煌拿教澹杂谕镜呐虐胬此担颐切枰杂∷⑸杓凭弑敢?/font> 序言 由于 Web 是 HTML 文档的集合体--有些是动态的,有些是静态的,有些是功能性的--它们的排版所遵循的惯例来自于我们的最佳参考对象:六个世纪的印刷传统.这种传统包括了排印.但是网络

  • css教程:css和document css教程:css和document

    Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user int

  • CSS教程:容器定位

    原文:http://www.linxz.cn/blog2/article.asp?id=140 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获.在IE中常常会碰到如果将容器定位后,出现容器内的文字不可选择(测试的时候主要用带连接的文字). xhtml结构: <div> <a href="#">定位后无法选择容器的内容解决方案</a> </div> css样式: div { position:a

  • CSS教程:CSS属性behavior的语法

    网页制作poluoluo文章简介:CSS属性behavior的语法及介绍. 在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题.今天poluoluo.com就向大家介绍CSS属性behavior的语法 behavior的语法: behavior : url ( url ) | url ( #objID ) | url ( #default#behaviorName ) 取值:

  • CSS教程:背景background属性应用

    poluoluo文章简介:背景background:background-image:url("图片的网址");背景图background: url(" 图片的网址 "); 背景.background-color:#色码;背景色彩. 背景 background css 说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 background-

  • css教程:font-size属性

    网页制作poluoluo文章简介:乍一听css字体设置很容易,其实真做起来不然,我们工程师使用全力,他们在不同浏览器调整字体的大小知道的得到合适的结果.实际上有一点深入的理解就能起到很大的作用. CSS的字体样式设置相信许多人再熟悉不过,其实字体样式的设置并不仅仅限于我们平时常用的那几个属性,本文为您详细叙述 font-size 的字体样式设置的详细属性. 乍一听css字体设置很容易,其实真做起来不然,我们工程师使用全力,他们在不同浏览器调整字体的大小知道的得到合适的结果.实际上有一点深入的理解

  • CSS教程:通配属性批量替换的方法

    网页制作poluoluo文章简介:更加渴望CSS3的早日普及,将来直接用input[type="text"]这种玩意来实现. 例如我想美化输入框的效果: <input type="text" name="textfield" /> 避免给这样的通配属性: input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; } 否则所有的输入框.按钮

  • CSS教程:CSS页面布局的技巧

    破洛洛文章简介:对CSS网页布局的技巧,可谓是名目繁多.这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值:1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 对CSS网页布局的技巧,可谓是名目繁多.这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值: 1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符

  • CSS教程:CSS背景全攻略 CSS教程:CSS背景全攻略

    网页制作poluoluo文章简介:背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的 原文链接:Backgrounds In CSS: Everything You Need To Know 译文链接:css 背

  • CSS教程:CSS选择器性能 CSS教程:CSS选择器性能

    网页制作poluoluo文章简介:如果你非常在意页面的性能那千万别使用CSS3选择器.实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注. 一些关于CSS选择器性能的讨论引起了我的兴趣. 第一个是Shaun Inman写的<合格的CSS选择器(CSS Qualified Selectors)>,实际上这篇博文并没有提到CSS性能,不过有一个来自

  • CSS教程:CSS变换(transition) CSS教程:CSS变换(transition)

    网页制作poluoluo文章简介:我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果.在本文中,你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息. 译自:CSS transitions 101 中文:CSS3变换入门 原作者:Jason Cranford Teague 译者:神飞 请尊重版权,转载请注明出处,多谢! 尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现. 比如一个链接要么

  • CSS教程:CSS id和CSS class区别与用法

    破洛洛文章简介:css中id和class的运用. 简单介绍CSS id与CSS class区别与用法. CSS id知识:在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是

  • css教程:css指令,兼容,注释,selector css教程:css指令,兼容,注释,selector

    1.2 跟css有关的标记,指令 1.2.1 link <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" /> link标记的用意是允许将html与其他文档相关联.Css用link将css文档与html文档想关联. Css文档虽然不是html的一部分,但是被html使用,从外部style sheets引入它. Link在head

  • CSS教程:CSS选择符的用法和实例

    网页制作poluoluo文章简介:虽然之前已经有不少对于CSS选择符的文章在网络上出现,不过我还是准备以自己的方式来写一写,这也是一种获得乐趣的途径.所以我小小的总结了一下css1及css2选择符(本文的CSS选择符都为css1及css2)的用法及实例,希望对大家有些许帮助. 成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生.不过对于刚接触或者还不是很熟悉css的朋友来说,能够找到一份对于CSS选择符的相关例子集合,还是会有一定帮助的. 虽然之前已经有不少对

  • CSS教程:CSS制作3D立方体 CSS教程:CSS制作3D立方体

    网页制作poluoluo文章简介:目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持.下面来为大家列举出相关演示和代码. 无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情. 目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持.下面来为大家列举出相关演示和代码. 3D CSS 结果演示 单个静态3D立方

  • CSS教程:CSS命名参考

    在XHTML中定义ID.CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿.所以,CSS命名仅作参考. (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper (2)导航类 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsid

最新文章
  • 求一台kindle 3 坐标浙江

    400左右可接受. --cut-- lihua在2013-02-15 22:17:3回答到: K5好像也不到600 daifeng在2013-02-15 22:26:4回答到: @lihua 哦..那也行 sorcerer在2013-02-15 22:31:1回答到: 有一台K5,坐标宁波. daifeng在2013-02-15 22:33:2回答到: @sorcerer 成色?价格? sorcerer在2013-02-15 22:36:1回答到: 去年9月份买的,带有国产皮套,贴了屏幕膜,50

  • 请问下服务器网卡的问题

    背景是我维护的一台服务器,最近在做活动,所以可能在线人数有些多,这些人可能又在不停的刷新.导出出现一些问题,我个人维护经验较少,请大家帮忙看看. 1.服务器网卡的流量峰值在4M/s,平均约在1-2M/s左右.服务器负载5分钟大约在6左右.这个时间估计也就几个小时,平时没什么流量. 2.突然网页就无法访问了,我重启apache提示失败,貌似是无法绑定到IP(0.0.0.0),抱歉,当时心急,没有把错误信息记录下来.当时第一反应是网卡挂了...于是心急如焚的手贱ifdown eth0...好了,世界

  • 初中校长2015年竞聘演讲稿

    尊敬的各位领导.各位评委,大家好! 感谢区委组织部和教育局党委给我这次竞聘中学校长的机会. 我叫XX,今年38岁,是中共党员.1989年于曲阜师范大学中文系专科毕业.曾先后任十五中学语文教师.班主任.教研组长,十四中学办公室副主任.教导处主任.现任十四中学业务校长. 同在座的很多同志一样,当年考入师范院校时,社会上有不少人说是走对了路.进错了门.但我一直认为,教育是开启民智的钥匙,社会进步的动力,教育天地广阔,大有作为.特别是在中区教育这块肥沃的土地上.在各级领导.前辈和同志们的悉心关怀和帮助下

  • 父母吵架到底多伤害孩子 父母吵架到底多伤害孩子

    家不是一个讲理的地方,很多家庭琐事分不清是非对错.当各自总是试图据理力争的时候,就难有家庭的和睦. 我深有体会,多年前,由于爱人身陷歪理邪说,明眼人一眼看出的问题,她就是不能自拔,尽管一拨又一拨的说客前来助阵问题依然,此间我们陷入长达数年的无休止的争吵和限制,这比生活中的琐事更让人痛心疾首,为使她摆脱毁灭的边沿,我用尽了办法,不停的引导.争执,也不乏长期的冷战,尽管孩子会理解我的用心.但这期间孩子正处于成长期,给孩子的是不安.恐惧和分心.现在想起来只有悔,因为已经对孩子造成了一生的伤害.所以力劝

  • 和鸟有关的成语

    鸥鸟忘机 拼音: ōu niǎo wàng jī 简拼: onwj 近义词: 鸥鹭忘机 反义词: 用法: 作宾语.定语;用于书面语 解释: 机:机心.指人无巧诈之心,异类可以亲近.比喻淡泊隐居,不以世事为怀 出处: 唐·陆龟蒙<酬袭美夏首病愈见招>诗:"除却伴淡秋水外,野鸥何处更忘机." 鸷鸟累百,不如一鹗 拼音: zhì niǎo lèi bǎi,bù rú yī è 简拼: zdlbbrye 解释: [解释]犹言诸侯百人不如天子一人. 出处: [出处]<汉书·邹阳

  • 全球首款电池供电隐形斗篷     让你瞬间拥有超能力 全球首款电池供电隐形斗篷 让你瞬间拥有超能力

    据媒体报道,如果人可以有超能力,恐怕很多人都想隐身吧.事实是,人没有超能力,不过也不用失望,得克萨斯大学奥斯汀分校的研究人员正在研究一款利用电池驱动的隐形斗篷,他们声称这套装置可以提高隐形能力.研究工作从现有的利用元表面偏转折射光线的隐形斗篷出发,设计的主旨在于添加电池来增强信号,并确保隐形斗篷在任何光线条件下都不可见.不过,这一电池驱动的隐形斗篷目前还只是一个理论,但研究团队希望能够尽快建立一个可实现的模型. 该研究项目的主导成员 Andrea Alù 副教授以及他的团队最近为现有的隐形斗篷提

  • 欧美意境清新图片 小粗腿黑丝袜 夏天真可怕 欧美意境清新图片 小粗腿黑丝袜 夏天真可怕

    QQ空间素材 - 欧美意境清新图片 小粗腿黑丝袜 夏天真可怕 .提供图片素材,更多(非主流女生图片) QQ空间素材 - 欧美意境清新图片 小粗腿黑丝袜 夏天真可怕 QQ空间素材 - 欧美意境清新图片 小粗腿黑丝袜 夏天真可怕

  • java防sql注入代码

    在程序开发时间们经常会要过滤一下基础的sql注入功能,下面来看看jsp的防sql注入的代码吧,有需要的朋友可以看看. 传参数前rankid=URLEncoder.encode(rankid, "UTF-8 ");/*把汉字变成UTF-8编码*/ 然后在取参数时候在rankid=URLDecoder.decoder(rankid, "UTF-8 "); 防SQL注入: 在JDBC应用中,如果你已经是稍有水平开发者,你就应该始终以PreparedStatement代替S

  • 中信银行加入移动支付大战 首推网络银行

    新浪财经讯 12月7日上午消息 中信银行昨日与中国银联签署移动支付合作协议,宣告其加入移动支付大战.中信银行将成为中国银联与中国移动[微博]"空中发卡"项目首批合作银行.这也是朱小黄履新中信银行行长后签署的第一份手机银行业务合作协议. 中信银行加入移动支付大战 中信银行行长朱小黄昨日在签约仪式上表示,消费金融将是银行未来的战略重点,而消费背后就是支付结算,下一阶段围绕着手机移动支付必将成为移动支付服务的重要战场. 在银联的移动支付业务体系中,基于移动支付载体的应用管理平台(Truste

  • jbuilder9的手机模拟器怎么看到程序错误信息

    jbuilder9的手机模拟器如何看到程序异常信息? 点击右边红色标题查看本文完整版:jbuilder9的手机模拟器如何看到程序异常信息? jbuilder9的手机模拟器如何看到程序异常信息?就像wtk中那样? ------解决方法-------------------- 用try catch 如果还没有显示话, 那就要用单步调试了,不过这样容易死机, ------解决方法-------------------- 你设置一下 在工程属性中点java-->debug options-->选上你要

热门推荐
  • 快手看片怎么关闭分集自动连播 快手看片怎么关闭分集自动连播 1)打开[快手看片]APP,进入首页后点击左上角[三].(如下图) 2)在功能列表栏中点击下方[设置],在设置栏点击[分集自动连播]至关闭即可.(如下图) 注:更多精彩教程请关注本站手机教程栏目,本站手机数码群:296605639欢迎你的加入
  • 奇葩家庭 老公和父亲都变性做了女人 奇葩家庭 老公和父亲都变性做了女人 根据报道,一个英国女子的丈夫和爸爸都想变性做女人,从而使这位女子多了两位闺蜜.该女子叫做佩里(Lleahan Perry),在13岁时,她开始意识到父亲史蒂芬(Stephen)貌似与其他老爸不一样! 两年之后,她老爸终于跟她坦白说自己喜欢穿女人的衣服,想成为女人. 她老爸今年45岁,是英国皇家海军的工程师,他说自己从6岁起就喜欢穿裙子. 3年后,史蒂芬开始服用雌性激素,穿上女装,改名为海伦(Helen). 当时佩里非常支持海伦的决定,表示他无须活在谎言中,也认为海伦做真实的自己很开心. 佩里将近
  • 屏幕太小?电脑视频在小米电视2S上看! 屏幕太小?电脑视频在小米电视2S上看! "老公,咱们换一个电脑显示器吧." "为什么呀,现在这个电脑显示器挺好的呀." "我在小米电视2S看视频看习惯了,觉得电脑的显示器有点小." "肯定会觉得小,小米电视2S的屏幕是48英寸,电脑显示器才多大." "我就要在大屏幕上看视频,而且就要看在电脑里下载好的我喜欢看的视频,就要,就要嘛." 这个时候怎么办?就算再买一个电脑显示器也不可能达到48英寸,况且老婆应经看 习惯了小米电视2S的屏幕,唯一的解决办
  • 装修木材怎么选? 装修木材怎么选? 装修过程中木工施工都会用到木材,说到装修木料,很多人就要头疼了,现在用于装修的木料质量.选材.价格都不相同,下面小编就和大家简单说说对于木料选择的几个要点,希望可以帮助大家解决装修木材的选择问题. 原木材的选择. 在这一点上,我们要看木料是否做过烘干处理,经过烘干处理的木材,不容易变形,结实不容易断裂,木纹的斜度较小,表面看起来干净,没有白斑等木材中常见的问题.(装修材料之木材材料知识攻略) 木门的选材,最好用实木,比如红胡桃.黑胡桃等的木料. 实木门不仅不容易开裂,而且隔音效果比较好,所以建议