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

最新文章
  • 基于 Google Material Design 的主题 基于 Google Material Design 的主题

    MaterialDesign_TypechoTheme 一款基于 Google Material Design 的 Typecho 主题 A Typecho Theme based on Google Material Design Refer to Google / material-design-lite 基本特性 Demo Github 侧边栏包含 用户入口 I'm Feeling Lucky (显示随机文章 最新文章 最新评论 归档 独立页面 以及一些七七八八的东西... SmoothS

  • 哪边的 shitf 按的比较顺

    原谅我是个大水比 --cut--

  • 吃辣新人蜜月必去的重口味城市 吃辣新人蜜月必去的重口味城市

    贵州吃的不是单纯的辣,而是干辣酸辣, 一般贵州人家里,基本备有四种辣椒:辣椒粉,专门为荤菜配蘸水的;油辣椒,这是为吃粉.面用的;泡菜类型的糟辣椒,剁得碎碎的,这是专门炒菜.炒饭用的;干的红辣椒,炒菜时下锅煸炒.冠军理由:贵州的辣,种类齐全,辣得刻骨铭心,让人想起来胃就会一阵绞痛. 云南的德宏拥有世界上最辣的辣椒品种,那就是云南象鼻涮涮辣,鱼印度东北部山区的魔鬼辣椒是同一类品种的变异.云南当地人也很小心吃这种辣椒,因为辣度是朝天椒的20-30倍.如果说云南人不能吃辣,你就去吃两只"涮涮辣"

  • 人,活一辈子不容易

    人生的得与失,成与败, 繁华与落寞不过是过眼烟云. 而永远陪伴我们一生, 如影随形.不离不弃的只有心情: 如同呼吸,伴你一生的心情是你唯一不能被剥夺的财富. 人,活一辈子不容易, 忧伤是活,开心也是活,既然都是活, 为什么不开开心地生活呢? 人生如梦,生命再长,也不过百年, 为什么要让自己幽怨.颓废.痛苦一生, 而辜负这在大好年华呢? 父母给予我们生命和爱,可他们迟早会衰老: 孩子给我们满足和喜悦,可他们终究会长大: 爱情给我们幸福和甜蜜,可我们必须付出一生的代价去呵护: 金钱是水中的浮萍,时聚

  • iOS8怎么安装百度输入法? iOS8怎么安装百度输入法?

    iOS8系统终于支持第三方输入法了,这是此前iOS越狱设备才享有的待遇.随着iOS8正式开始推送与下载,目前我们在APP Store上惊喜的发现"搜狗输入法"以及"百度搜索法"抢先登陆苹果应用商店.那么iOS8怎么安装百度输入法?下面一起看看iPhone6安装百度输入法教程吧,此方法适合任何安装iOS8的iPhone设备. 一.首先从iPhone6桌面进入APP Store应用商店,然后搜索"百度输入法"找到百度输入法安装界面,然后点击"

  • 应用推荐加特效,“校花玩坏了“引爆APP下载潮 应用推荐加特效,“校花玩坏了“引爆APP下载潮

    百度2014H1移动分发报告显示,应用市场细分用户群体中学生体量占比在快速提升,而毋庸置疑,拥有较高消费力的高校群体已成为APP市场消费主流.据<95后大学生手机使用习惯报告>显示,在95后大学生心目中更看重的优秀应用特质的排名,实用性.安全可靠.新鲜有趣分别位列前三位,一向被外界认为追求个性."颜控"的95后骨子里却是"实用主义者". 为了迎合高校群体的使用习惯,充分挖掘各类APP的实用属性,国内最大的手机应用商城--安卓市场重磅推出"校花玩

  • 如何恢复丢失的Word 文档 如何恢复丢失的Word 文档

    方法 1:搜索原文档 为此,请根据您所运行的 Microsoft Windows 版本执行下列步骤. Windows Vista 单击"开始" 收起这个图片展开这个图片 ,在"开始搜索"框中键入文档名,然后按 Enter. 如果"文件"列表中包含该文档,请双击该文档,在 Word 中将其打开. 如果"文件"列表中未包含该文档,请转至步骤 3. 单击"开始" 收起这个图片展开这个图片 ,在"开始搜索

  • 甜蜜蜜果酱布丁

    菜系及功效:美味糕点 甜蜜蜜果酱布丁的制作材料:主料:新鲜蜜桃2个,鲜奶,奶油各半杯,草莓1个,朱古力160克 辅料:鸡蛋2只,鱼胶1汤匙 调料:柠檬汁,草莓酱,芒果酱各1汤匙 教您甜蜜蜜果酱布丁怎么做,如何做甜蜜蜜果酱布丁才好吃(1) 鲜桃剥皮去核,鸡蛋去白留黄,取1只蛋黄与糖搅匀,放一厚底锅内. (2) 将1/4杯鲜奶煮沸,倒入锅内用慢火煮,并不停搅动,直至成蛋糊(不煮沸). (3) 鱼胶片放入水内浸5分钟,然后加入蛋糊内搅匀,直至完全溶解. (4) 用搅拌器将1只桃打成酱,加入蛋糊.柠檬汁

  • 推广效果从弱到强,需注重哪些因素

    网络推广,是网络营销中重要的组成部分.其主要是借助于网络宣传的形式,获取相应的关注度,促进产品销售.网络推广的载体是电子商务网站,再进行口碑式的的宣传.形式上看似具有简单化,但需注重的细节是较多的.如做出效果,是需要花费时间,进行周期性的策划.细节决定成败,是十分具有实践性的理论.推广效果不会一下子的显现出来,是具有一定的过程性的.所以,做网络推广需具备以下几个要素. 一.心理要素 一名出色的网络推广员,需具备良好的心态.如遇挫不气,敢于面对困难.从实际的角度来看,做网络推广的是最累的一项.既要

  • Android用线程当注意

    Android用线程应注意 我们都知道Hanlder是线程与Activity通信的桥梁,我们在开发好多应用中会用到线程,有些人处理不当,会导致当程序结束时,线程并没有被销毁,而是一直在后台运行着,当我们重新启动应用时,又会重新启动一个线程,周而复始,你启动应用次数越多,开启的线程数就越多,你的机器就会变得越慢. 为了方便 大家理解,我写一个简单的Demo.功能就是每2秒中将应用的Title更换一次.具体步骤如下: 第一步:新建一个Android工程命名为ThreadDemo. 第二步:修改Thr

热门推荐