8.16 CSS知识点7

display(元素显示模式)

语法：

display : block | none | inline | inline-block

display  属性用来设置元素的显示方式。

block    块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。

inline  行间对象与block刚好相反，它允许其它元素在同一行显示。

none  隐藏对象

例：

div{display:block}

float（元素的浮动）

用来控制元素是否浮动显示。

语法：

float：none | left | right

left 向左浮动

right 向右浮动

none 不浮动

说明：

浮动的时候元素的显示属性也变化了 变为“行内元素”

例：

div{float：left}

position（元素的定位）

语法：

position：static | absolute | fixed | relative

static：无定位，默认值

absolute：绝对定位

relative：相对定位

fixed：固定定位

absolute说明：

脱离文档流

通过top，bottom，left，right定位

如果父元素position为static时，将以body坐标原点进行定位

如果父元素position为relative时，将以父元素进行定位

例：

div{position：absolute；left：100px;top:100px;}

relative说明：

相对定位（相对自己原来的位置而言）

不脱离文档流

参考自身静态位置通过top，bottom，left.right定位

例:

div{position:relative;left:100px;top:100px;}

fixed说明：

固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于浏览器窗口而固定，

而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一

样的地方。

例：

div { position: fixed; right:0; bottom:0;}