`

彻底弄懂CSS盒子模式之四

 
阅读更多

前言

在用CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所 措,而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来,比如CSS相册等等,因此自己杂乱的网页与高手完美的设计形成鲜明对比,这在一定程度 上打击了初学定位的网友,也在他们心目中形成这样的一种思想:当我熟练地玩转CSS定位时,我就已是高手了。不管你怎么想,我只希望下面的教程能让你更深 入地了解CSS定位属性。

阅读建议

先说说我这篇教程的思路,这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的:先给出定位较专业化精炼的解释,接下来再用打比如的方法形 象地介绍它们,此时大家要和前面讲到的专业解释对比阅读。介绍完理论,将通过实例来介绍定位的各知识点,虽然实例不美,但每一则实例都是精心挑选的,如果 要完整掌握CSS定位方法,请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读本文的兴趣或者动力,你可以先跳到最 后看综合实例的运行效果。

1.定位的专业解

(1)语法
position : static | absolute | fixed | relative
(2) 说明
从 上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位 (relative)。在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。

绝对定位(absolute): 将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。
相对定位(relative): 对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2.定位的形象解释

我先来架设一个虚拟的场景:有一个矩形的房间,里面还有一个水桶装了些水,水里还浸泡着一个西瓜,这个房间半空中还有不少的钩子用于挂东西用。现在 我把网页元素与上面物件对应上,那么房间就是一个网页,水桶是网页中的一个板块,桶中的水就是文本流,西瓜就是将要被定位的对象。
(1)贡献的绝对定位(absolute)
对 照前面解释,如果西瓜被赋予绝对定位,那么就等于把西瓜从水中捞起来挂在半空中的钩子上,水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自 己原先占用位置,所以说它是贡献的)。此时如果之前没有对水桶进行定位设定,那么被拿起的西瓜位置不会再受水桶位置影响,水桶怎么移动,西瓜还是挂在原来 位置,至于西瓜要怎放,则以房间左上角(body左上角)为准,用left,right,top,bottom值来定位。但是如果水桶也给出了定位设置 (通常是相对定位,下面有讲到这一实用技巧),此时西瓜的摆放就没有那么自由了,尽管此时西瓜被拿起来了不会影响水桶中的水(文本流),但它还是要听桶的 话,桶会告诉西瓜“你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走你也要跟着走”,如果桶中有很多个西瓜, 可以全部拿出来吊到半空中,它们将被安排在不同高度的空间(层),所以在房顶垂直往下看,有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是 不存在的,就像FLASH动画中的不同层上安排了元素,但它们在看时不会有深度感觉)。可见绝对定位的对象参考目标是它的父级,专业称之为包含块。
(2)自私的相对定位(relative)
相 对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己说了算,要定 位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解,那么此时西瓜似乎是有魔法的,如果西瓜通过相对定位在水桶中偏移了你 会看到一个现实生活中不存在的现象:水中有一个地方水凹下去了,周围的水不能填补它,西瓜看起来在旁边,如果搅动一下桶中的水,那个凹的位置会发现改变 (文本流对相对定位对象还存在影响),但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响,因为对象并没有真正脱离文本流,就像有两 个人在同一层楼水平移动的过程中会有碰头的机会。
(3)总结两种定位的特征
绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层,我们这里理解为文本流就放在首层),它们互不影响,但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响。
(4)对特殊情况的补充
在 用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个对象一开始就 是背靠着最外边墙的,此时再用一个负值定位它,它就会神奇般地跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生,本人只为了延用上面的比如作形象 解释。

3.实例强化对定位属性的理解

(1)无定位设置,对象遵循HTML定位规则。一般是子级不会跑出父级外边去(子级没有使用负边界情况),子级一般是靠在父级左上角的,父级放在最下层。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(2)给设定了定位属性的对象指定left,right,top,bottom属性中的至少一个,不然定位不起作用。下面实例中虽然给box2设定 了定位属性position: absolute,但是如果没有指定其中一个方位定位值top: 0px,定位是不发生作用的,你可以删除我注释的样式再测试效果进行前后对比。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(3)绝对定位对象可以层叠,层叠顺序用z-index控制,如果没有指定则遵循其父对象的定位方法,就目前来说要做到不同浏览器正常浏览,最好不 要给z-index指定负值,因为像FF这样标准的浏览器不支持负值,为了解释这一现象,下面实例中的最底层图片我用到了负值,所以会出现在IE中可以看 到3幅图层叠,而转到FF中你就只能看到两幅图层叠了。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(4)相对定位对象会占据它原来位置,在下面实例中,没有设定相对定位前,绿色小盒子是在蓝色盒子左上角的,之前也设定了绿色小盒子的浮动方式为左 浮动,可以看到文本环绕在它右边,但是后来用相对定位方法把绿色小盒子重定位到外面去了,它还占着自己原来位置,因为你还可以看到文本流没有发生自动填补 流动。因此这种直接的相对定位方法较少用,因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用,一般是给父级设定相对定位方式,子级元素就可 以相对它进行方便的绝对定位了(请注意看后面的实例)。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(5)相对定位的对象不可以重叠。这一点也许比较难理解,先来这样理解吧,因为相对定位的对像没有脱离文本流,就像两个还是住在同一层楼的人,任何 时候,他们脚下踩的地方不可能被另一个人踩着的,如果可以就意味着两个人共享一块地方了。在下面的实例中,两个小盒子都刚好排在大盒子上方,所以在大盒子 中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置,当前它们下方的空间其实不是自己的,也正因为它们没有重叠,所以盒子上方 还是有两个盒子占用的空间,下面文字无法向上流动(我已对盒子设定了浮动属性的了,如果不设定,即使有空间文本也不会往上流,上面盒子是块级元素,会独立 占据一行)。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(6)高度自适应的妙用。在下面实例中,右边的紫色小盒子高度是没有设定的,它的高度是随着里面内容的增加而增高的,但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角。同理,我们也可以只设定高度而让宽度自动随内容增加而变宽。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(7)给包含块一个高度,或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中,如果你本意要实现下面效果:把小盒子在父盒子中的左上角垂直往下偏移,上方留出一块区域,如果你删除了box1的高度会怎么样呢?自己测试一下吧。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(8)放置绝对定位对像到可视区外会出现滚动条。一般情况下,绝对定位是用来方便定位网页要看得见元素的,而不是拿它来隐藏对象的,一般隐藏对象常用到display与margin,如果你试图把绝对定位的对象移出可视区域,嘿嘿,浏览器会为你准备滚动条去看望它。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(9)放置相对定位对像到可视区外不会出现滚动条。此现象很好理解,因为相对定位对象原来位置没有变,原来位置没有出去滚动条就不会出现。在下面实例中,如果你缩小浏览器窗口,相对定位的对象还会出现完全消失的情况呢。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(10)定位的特殊值情况。如果定位设置是这样的:position:relative ,right:200px, left:10px会出现什么情况呢?一边叫对象向右偏移10px,另一边又叫对象向左偏移200px,到底是听那边的呢,还是那个先,那个后呢。针对这 种矛盾情况,CSS规定只听左边的left,而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话,就以top为准,所以在下面的实例中,你如何改变right的值,对象位置不会发生改变的。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

4.综合实例见证定位的魅力

先看最终演示效果,具体教程请继续关注,本人正抽空整理。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

5.延伸阅读

(1)详解定位与定位应用 小毅 蓝色理想
(2)由浅入深漫谈margin属性 怿飞 蓝色理想

经典论坛讨论
http://bbs.blueidea.com/thread-2733320-1-1.html

本文链接:http://www.blueidea.com/tech/web/2007/4601.asp  

分享到:
评论

相关推荐

    彻底弄懂CSS盒子模式

    【彻底弄懂CSS盒子模式】 CSS盒子模式是CSS布局的基础,理解它对于使用CSS进行网页设计至关重要。在网页设计中,元素(如div)被视作一个个“盒子”,每个盒子都有其特定的属性,包括内容(content)、内边距(padding...

    彻底弄懂CSS盒模型

    【彻底弄懂CSS盒模型】 CSS盒模型是前端开发中至关重要的概念,它定义了网页元素如何占据空间和相互布局。CSS盒模型由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型...

    推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页

    在CSS盒子模型中,一个元素的盒子由四个基本部分组成: 1. **内容(Content)**:显示文本、图片等实际内容的部分。 2. **填充(Padding)**:内容与边框之间的空间,可以设置背景色或透明度。 3. **边框(Border)...

    CSS盒子模式(DIV布局快速入门)

    CSS盒子模式将网页元素视为具有内容、内边距、边框和外边距四个部分的盒子。 1. **内容(content)**:这是盒子的核心,包含文字、图像或其他HTML元素。在CSS中,你可以直接操作内容,如更改文本颜色或图像大小。 2....

    彻底弄懂CSS盒模型 Box Model

    【彻底弄懂CSS盒模型 Box Model】 在网页设计中,CSS盒模型是理解网页布局的基础。这个模型描述了网页元素如何占用空间并与其他元素交互。盒模型包括四个关键部分:内容(content)、内填充(padding)、边框...

    CSS盒子模型教程PPT课件.pptx

    CSS 盒子模型是指浏览器对网页中的各个元素(图片、段落、单元格等)进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念,...

    css 盒子模型彻底解析

    CSS 盒子模型是网页设计中至关重要的概念,它定义了HTML元素在页面上占用空间的方式。这个模型包括四个主要部分:内容(content)、内边距...因此,深入理解和熟练掌握CSS盒子模型是每个前端开发者必备的技能之一。

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    本文将深入探讨"CSS权威指南"、"css彻底设计研究"、"HTML5和CSS3实战"以及"HTML5与CSS3设计模式"这四个主题中的关键知识点,帮助读者掌握这些领域的核心概念。 首先,"CSS权威指南"是一本经典教程,它全面地介绍了...

    CSS盒子模型.rar

    **CSS盒子模型详解** 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,其中CSS盒子模型是理解布局和元素尺寸计算的关键概念。本资料将深入探讨CSS盒子模型,帮助你掌握这一核心知识。 **一、基本概念...

    CSS中的盒子模型(图片)

    这四个部分共同构成了一个元素的完整“盒子”。 1. 内容区域(Content):这是元素的核心,包含实际的文本、图像或其他媒体内容。CSS可以直接操作内容的样式,如颜色、字体大小等。 2. 内边距(Padding):位于...

    CSS盒子模型的应用

    **CSS盒子模型详解** 在网页设计中,CSS(层叠样式表)盒子模型是一个至关重要的概念,它定义了网页元素如何占用空间并与其他元素交互。理解盒子模型对于精确控制页面布局至关重要。本篇文章将深入探讨CSS盒子模型...

    CSS+DIV-盒子模型示例.zip

    **CSS+DIV 盒子模型详解** 在网页设计与开发中,CSS(层叠样式表)和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念,它将...

    Css盒子模型入门指导

    CSS盒子模型由四个主要部分组成: 1. **内容(Content)**:这是盒子内的实际内容,如文字、图像等。 2. **内填充(Padding)**:位于内容区域和边框之间的空间,用来增加元素内部的距离,起到缓冲和美化的作用。 3....

    CSS设计彻底研究 csS设计彻底研究实例源码

    CSS设计彻底研究 CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码

    CSS下盒子模型定位浅析.pdf

    【CSS盒子模型定位浅析】 CSS(层叠样式表)是一种强大的样式控制工具,它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念,它将HTML元素视为一个个具有内容(content)、内边距...

    CSS盒子模型PPT教学课件.pptx

    CSS 盒子模型是 CSS 的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互。在网页设计中,每个 HTML 元素都可以看作是一个装了东西的盒子,这个盒子由元素的内容、填充、边框和边界组成。 CSS 盒子...

    css盒子模型-京东快报

    IE6及更早版本采用了不同的盒子模型(称为"怪异模式"),其中元素的宽度和高度会包含内边距和边框。为了避免这种兼容性问题,可以使用`box-sizing`属性来统一盒子模型,例如`box-sizing: border-box;`会让元素的总...

    css彻底设计研究css.pdf+源码

    CSS设计彻底研究是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上,深入到各个实际应用领域中,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和效果。需要的朋友们...

    tytttta#CSS-learning#五CSS盒子模型1

    1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用

Global site tag (gtag.js) - Google Analytics