文档章节

position和float的用法详解

yongu
 yongu
发布于 2015/04/09 11:29
字数 1577
阅读 27
收藏 0
点赞 0
评论 0

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。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>
<styletype="text/css">
    .fl{float:left;background:red;border:solid 1px #00f;}
    .nfl{background:#ff0;border:solid 1px #000;}
</style>
</head>
<body>
    <spanclass="fl">我是float元素1</span>
    <spanclass="nfl">我是非float元素</span>
    <spanclass="fl">我是float元素2</span>
    <spanclass="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流。toprightbottomleft等属性不会被应用。

2. 相对(relative):父

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

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

3. 绝对(absolute):子

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

absolute定位的一般用法:

  • 如果一个标签有一个绝对的位置,并且它不在任何其他应用了absolute、relative或者fixed定位的标签里面,那么它是相对于页面(body元素)进行定位的。

  • 如果一个标签处在另一个带有absolute、relative或者fixed定位的标签里面,那么它是相对于该元素的边界进行定位的。

即,position: absolute的元素在static的父元素中是相对页面(不是浏览器窗口)进行偏移,在非static父元素中(通常是relative,因为如果父元素是absolute,那父元素还要向上找非static祖先元素)是相对父元素进行偏移。

4. 固定(fixed):

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

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



© 著作权归作者所有

共有 人打赏支持
yongu
粉丝 2
博文 17
码字总数 13645
作品 0
乌鲁木齐
程序员
css定位——position和float的用法详解

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

丶唄売 ⋅ 2013/06/04 ⋅ 0

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

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

小微 ⋅ 2012/10/18 ⋅ 4

CSS 最核心的几个概念

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

数通畅联 ⋅ 2015/09/07 ⋅ 0

CSS中Position、Float属性深入探讨

 对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及...

cnu2m ⋅ 2016/03/01 ⋅ 0

Unity3d 控制物体transform移动的几种方法

在Unity开发中我们难免要使用代码控制角色的移动,现将已知的几种方法总结如下: 一、transform.Translate() function Translate (translation : Vector3, relativeTo : Space = Space.Self)...

renkai0406 ⋅ 2017/03/19 ⋅ 0

css float浮动详解

css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,...

月心寒 ⋅ 2016/11/19 ⋅ 0

一步一图剖析CSS中的position定位

在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.通常如果你不是一个很熟练的Csser,那么你对与position肯定还是一知半解,比如说我自己... posit...

顽Shi ⋅ 2014/03/21 ⋅ 5

Cocos2d-x-v3中3D网格特效动画的应用

Cocos2d-x-v3中3D网格特效动画的应用 一、网格特效的使用原理 基础的动作是对节点整体进行移动,变形等操作,网格特效的原理是将节点分割成多个尺寸相同的网格,根据改变每个网格块的属性使整...

珲少 ⋅ 2015/08/06 ⋅ 0

对CSS中的Position、Float属性的一些探讨

Position属性: 因为Position属性能够很好的体现HTML普通流这个特征。重点在于应用了不同的position值之后是否有脱离普通流和改变Display属性这两点。Position的属性值共有四个static、relat...

HalaMadrid ⋅ 2013/12/19 ⋅ 2

Android Gallery控件使用方法详解

我们今天给大家讲的就是Gallery控件,这个控件在android当中是非常重要的,我们今天就给大家介绍一下3D的Gallery控件是怎么样来实现的。下面我们就来直接看看代码吧。 1.扩展Gallery: publ...

长平狐 ⋅ 2012/08/14 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

AppDelegate 设置Root相关

self.window = UIWindow.init(frame: UIScreen.main.bounds) self.window?.backgroundColor = UIColor.white self.window?.makeKeyAndVisible() self.window?.rootViewController = RootTabB......

west_zll ⋅ 18分钟前 ⋅ 0

Java并发系列5--倒计时器CountDownLatch

今天讲一个倒计时器工具,叫CountDownLatch。需要这个工具的场景大概有:当所有的小任务都完成之后,再启动大任务。 先看代码: public class CountDownLatchDemo {static final CountDow...

大大枣 ⋅ 20分钟前 ⋅ 0

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部...

葡萄城控件技术团队 ⋅ 21分钟前 ⋅ 0

Mac下IntelliJ IDEA快捷键大全

https://blog.csdn.net/lisongjia123/article/details/54949364

细节探索者 ⋅ 24分钟前 ⋅ 0

建造者模式

1、工厂模式中创建的对象大都是简单的对象 复杂的产品类并且拥有不同的属性特点的管理就需要用到建造者模式 2、建造者模式: 将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以...

职业搬砖20年 ⋅ 25分钟前 ⋅ 0

Mysql数据库开发 怎么优化SQL语句?

 1) 现场抓出慢查询语句 show full processlist;   2) 配置参数:   slow_query_log_file = ON 慢查询开启开关   long_query_time =2 记录大于2秒的sql语句   log_queries_not_usi...

老男孩Linux培训 ⋅ 25分钟前 ⋅ 0

Laravel 安装执行php artisan migrate 出现字段过长错误

最近在自己研究Laravel Laravel版本:5.6 PHP版本:7.1.9 Mysql版本:5.7.19 Apache版本:2.4.27 系统版本:windows10 首先要保证电脑安装了composer,和node.js 执行命令 composer global ...

Marhal ⋅ 31分钟前 ⋅ 0

ELK6.0日志从收集到处理完整版教程(二)

ELK简介 Elasticsearch 开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等。也可以认为ElasticSearch是一...

bz_z ⋅ 34分钟前 ⋅ 0

Spark项目之电商用户行为分析大数据平台之(七)数据调研--基本数据结构介绍

目录 一、user_visit_action(Hive表) 1.1 表的结构 1.2 表的说明 二、user_info(Hive表) 2.1 表的结构 2.2 表的说明 三、task(MySQL表) 3.1 表的结构 3.2 表的说明 四、工作流程...

xiaomin0322 ⋅ 38分钟前 ⋅ 0

评分卡模型剖析之一(woe、IV、ROC、信息熵)

信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二...

火力全開 ⋅ 39分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部