[原创]关于absolute、relative和float的一些思考
absolute:
元素完全脱离文档流,不占文档流的位置,不使用top、left等属性时,仍然在原文档流位置上(但是不在文档流中,也不占用位置),设置了top、left等之后,向上寻找到第一个非static元素作为父元素进行定位。
设置为absolute会令元素的display转变为inline-block,宽度不再是默认100%,而是实际占用,可以设置width:100%来改变。absolute元素由于脱离了文档流,在父元素的宽度计算中,不会计入。
relative:
元素脱离文档流,但是还占用文档流中的位置,根据原位置进行偏移。(top、left等也有效)
float:
同relative一样脱离文档流,也占用文档流的位置,与relative有所不同的是,它会影响正常文档流中的文字和inline元素,围绕在自身周围。display也会转变为inline-block。
参考:http://www.cnblogs.com/fu277/archive/2012/03/13/2393519.html
[原创]关于absolute、relative和float的一些思考的更多相关文章
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- 2016/2/19 position: fixed absolute relative z-index float 半透明效果
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 显示效果 无论滚动条怎么移动 都固定在显示页面的一个位置不动 二.position:a ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css 定位(fixed > absolute > relative)与层级zIndex 的权限认知
原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...
- 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;
首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...
- html中相对(relative),绝对(absolute)位置以及float的学习和使用案例 (转)
这几天着手于CSS的研究,研究的原因主要是工作需要,最近发现如果做前端仅仅会javascript很难尽善尽美,当然懂样式和html在一定程度上可以让我们更近一步. css较为简单,由于个人擅长编写代码 ...
随机推荐
- 2017.7.27 logback配置文件
参考来自: Java深入 - logback的配置和使用 1 模块组成 logback分成三个模块:logback-core,logback- classic和logback-access. logb ...
- 转:Eclipse自动补全功能轻松设置
Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件 2012-03-08 21:29:02| 分类: Java | 标签:eclipse 自动补全 设置 |举报|字号 订阅 ...
- POJ 1144 Network(无向图连通分量求割点)
题目地址:id=1144">POJ 1144 求割点.推断一个点是否是割点有两种推断情况: 假设u为割点,当且仅当满足以下的1条 1.假设u为树根,那么u必须有多于1棵子树 2.假设u ...
- springboot jpa | mybaits
一.jpa: 1.jpa可以使用jpaRepository,@query的查询, 当然如果方法命名规范,可以不写sql代码 2.jpa可也使用EntityManager,通过@PersistenceC ...
- 使用Gulp定制前端开发环境
1.安装package.json中依赖了的组件 npm install 2.来到本地路径,创建工程配置文件 npm init 3.本地安装gulp npm install gulp --save-de ...
- myeclipse8.6 git 安装学习
只有公司有svn,回到宿舍无法访问,因此没法做迭代开发,因此最近学习了git,这样在公司了提交的代码,回到宿舍也可以继续开发,用了一天的时间才弄明白git的原理,智商有问题啊,下面说下具体步骤,个人已 ...
- APP开发关于缓存
1 http://www.cnblogs.com/qianxudetianxia/archive/2012/02/20/2112128.html 1.1 http://blog.csdn.net/ln ...
- 约瑟夫环用php实现
百度百科的解释:约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数,数 ...
- asp.net core mvc视频A:笔记1.基本概念介绍
此笔记来自视频教程 MVC本身与三层架构没有联系 使用VS2017新建一个默认的asp.net core mvc网站,认识结构及文件用途.
- IBM Security AppScan Glass Box:一种全新的漏洞扫描思想
IBM Security AppScan Glass Box:一种全新的漏洞扫描思想 Glass Box 是 IBM Security AppScan Standard Edition(以下简称 Ap ...