文档章节

css定位——position和float的用法详解

小微
 小微
发布于 2012/10/18 16:58
字数 1783
阅读 7401
收藏 33

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明显的。下面和大家分享一下我的学习心得。

首先,先介绍一个很重要的概念“文档流,明白了这个概念之后就很容易理解position和float的定位原理了。

在css中有一个z-index属性,因为网页是“立体的”,它有z轴,这个z轴的大小就由z-index控制。默认情况下,所有页面元素均位于z-index:0这一层,而这一层顺序排列的元素就构成了“文档流。无论是position还是float,它们都是通过改变文档流来实现定位。

css有三种基本的定位机制:文档流、浮动和绝对定位。除非专门指定,否则所有元素都在文档流中定位。也就是说,文档流中的元素的位置由元素在 X(HTML) 中的位置决定。css定位的基本思想很简单,它允许你使得元素相对于其正常应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置来进行定位。

下面介绍position和float的定位原理。

(一)float:

float属性定位的元素位于z-index:0层。它是通过float:left和float:right来控制元素在0层左浮或右浮。float会改变正常的文档流排列,影响到周围元素。float元素在文档流中一个挨一个排列。但注意,只是float元素之间一个挨一个排列,对于非float的元素,float元素是视而不见的,会越过它们。

如下面的一段代码:

<html>
<head>
<style type="text/css">
    .fl{float:left;background:red;border:solid 1px #00f;}
    .nfl{background:#ff0;border:solid 1px #000;}
</style>
</head>
<body>
    <span class="fl">我是float元素1</span>
    <span class="nfl">我是非float元素</span>
    <span class="fl">我是float元素2</span>
    <span class="fl">我是float元素3</span>
</body>
</html>
1、2、3三个元素是float的,它们会越过非float元素一个挨一个排列,把非float元素挤到最后了。效果如下图:

概括来说,float:left时,会把非float元素挤到所有float元素的右边,float:right时是挤到左边。

(二)position:

position属性包括下面四个值:

  1. static(默认) 
    • 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  2. relative 
    • 元素框偏移某个距离。元素仍保持其未定位前的框的形状,它原本所占的空间仍保留
  3. absolute 
    • 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  4. fixed
    • 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身
设置absolute或relative会让z-index的值大于0。不同的是,absolute完全脱离文档流,不再在z-index中保留占位符,而relative虽然自己已浮起来,但仍然会保留自己在z-index:0中的位置,因此relative在z-index:0层中的相邻元素不会因此受到影响。下面是具体用法。

1. 静态(static):

元素顺序显示,在一个文档流中,一个挨着一个,但是不像relative那样可以设置top之类的。静态定位仅仅意味着内容遵循正常从上到下的HTML流。

2. 相对(relative):

一个相对定位的元素相对它在HTML流中的当前位置而放置。移动一个带有相对定位的元素,在该元素本该放置的地方留下了一个“洞”。相对定位的主要用处不是移动一个元素,而是给行内在它内部的绝对定位的元素设定一个新的参考点

position: relative的元素相对于自己本来应该在的位置进行偏移,偏移后的位置可能覆盖别人(是漂浮在上方)。它原来的位置也空着,因为它会被加入到文档流中。

3. 绝对(absolute):

绝对定位让你通过以pixel、em、percentage来指定一个左、右、上或者下的位置来确定一个元素的位置。此外,绝对定位的元素被完全与页面流分离,换句话说,网页上的其他东西甚至不知道这个绝对定位的元素的存在。

absolute定位的一般用法:

  • 如果一个标签有一个绝对的位置,并且它不在任何其他应用了absolute、relative或者fixed定位的标签里面,那么它是相对于页面(body元素)进行定位的。
  • 如果一个标签处在另一个带有absolute、relative或者fixed定位的标签里面,那么它是相对于该元素的边界进行定位的。
即,position: absolute的元素在static的父元素中是相对页面(不是浏览器窗口)进行偏移,在非static父元素中(通常是relative,因为如果父元素是absolute,那父元素还要向上找非static祖先元素)是相对父元素进行偏移。

4. 固定(fixed):

一个固定的元素被锁定在屏幕的位置上。fixed是相对浏览器窗口的固定位置定位,如网页中的“回到顶部”按钮。

注意:不要试图给同一个样式既应用float属性又应用任何一种定位,除了静态或者相对定位之外。浮动和绝对或者固定定位不可能同时作用在同一个元素上。

参考资料:

1. w3c school

2. 《CSS实战手册》

3. 《编写高质量代码——Web前端开发修炼之道》

(嘻嘻,我的参考资料终于不仅仅是网页而有书籍了。看书真的让人心里很安静,也很有收获。强烈推荐曹刘阳的《编写高质量代码——Web前端开发修炼之道》,太棒的一本书了!读来犹如醍醐灌顶一般!相见恨晚啊!不过建议大家对html、css和javascript都有所了解,并有一点实践项目经验之后再读。因为有了苦逼的编码经历之后,才能更好地体会书中所讲的问题,印象更加深刻。如果完全没有经验的同学,推荐先阅读《大巧不工——Web前端设计修炼之道》,书中将web开发的过程从头至尾,娓娓道来。

© 著作权归作者所有

下一篇: 学习笔记-目录
小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
加载中

评论(4)

爱学习的小菇凉
爱学习的小菇凉
79初学者 解惑了
柒月-小妖精
柒月-小妖精
很不错,学习了
小微
小微 博主

引用来自“tanglizao”的评论

再加上这一篇 《Learn CSS Positioning in Ten Steps》就非常OK了。
http://www.barelyfitz.com/screencast/html-training/css/positioning/

谢谢您的补充!
t
tanglizao
再加上这一篇 《Learn CSS Positioning in Ten Steps》就非常OK了。
http://www.barelyfitz.com/screencast/html-training/css/positioning/
css定位——position和float的用法详解

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还...

丶唄売
2013/06/04
64
0
CSS 最核心的几个概念

原文网址链接:http://www.geekplux.com/2014/04/25/severalcoreconceptsofcss.html 本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的...

数通畅联
2015/09/07
17
0
CSS 最核心的四个概念

本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如...

数通畅联
2015/12/21
69
0
【前端Talkking】CSS系列——CSS深入理解之absolute定位

1. 写在前面 本篇将要介绍的绝对定位absolute属性和此前介绍的CSS系列——CSS深入理解之float浮动有着几分的相似性,可以认为两者是兄弟关系,都具有“包裹性”、“高度塌陷”、“块状化”的...

micstone
2018/05/16
0
0
Advanced CSS Chapter 8 Layout

Advanced CSS Chapter 8 Layout All these CSS layout techniques rely on three basic concepts: positioning, floating, and marginmanipulation. The different techniques really aren’......

LuXing
2014/05/30
105
0

没有更多内容

加载失败,请刷新页面

加载更多

规则引擎

解决问题 版本迭代速度更不上业务变化,但是若多个业务同时变化,除了为每个业务设计专属配置项也不利于操作。就想服务接口单纯化,将复杂多变的业务逻辑交给规则引擎,让用户在web端或cs端自...

无极之岚
37分钟前
6
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
今天
396
10
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
10
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部