位置:首页 » 教程 » 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

最新文章
  • 刚把apache+mod_wsgi 搭好,又发现个Nginx+uWSGI

    我是个web新手,想学着建个网站.刚学习了apache+mod_wsgi 用web.py 练习了下.发现还有什么apache+Nginx+mod_wsgi, Nginx+uWSGI.很晕啊. 是不是Nginx+uWSGI 是未来的潮流啊?我该学习哪个啊.... --cut-- leiz在2012-02-15 05:16:4回答到: 你要学的是为什么用mod_wsgi和uWSGI,而不是他们怎么搭. lossdante在2012-02-15 12:44:1回答到: apache我用的少,但是我知道

  • 送一个 x200 的电源适配器

    本来有两个.然后现在本子不是自己用了,于是空出来一个电源适配器.我留着也没用. 有需要的同学拿去吧.顺丰到付,或者把邮费先打给我我寄普通快递过去.或者,如果你也想赠送我一个小东西(我最需要 lightning 转 micro USB 的转接头了 XD).哇哈哈. --cut-- gotounix在2013-06-04 14:02:3回答到: 楼主怎么联系?embeddedstar # gmail.com 正需要一个放家里. 66beta在2013-06-04 14:05:3回答到: 谁能送我个T

  • 高德地图:抢占O2O入口 不着急盈利

    2012年被认为是移动互联网领域的地图"元年".这一年,苹果和Google地图分手,推出了苹果地图.亚马逊发布了地图API,欲挑战谷歌地图地位.百度宣布要做"地图门户".微软.诺基亚.AOL.雅虎等各路诸侯纷纷进军地图领域. 而这一年,高德已经在移动互联网领域提前走了两年.当智能手机井喷式增长,竞争对手们意图进入移动互联网领域圈地的时候,高德手机地图已和三星.联想.摩托罗拉.HTC.中兴.华为等厂家合作,占据了手机地图的半壁江山. 但即便如此,直到2013年5月10

  • 与谷歌搜索质量小组对话 帮你把网站做的更好

    poluoluo.Com提示:在我们参加今年4月厦门SMX大会的时候,公益性搜索引擎优化网站Dunsh.org的创始人之一希望谷歌能经常回答他们用户共同关心的问题.虽然我们一直鼓励各位网站管理员.站长直接到谷歌网站管理员支持论坛与谷歌以及谷歌用户交流,提出问题并分享经验,我们也还是愿意回答从 在我们参加今年4月厦门SMX大会的时候,公益性搜索引擎优化网站--Dunsh.org的创始人之一希望谷歌能经常回答他们用户共同关心的问题.虽然我们一直鼓励各位网站管理员.站长直接到谷歌网站管理员支持论坛与谷

  • iPhone 4S升级iOS 8.0.2 对比7.1.2系统 iPhone 4S升级iOS 8.0.2 对比7.1.2系统

    iOS 8更新名单中,iPhone 4S没有被苹果抛弃,虽然这是个不错的消息,但大家更关心的还是升级之后的问题. 问题虽多但汇总下来,大家更关心的还是iOS 8下iPhone 4S是否能够流畅运行,从之前外媒测试的结果来看,还是鼓励升级的,为了证实这个问题,现在有网友就做了个对比测试(视频地址). 测试很简单,iPhone 4S运行iOS 7.1.2系统和运行iOS 8.0.2系统的对比,主要是打开自带应用的速度,如照片.短信.通话记录.相机.App Store.Safari.邮件等等. 此外,

  • 关于节约的名言警句

    谁知盘中餐粒粒皆辛苦 成由勤俭破由奢 勤俭永不穷,坐食山也空 从俭入奢易,从奢入俭难 小钱不知省,大钱将滥花(英国) 成家子,粪如宝:败家子,钱如草 眼下胡花乱铺张,往后日月空荡荡 一勺勺积累的东西,不要用桶倒出去(哈萨克族) 辛苦得来的果实,不要一口气把它吃完(维吾尔族) 家有万石粮,挥堆不长 杀牛吃肉,不如留着挤奶(藏族) 有钱时摆阔,没钱时挨饿 欲求温饱,勤俭为要 紧紧手,年年有 勤能补拙,省能补贫 思前顾后,吃穿常有 精打细算,油盐不断 披着破大氅的,往往是个好酒徒(西班牙) 粮收万石,

  • 360 OS公布“蒲公英计划”:友商做不到的让我来 360 OS公布“蒲公英计划”:友商做不到的让我来

    360奇酷最近公布了"蒲公英计划",要把360 OS操作系统适配到360奇酷手机以外的机型上去,让更多的手机能够用上奇酷的360 OS.这个做法手机行业有很多厂商做过,包括小米的MIUI系统,早期也给国内的很多手机最过适配,并且通过适配积累了大量的用户. 不过MIUI是在Android的早期系统体验不好,软件匮乏的时候,所以成长很快,用户积累量很足,当小米做手机时候,发展就很快.但是小米到了后面,安卓的快速发展很多的体验跟iOS体验区别不大的时候,MIUI已经对其他机型适配的工作慢慢的

  • 2016年最新最全请假条范文

    请假条相当于公文中的"请示",它是因事.因病或者因公请求领导或相关负责人,准许不参加某项工作.学习.活动的文书.它比请示简便.灵活,格式可以固定,也可以不固定.请假条因为请假的原因,分为请病假和请事假两种.它是公文写作的一个很重要.但经常被人们忽略的一个应用文写作,无论是学习,还是工作,我们都离不开请假条,请假条的意义可大可小,很多人往往不够重视,所以造成了很多笑话.请假条的内容包括"标题.上款.正文.请假时间.下款". 请假条格式: 标题:居中写<请假条&g

  • 用Visual C#中轻松浏览数据库记录(转)

    用Delphi或者VB编程,在对数据库中的记录进行操作的时候,经常用到一个名称为数据导航器的组件,通过这个组件,可以非常方便的实现对已经绑定到此组件的数据表中的记录进行浏览.就是所谓的上一条记录.下一条记录.首记录.尾记录等.那么在Visual C#是否也存在这样的组件呢?答案是否定的.但由于Visual C#有着强大的数据库处理能力,所以可以比较方便的做一个类似于此组件的程序.本文就是来介绍此程序的具体制作过程. 一. 程序的主要功能介绍: 程序打开本地Acess数据库(sample.mdb)

  • 字符处理解决办法

    字符处理 求问如何将一个数据字段中除汉字以外的其他字符删除. 例: abc-武汉 ....... 武汉 ddd-江苏 ....... 江苏 湖北-1 ....... 湖北 ------解决方案-------------------- 假设表为TT,字段为BH SELECT *,rr1(bh) FROM tt FUNCTION rr1 PARAMETERS rr gg= " " df = Len(Trim(RR)) rr2=rr For i = 1 To df If (Asc(subs(

热门推荐
  • ios7完美越狱前如何备份重要资料? ios7完美越狱前如何备份重要资料? 一.PP助手备份 1.将iOS设备连接电脑,打开PP(Win)版. 2.备份内容: (1)程序备份 PP助手--程序--选择应用程序--备份--选择[备份程序]或[备份程序及其文档]--选择保存的路径 [备份程序及其文档]:可以备份应用程序的存档以及使用记录. (2)音乐与铃声.视频.图书备份 PP助手--音乐(铃声.视频.图书)--歌曲(铃声.视频.图书)--选择歌曲(铃声.视频.图书)--导出--选择保存的路径 (3)照片.信息备份(建议使用iTunes备份) PP助手----照片(信息)-
  • 夏天如何选购凉席 夏天如何选购凉席 夏天如何选购凉席 夏天凉席的选购,应该从以下几个方面着手: 一.凉席的种类 凉席分为竹席.草席.麻将凉席.亚麻凉席.牛皮席.竹纤维凉席.竹炭席.藤席等. 二.凉席的适用人群 (竹凉席为首选,性价比最高) 1. 竹凉席 应选竹节长而平.纤维细.质地柔软坚韧的"头青席".头青即头道篾,最为凉爽柔韧.竹凉席还具有卫生性好的优点,能抑制真菌和微生物的生长,舒适.收汗助眠.不粘身.凉爽吸汗,适合特别怕热的人使用.使用用寿命长,一般可用几十年.因为竹席凉性大,老人.小孩及体质弱的人不宜用.因此,这
  • 都说PC不行了,但微软苹果好像不这么看 都说PC不行了,但微软苹果好像不这么看 文/吴俊宇 这两年来,万物移动的潮流成为了业内的主流观点.不少业内人士表示,未来的办公.娱乐.学习等一站式的用户场景都将脱离PC,由手机操作完成. 然而,这两年来,以iOS和Android未代表的移动端操作系统在生产力工具这一层面上始终没有突破,人们逐渐意识到,传统的笔记本电脑才是他们应该回归的地方.虽然要回归,但完全采用传统的PC显然不是最佳选择.我们看到,微软.苹果.小米都在寻求未来PC的发展方向.这背后正是移动端反哺PC端,PC未来必将全面触控化带来的必然结果. 两端融合成为趋势 今年以来