A-A+

CSS深入理解之absolute/relative部分-张鑫旭/慕课网

2016年03月20日 HTML/CSS 暂无评论

absolute和float同父异母的兄弟。相同的特性:包裹性,破坏性。

独立的absolute可摆脱overflow的限制,无论是滚动还是隐藏。

不受relative限制的absolute定位,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。

在IE7下,任何元素绝对定位之后,都会inline-block化,即使之前是block水平,于是只会实现跟随性效果,不会换行显示。解决:在其元素外套一层没有任何设置的空div。

绝对定位有一个特性,宽、高不占据任何尺寸。

<i--  换行 -->消除图片和I标签之间的空格。

下拉效果

图片居中:1、text-align:center2、图片display:block,margin-left:auto;margin-right:auto;3、绝对定位,left:50%,margin-left:自身宽度的一半。translate() 50%。

动画尽量作用在绝对定位元素上。

内部拉伸特性的应用:左右半区翻图。

当尺寸限制、拉伸以及margin:auto同时出现的时候,就会有绝对定位元素的绝对居中效果。(IE8+)

relative对absolute的限制:

1.限制left、top、right、bottom定位

2.限制z-index的层级

3.限制在overflow下的作用。

relative对fixed的限制则只有第二个起作用

relative定位是相对于自身的。无侵入定位,不影响其他元素的布局。

z-index没有限制内部absolute元素层叠的问题。

尽量避免使用relative,

3

 

 

标签:

给我留言

Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality 海外

用户登录