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;}