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

CSS笔记【2】:定位和浮动

时间:2017-10-20 13:28:03      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:href   空间   概念   clear   默认   position   sina   通过   允许   

这块内容涉及较多,先上一些概念的解释

 

CSS定位(positioning):属性的一种,允许对元素进行定位,也就是让你可以自由设置你的元素框出现在你想让它出现的地方

 

定位机制有3种:普通流、浮动和定位。

1、普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。

2、浮动:(flaot)脱离文档流,不占空间。

3、定位:(position)

  Static:保持文档流。

  Relative(相对定位):相对本身的原始位置发生位移且保持文档流,占空间。

  Absolute(绝对定位):脱离文档流,不占空间且相对于其包含块来定位。

  Fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

 

以上几点都说明,元素默认下是处于文档流中且占据一定空间,而浮动将会托体文档流而浮动在文档流之上,如果不加设置将会覆盖文档流中的内容,但是可以通过 clear属性 来清楚浮动,具体原理请看底部

然后定位是可以视情况来设定,使用灵活。

4、z-index:该属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。仅能在定位元素上奏效(例如 position:absolute)

 

浮动参考:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

文档流参考:http://blog.sina.com.cn/s/blog_68150d100101229a.html

 

CSS笔记【2】:定位和浮动

标签:href   空间   概念   clear   默认   position   sina   通过   允许   

原文地址:http://www.cnblogs.com/Junda/p/7698682.html

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