position
position 属性规定元素的定位类型。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。是脱离文档流的。
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
相对于最近一个position是static的父元素,脱离文档流。
relative
生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
不会脱离文档流。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
display
display 属性规定元素应该生成的框的类型。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
还有其他一些值run-in,table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell ,table-caption,inherit。
float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
设定值
display设置成inline-table,计算后的值是table。
display设置inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block,计算后的值是block。
设置成其他值,同设定值。
表-1 display经过计算后对应值
设定值 | 计算值 |
---|---|
inline-table | table |
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
其他值 | 同设定值 |
1、如果 display
的值为 none
,那么position
和 float
不起作用。在这种情况下,元素不产生框。因此浮动和定位无效。
2、如果position
的值是 absolute
或 fixed
,框就是绝对定位的,float
计算后的值应该是none
,并且,display
会被按照表-1设置。 框的位置将由 top
,right
,bottom
和 left
属性和该框的包含块确定。
3、如果float
的值不是 none
,该框浮动并且 display
的值会被按照表-1设置。
<style>
.float {
display: inline;
float: right;
width: 100px;
height: 100px;
background: #0ff;
}
</style>
<span class="float"></span>
图片display被设置成了block,可以用firebug查看 computed (计算)的属性值,正因如此,span才能设置宽度与高度
- 如果元素是根元素,’display’ 的值按照转换对应表设置。 (这一点不理解)