码迷,mamicode.com
首页 > Web开发 > 详细

8.16 CSS知识点7

时间:2016-08-17 13:51:29      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

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

 

8.16 CSS知识点7

标签:

原文地址:http://www.cnblogs.com/tori/p/5779387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!