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

最新文章
  • 想找回一个早期注册的id

    早期在v2ex.appspot.com注册了一个id叫est 后来发现 www.v2ex.com 不能用此id登录,老是提示密码错误 然后无法找回密码 想重新注册又提示 > 抱歉这个用户名已经有人使用了 但是 http://v2ex.appspot.com/member/est 页面又不存在 请问livid这是一个早期数据库bug还是有其他的原因? --cut-- eth2net在2010-08-18 17:50:5回答到: 来围观的-_-||| yoyicue在2010-08-18 17:57

  • 女性月经期间吃什么好 女性月经期间吃什么好

    不少女性,在月经来潮的前几天(月经前期)会有一些不舒服的症状,如抑郁.忧虑.情绪紧张.失眠.易怒.烦躁不安.疲劳等.一般认为,这与体内雌激素.孕激素的比例失调有关. 女性月经期间吃什么好? 女性应选择既有益肤美容作用,又能补气.疏肝.调节不良情绪的食品.药品,如卷心菜.柚子.瘦猪肉.芹菜.粳米.鸭蛋.炒白术.淮山药.苡米.百合.金丝瓜.冬瓜.海带.海参.胡萝卜.白萝卜.胡桃仁.黑木耳.蘑菇等. 在月经来潮时,可出现食欲差.腰酸.疲劳等症状.此时,宜选用既有益肤美容作用,又对"经水之行"

  • 一台安卓手机玩转你所有的社交生活 一台安卓手机玩转你所有的社交生活

    警告:如果你希望和你现实中的朋友继续保持紧密联系的话就不要看这篇文章了,看完你会更加沉迷在社交网络中无法自拔的.一句玩笑话,大家别当真,下面小编来向大家介绍几款Android社交网络应用. 在几年前,你还需要通过电脑来管理你的社交网络,然而时至今日你可以丢掉这些笨重的设备,仅仅只需一台智能手机,你所有的社交生活就可以在移动中完成. 首先让我们一起来看看世界上最流行的大牌社交应用吧: Twitter mobile, Android2.1及更高版本 Instagram, Android2.2及更高版

  • 魅族MX4 Pro版采用的是什么处理器? 魅族MX4 Pro版采用的是什么处理器?

    问:魅族MX4 Pro版采用的是什么处理器? 对于魅族MX4 Pro版的发布时间一直是很多魅友们多关注的,但是至今迟迟没有和大家见面.不过魅族官方已经正式对外宣布该机会在11月份正式和大家见面,而且关于魅族MX4 Pro版处理器问题也是现在很多人所关心的,下面小编就针对这个问题来为大家介绍下. [魅族MX4 Pro版处理器] 根据此前跑分平台泄露的消息,MX4 Pro将采用5.5英寸2560×1536分辨率显示屏,搭载主频2GHz的三星Exyons 5八核处理器(GPU为Mali-T628MP6

  • 狗能吃大蒜吗 狗能吃大蒜吗

    大部分人都知道宠物狗是不能吃洋葱的,那狗能吃大蒜吗? 狗能吃大蒜吗? 大蒜和葱类是完全不同的两种物质!大蒜有抗菌.消毒和驱肠寄生虫的作用,尤为对预防感冒和胃肠道细菌性传染病等有奇特的功效,常吃大蒜的宠物狗身体免疫力明显加强,蒜中挥发性大蒜素油脂可以让宠物狗的皮毛健康亮泽不会长跳蚤和虱子,3到8个月的小宠物狗每天半瓣蒜,成年宠物狗每天1瓣蒜可以为饲主免去日后不少的麻烦. 关于硫化物的问题,大蒜的确含有硫化物一只宠物狗一次性吃进40粒大蒜是会造成急性贫血,换成人一次性吃进这么多那就是胃出血,形成溃疡

  • qq高清头像怎么设置

    登录QQ后打开自己的个人资料 → 选择"更换头像" → 再点"本地照片"上传你喜欢的自定义图片即可.这里你的图片尺寸一定要超过100*100大小才能真正显示为高清头像.菲菲博客网提醒:如果您的QQ当前使用的是透明头像,则不建议更换哦!因为现在腾讯已经将透明特效头像的上传通道"和谐"了,一旦更换掉就回不来了. 那如何来查看好友的高清头像呢,很简单,两种方法都可以实现. 1)在好友列表里鼠标指向QQ好友的大头像,点头像图片的左上角小标志即可查看; 2

  • 2016猴年吉祥语大全 2016猴年吉祥语大全

    2016猴年吉祥语大全 人依旧,物依然,又是一年.想也好,忘也罢,本是平凡.今儿好,明更好,衷心祝愿.情也真,意也切,常驻心间.祝您春节愉快! 快过年了,灯笼红遍了大街小巷,烟花热闹了白天黑夜,祝福洋溢了天涯海角,年货备齐了吧?心情乐坏了吧?该送我红包了吧?呵呵,过年好! 今天二月初八芳春节,除秽寻芳来支招:除"二臭",口臭铜臭都除掉,桃花旺得人尖叫;寻"八芳"--花草树云鱼书酒和美女,八芳聚齐,一生好福气! 感谢您提供了一个平台,让我们展示自我能力,感激您耐心栽培

  • ipone5s会颠覆苹果的衰败之路吗

    ipone4s无疑是苹果最辉煌的时代,在那个时代,拥有一部ipone4s手机,代表着无限的高贵和荣耀,但乔布斯的离去和ipone5的四重门让果粉们对苹果失去的希望,然而最新消息表示, iPhone5S或12月份试产,即明年将会面世,现在正准备入手IPONE5的朋友赶紧停手吧,根据台湾<工商时报>援引供应渠道的消息披露,苹果计划在年底开始下一代苹果手机iPhone5S的小规模试产,数量在五万到十万部左右.不知ipone5s的出世,能否颠覆苹果的衰败之路呢? 一.苹果打破了数年来一年一机的惯例 数

  • DBGrid里的多条记录的多条字段内容怎么显示到Memo的多行中

    求教:DBGrid里的多条记录的多条字段内容如何显示到Memo的多行中? 本人用ADOQuery查询某表格后得到的查询结果显示到DBGrid中.为了得到DBGrid中的多条记录中非零的"原因概率"字段和该记录的"原因"字段内容,重新提取出来,把每条记录的原因和结论作为一行新记录,写入Memo中,得出Memo中的多行文字性记录.例如:第i条符合要求的记录的原因概率为"0.8",原因为"质量不平衡",这样就要在Mmeo的第i行显示

  • 关注利用伪基站+钓鱼网站获取受害者信息的攻击 关注利用伪基站+钓鱼网站获取受害者信息的攻击

    0×0 什么是伪基站 "伪基站"即假基站,设备一般由主机和笔记本电脑组成,通过短信群发器.短信发信机等相关设备能够搜取以其为中心.一定半径范围内的手机卡信息,通过伪装成运营商的基站,冒用他人手机号码强行向用户手机发送诈骗.广告推销等短信息. 骗子通常利用伪基站把自己伪装成运营商(电信.移动 10086 .联通 10010)甚至伪装成银行"工行95588"."建行95533"等宣称您的账户溢满xx积分,可兑换xx现金,要求用户通过手机登陆某个网站.

热门推荐