永利澳门游戏网址304:CSS之 absoulte 属性,cssabsoulte属性

能够协作margin 准确定位

  补助负值定位
  包容性强 IE6
  自适应强,维护性好,具备强壮性

  动漫尽量效能与相对定位成分上,两个 absoulte 要素会重叠,前者居上

行为表现

  脱离文书档案流
  去浮动( float absoulte 成分不能够並且现身卡塔尔(英语:State of Qatar)
  地点跟随(还在原位卡塔尔(英语:State of Qatar)
  问题: IE7使用 absoulte 的因素长久是 inline-block 元素
  杀绝: 外层套风度翩翩层无设置属性的标签

left/right/top/bottom与width/height可互相代替

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

absoulte全部布局

<header></header>
<article>
   <aside></aside>
   <main></main>
</article>
<footer></footer> 

1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

absoulte 属性,cssabsoulte属性 性子:
absoulte 与 float 具备同等的性状:包裹性,与破坏性 absoulte 与 float
可以轮番使用 不受 relative 限定的…

特性:

  absoulte 与 float 享有相像的特色:包裹性,与破坏性
  absoulte 与 float 能够改换使用
 
不受 relative 限制的 absoulte 牢固,行为表现上得以不选择 left/right/top/button/auto 等属性

z-index 无依赖

  如唯有三个 absoulte 成分,不要求设置
  如两个 absoulte 元素,调控DOM流的生龙活虎黄金年代,也可不需求
  七个固定交错, z-index: 1 控制
  非弹框类的 absoulte 元素, z-index <= 2 若冗余,需优化

CSS之 absoulte 属性,cssabsoulte属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注