1、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed ,该元素就会脱离文档流。
但是relative元素是个特例,因为该元素对然脱离了文档流,但是它原本所占的空间仍然占据文档流。
例如:
Code
2、positon 与 display
元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位
<span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的,
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>,这里的display:block就是多余的了。
3、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float(但是能设置margin和padding,只是这时的margin或者padding的值影响的是定位流,而不会影响原来的文档流)。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素(也就是说一旦设置了float,元素都会被设置成块级元素)。
本文转自http://blog.sina.com.cn/s/blog_8f7509310100vs8m.html
只要元素设置了 postion : absolute | relative | fixed ,该元素就会脱离文档流。
但是relative元素是个特例,因为该元素对然脱离了文档流,但是它原本所占的空间仍然占据文档流。
例如:
Code
2、positon 与 display
元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位
<span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的,
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>,这里的display:block就是多余的了。
3、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float(但是能设置margin和padding,只是这时的margin或者padding的值影响的是定位流,而不会影响原来的文档流)。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素(也就是说一旦设置了float,元素都会被设置成块级元素)。
本文转自http://blog.sina.com.cn/s/blog_8f7509310100vs8m.html