CSS的position/float/display

CSS的position/float/display

一、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相关的属性值可以用来垂直居中，效果一般。