-
不受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
提交
取消