一、position

  1. position属性取值:static(默认)、relative、absolute、fixed、inherit。
  2. postision:static;始终处于文档流给予的位置。它可以快速取消定位,让top,right,bottom,left的值失效。在切换的时候可以尝试这个方法。除了static值,在其他三个值的设置下,z-index才会起作用。(确切地说z-index只在定位元素上有效)
  3. position:relative和 absolute都可以用于定位,区别在于前者的div还属于正常的文档流,后者已经是脱离了正常文档流,不占据空间位置,不会将父类撑开。定位原点 relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留;absolute相对于第一个position属性值不为static 的父类。所以设置了position:absolute,其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档 流,不会占据父类的高度,也就不会有滚动条。
  4. position:fixed;旧版本IE不支持,却是很有用,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了。fixed可以有很多创造性的布局和作用,兼容性是问题。
  5. position:inherit。规定从父类继承position属性的值,所以这个属性也是有继承性的,@一丝yisi 前辈注意下。但是任何版本的IE都不支持该属性值。

二、float

  1. float属性取值:none(默认)、left、right、inherit。
  2. float:left(或right),向左(或右)浮动,直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流,会被正常文档流内的块框忽略。不占据空间,无法将父类元素撑开。
  3. 任何元素都可以浮动,浮动元素会生成一个块级框,不论它本身是何种元素。因此,没有必要为浮动元素设置display:block。
  4. 如果浮动非替换元素,则要指定一个明确的width,否则它们会尽可能的窄。(什么叫替换元素?根据元素本身的特点定义的, (X)HTML中的img、input、textarea、select、object都是替换元素,这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。)

三、display

  1. display属性取值:none、inline、inline-block、block、table相关属性值、inherit。
  2. display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框。
  3. display:none和visiability:hidden都可以隐藏div,区别有点像absolute和relative,前者不占据文档的空间,后者还是占据文档的位置。
  4. display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。
  5. nline-block就介于两者之间。
  6. table相关的属性值可以用来垂直居中,效果一般。

最新文章

  1. bzoj3110树套树
  2. 从零开始学习jQuery (三) 管理jQuery包装集
  3. NSCopy&NSMutableCopy
  4. 报文格式:xml 、定长报文、变长报文
  5. android 手机屏幕有关的几个工具(屏幕宽高,dp和px互相转换)
  6. Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案
  7. JS左右栏目添加器
  8. C#项目实例中读取并修改App.config文件
  9. js javascript jquery区别和联系
  10. Csharp: create word file using Open XML SDK 2.5
  11. 2014.7建兰NOIP模拟Day1 Running
  12. HDU 1074 (状态压缩DP)
  13. Ubuntu新建用户
  14. #图# #SPFA# ----- codevs1021 玛丽卡
  15. [BZOJ1031] [JSOI2007] 字符加密Cipher (后缀数组)
  16. 《XXX重大技术需求征集系统》的可用性和可修改性战术分析
  17. [Ubuntu] 运行.AppImage格式文件
  18. 设置position(absolute,fixed)导致flex布局不生效
  19. Cocos2dx开发之运行与渲染流程分析
  20. LeetCode 509 Fibonacci Number 解题报告

热门文章

  1. 009 Java集合浅析4
  2. 实现在easyui中的datagrid,点击某一列的列头弹出combobox下拉框
  3. 解决 Linux error while loading shared libraries: cannot open shared object file: No such file or directory
  4. windows phone 8.1开发:(消息弹出框)强大的ContentDialog
  5. iOS开发之UITableView及cell重用
  6. ECMAScript6-解构
  7. CSS3学习笔记(4)-CSS3函数
  8. 性能调优之剖析OutOfMemoryError
  9. This Handler class should be static or leaks might occur Android
  10. Linux命令的复习总结学习