我们在显示隐藏元素的时候经常会用到把display设置为none,设置为none效果很明显,就是让元素脱离文档流,不显示,不占文档空间。
static:默认值,没有定位,元素出现在正常的流中。
relative:无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。
absolute:绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。由于绝对定位和文档流无关,所以绝对定位的元素可以覆盖页面上的其它元素,可以通过z-index属性控制叠放顺序。
fixed:不包含在普通文档流中。
定位:
inhert:规定从父元素继承position属性的值。static:默认值,没有定位,元素出现在正常的流中。
relative:无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。
absolute:绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。由于绝对定位和文档流无关,所以绝对定位的元素可以覆盖页面上的其它元素,可以通过z-index属性控制叠放顺序。
fixed:不包含在普通文档流中。
浮动:
浮动的框可以左右移动,直到它的外边框碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样。
如果浮动的元素后有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。该特性经常会被用在是文字围绕图片上。当图片不浮动时,文字就会换行出现在下面;当图片浮动时,文字围绕着图片。用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素留出空间,因而行框围绕浮动框。
要想阻止行框围绕在浮动元素外边,可以使用clear属性。