-
絕對定位配合margin實現精確定位查看全部
-
解決IE7瀏覽器絕對定位永遠inline-block水平的bug只需要在其外面套一層block表標簽即可查看全部
-
折翼天使實例查看全部
-
脫離文檔流表現查看全部
-
定位的行為表現有二 脫離文檔流，折翼的天使 注意float的屬性：包裹性與破壞性，但沒有脫離文檔流查看全部
-
無依賴的絕對定位查看全部
-
absolute超越overflow限制查看全部
-
clear用來管控float帶來的破壞性，relative用來管控absolute查看全部
-
差異所在-拉伸更強大，第一種拉伸的ie7+瀏覽器支持；第二種設置width的只有現代瀏覽器支持查看全部
-
absolute的翅膀拉伸和width、height是可以相互代替的查看全部
-
left/top/right/bottom與width/height： 1.具有相互替代性 例：實現一個全屏自適應的50%黑色半透明遮罩層。 二種實現方式： 1.overlay{ position: absolute; width:100%;height:100%; left:0;top:0; } 2.overlay{ position:absolute; left:0;top:0;right:0;bottom:0; }查看全部
-
動畫盡量作用在絕對定位元素上查看全部
-
z-index無依賴 1.如果只有一個絕對定位元素，自然不需要z-index,自動覆蓋普通元素； 2.如果兩個絕對定位，控制DOM流的前后順序達到需要的覆蓋效果，依然無z-index； 3.如果多個絕對定位交錯，非常非常少見，z-index:1控制； 4.如果非彈窗類的絕對定位元素z-index>2,必定z-index冗余，請優化！查看全部
-
【CSS】【處理對齊、溢出技巧】 1.處理文字前的星號 將星號絕對定位后其不占據任何空間，方便后面的文字左對齊 <label class="regist-label"><span class="regist-star">*</span>登錄密碼</label> .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; } 2.圖片與文字垂直對齊 對圖標設置絕對定位，并設置margin為負值 <span class="regist-remark regist-warn"> <i class="icon-warn"></i>郵箱格式不準確（演示） </span> .regist-warn { padding-left: 20px; color: #be3948; } .regist-warn > .icon-warn { position: absolute; margin-left: -20px; } 3.處理文字溢出 利用absolute絕對定位使span不占據任何空間，從而使其不換行（注<span>必須緊跟前一個標簽，不能有空格） <span class="regist-remark">請輸入6-16位密碼，區分大小寫，不能使用空格</span> .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }查看全部
-
position：absolute的表現： 1，去浮動，絕對定位實現的時候，浮動是無效的；比如說：圖片浮動后絕對定位和直接絕對定位的位置是一樣的； 2，位置跟隨：原先是block水平，那absolute后依舊是換行顯示的，原先是inline或者inline-block，那么還是在原位置；特例：在IE7瀏覽器下，任何元素絕對定位都是inline-block化的查看全部
舉報
0/150
提交
取消