css之absolute

## absolute ##
绝对定位具有包裹性(就作为块级元素的包裹其他元素的元素而言,它设置成绝对定位后,它会紧紧包裹在内容外面,失去大小)
位置跟随:当被设置为absolute的元素不是display:block时,就会有位置跟随。表现为紧跟在前一个元素后面。


    如果是block,就正常的在上一个元素后面换行显示。
### absolute与margin定位 ###
在没有设置top与left的absolute元素中可以使用margin定位。
没有设置定位值的absolute元素是一个破坏了inline-boxes的元素,而且相对于float,它高和宽都没有。但是它还会在父元素中,看起来没什么变化,依然能够使用margin,padding。
设置了定位值之后,它脱离了文档流。它的left和top都是对于父元素中除了static定位的元素。

注:在开发时,html标签之间的空格是占据空间的,正如它们在ChildNodes里面一样。因此,如果使用绝对定位并用margin属性来设置布局时,就要使用<!-- --\>来进行空格消除,这个注释符号是不会在页面显示的。

----建议在开发中多使用margin+position:absolute/fixed。来进行布局,它不会影响其他元素,而且,会自适应浏览器的大小变化。


### absolute定位的元素,在设置了left,top属性之后,摆脱了原来的框架束缚,重新来到一个新的框架中,并且如果这个层次上有非绝对定位元素时,它会产生跟随现象,前面元素时block,则其在下一行显示,前面元素是非block,就在同一行跟随显示,看起来就像它没有失去自己的宽高,进入到了一个新文档流中一样。其实它不在流中,而是与脱离束缚之前的表现一样,只不过不在一个层次上罢了。 ###



-  即使设置了absolute,我们也一样可以使用margin进行定位,以前的理解是错误的,并没有说margin和absolute冲突。
-  理解为什么不设置left等定位属性,margin:0 auto就失效。

------对此我是这么理解的:在原文档流中,absolute元素已经失去了定位,因此margin无法选中它,设置了值后,它进入了ablosute文档流,是独立的文档流,在这里即可以使用margin:0 auto进行居中了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值