-
不受relative限制的absolute定位，行为表现上是不适用top/right/bottom/left任何一个属性或使用auto作为值。查看全部
-
absolute的破坏性是对图片的absolute化。图片设置absolute后，图片就从标准文档流中脱离出来，没有东西可以继续支撑容器的高度，容器自然就坍塌了。好像把房子的柱子挪到房子外边，房子果断就塌了 absolute的包裹性是对容器的absolute化。容器设置absolute后，容器变为了 inline-block，容器本身没有设置宽度和高度的话，那么容器的宽高就等于内容的宽高，表现结果就是容器把内容包裹起来。查看全部
-
只有大神才会这么讲！厉害查看全部
-
当尺寸限制、拉伸以及margin:auto同时出现的时候，就会有绝对定位元素的绝对居中效果查看全部
-
text-align控制的是nbsp的位置，然后 absolute利用了跟随性，让图片显示在nbsp的后面，在微调margin-left的值让图片正确显示在中间（margin-left等于负自身宽度的一半）；display-inline也是很有用的，不然div还得另起一行查看全部
-
absolute与float不能同时存在查看全部
-
摆脱overflow的限制查看全部
-
absolute 整体布局查看全部
-
z-index准则查看全部
-
absolute应用优势查看全部
-
无依赖的absolute定位遵循位置跟随原则，搭配margin正负值可以实现很多绝佳布局查看全部
-
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>absolute的破坏性</title> <style> .box { padding: 10px; background-color: #f0f0f0; } input { position: absolute; top: 234px; width: 160px; height: 32px; font-size: 100%; } </style> </head> <body> <div class="box"><img id="image" src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg" width="256" height="191"></div> <input id="button" type="button" value="图片absolute化"> <script> var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button"); if (eleImg != null && eleBtn != null) { eleBtn.onclick = function() { if (this.absolute) { eleImg.style.position = ""; this.value = "图片absolute化"; this.absolute = false; } else { eleImg.style.position = "absolute"; this.value = "图片去absolute"; this.absolute = true; } }; } </script> </body> </html>查看全部
-
在img和i标签之间插入注释查看全部
-
absolute和float 的相同特性：破坏性 和包裹性查看全部
-
无依赖的绝对定位查看全部
举报
0/150
提交
取消