CSS的position/float/display
一、position
- position属性取值:static(默认)、relative、absolute、fixed、inherit。
- postision:static;始终处于文档流给予的位置。它可以快速取消定位,让top,right,bottom,left的值失效。在切换的时候可以尝试这个方法。除了static值,在其他三个值的设置下,z-index才会起作用。(确切地说z-index只在定位元素上有效)
- position:relative和 absolute都可以用于定位,区别在于前者的div还属于正常的文档流,后者已经是脱离了正常文档流,不占据空间位置,不会将父类撑开。定位原点 relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留;absolute相对于第一个position属性值不为static 的父类。所以设置了position:absolute,其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档 流,不会占据父类的高度,也就不会有滚动条。
- position:fixed;旧版本IE不支持,却是很有用,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了。fixed可以有很多创造性的布局和作用,兼容性是问题。
- position:inherit。规定从父类继承position属性的值,所以这个属性也是有继承性的,@一丝yisi 前辈注意下。但是任何版本的IE都不支持该属性值。
二、float
- float属性取值:none(默认)、left、right、inherit。
- float:left(或right),向左(或右)浮动,直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流,会被正常文档流内的块框忽略。不占据空间,无法将父类元素撑开。
- 任何元素都可以浮动,浮动元素会生成一个块级框,不论它本身是何种元素。因此,没有必要为浮动元素设置display:block。
- 如果浮动非替换元素,则要指定一个明确的width,否则它们会尽可能的窄。(什么叫替换元素?根据元素本身的特点定义的, (X)HTML中的img、input、textarea、select、object都是替换元素,这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。)
三、display
- display属性取值:none、inline、inline-block、block、table相关属性值、inherit。
- display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框。
- display:none和visiability:hidden都可以隐藏div,区别有点像absolute和relative,前者不占据文档的空间,后者还是占据文档的位置。
- display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。
- nline-block就介于两者之间。
- table相关的属性值可以用来垂直居中,效果一般。
CSS的position/float/display的更多相关文章
- css的position,float属性的理解
我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...
- [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么? 列出display的值,说明他们的作用.position的值, relative和absolu ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS属性之float学习心得
全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:flo ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
随机推荐
- Redis-port安装使用实现redis迁移codis,以及简单redis pipe实现将mysql迁移redis
(0)Redis-port原理: 首先是看到下面这篇文档开始研究的redis-port http://www.itnpc.com/news/web/146085373656602.html 简要截图 ...
- cordova原理与插件制作
---恢复内容开始--- cordova插件打包教程: http://www.jianshu.com/p/96855e009e95 www.itnose.net/detail/6245407.html ...
- php函数的使用
<?php header("Content-type:text/html; charset=utf-8"); //普通函数 echo "<br/>--- ...
- LSTM基础
DNN,CNN,RNN:1.DNN:深度神经网络,或称多层感知机.解决早期单层感知机对于复杂函数不能模拟的情况.其形式为层之间全连接.实用sig等连续性函数模拟神经对机理的响应,训练算法使用 B ...
- CognitiveJ一个Java的人脸图像识别开源分析库
CognitiveJ 是一个开源的,支持 Java 8 API 的库,用于管理和编排 Java 应用和微软的Cognitive(Project Oxford)机器学习和图像处理库的项目,可以让你查询以 ...
- 安全超文本传输协议(HTTPS)详解
一.概念与摘要 HTTPS (Secure Hypertext Transfer Protocol)安全超文本传输协议,是一个安全通信通道,它基于HTTP开发用于在客户计算机和服务器之间交换信息.它使 ...
- oracle查询每个表所占的空间
查看当前用户的每个表所占的空间大小: select segment_name,sum(bytes)/1024/1024 size_M from user_extents group by segmen ...
- 【WCF】错误处理(三):错误协定
最近折腾换电脑的事,博客就更新慢了点.好,不废话,直入正题. 前面老周介绍过,SOAP消息中的错误信息是用一个 Fault 元素来包装的,前面老周也讲了其中的 FaultCode 元素,即可以对错误信 ...
- 常用PHP函数整理
is_upload_file() 判断文件是不是通过HTTP POST 方式上传来的in_array() 判断变量在不在数组范围内move_uploaded_file() 将上传的临时名移到指定文件夹 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...