分針網—IT教育： Html / CSS常見問題的解決方案，分針css

分針網—IT教育： Html / CSS常見問題的解決方案，分針css
1. 解決Safari下input游標過大 2. 設定浮層 3. CSS繪製三角形 4. 清除浮動 1) 浮動元素父級添加樣式 2) 父元素後添加虛擬元素  3) 同樣可以使用如下方式（相容IE） 4) 在浮動元素後添加div.clear 注意點1) .clearfix 應用在包含浮動子項目的父級元素上2) 使用clear清除浮動會發生margin重疊顯現,使用BFC清除浮動（在浮動元素的父元素上添加overflow: hidden;）則會把整個元素包起來，從而不會發生margin重疊現象5. 設定元素div3高度為瀏覽器高度100%若html結構如下:body > div1 > div2 > div3若要使得 div3 佔滿整個螢幕高度，CSS設定如下:元素的高度100%只相對於父元素 6. CSS書寫順序1) 位置屬性position, top, right, z-index, display, float2) 大小width, height, padding, margin3) 文字系列font, line-height, color, text-align4) 背景background, border5) 其他animation, transition 7. 錨點連結h5中使用 id 作為錨點連結，如下： Yahoo軍規1） 盡量減少HTTP請求，將CSS、js、img資源進行合并2） 使用CDN內容分髮網絡：儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節，使內容傳輸地更快更穩定（將使用者的請求導向到離使用者最近的伺服器節點（增加伺服器複本）上，解決網路擁擠的狀況）3）增加Expire/Cache-Control頭:在本機快取中找到對應資源，若時間未到期，則直接使用此資源，不會發送http請求4） 啟用Gzip壓縮5）將CSS放在頂部6）將JS放在最下面7）避免在CSS中使用Expressions8）將CSS和JS放到外部檔案中9）減少DNS查詢10）壓縮CSS和JS11）避免重新導向12）移除重複的指令碼13）配置實體標籤Etag（使用特殊字元串標識某個請求資源版本）14）使用AJAX緩衝 8. 父元素寬度不夠導致浮動元素下沉為父元素添加負值的margin-right 9. z-index1）z-index 只針對定位元素 (absolute relative fixed )有效2）若不同的 z-index元素有嵌套，則顯示層級由父元素的z-index決定3）若不同的 z-index 元素無嵌套，則按照顯示順序以及數值大小決定顯示層級 10. 層疊水平（stacking level）——由低到高 (更符合載入功能和視覺呈現)1）層疊上下文 background/border2）負 z-index3）塊狀水平盒子 block4）浮動盒子 float5）水平盒子 inline/inline-block6）z-index: auto / z-index: 07）正 z-index 11. relative1）relative 定位時，對其他元素不會有影響2）relative定位時，若同時設定：top bottom : 則只有top有效，bottom無效 left right只有left有效，right無效3）posittion: relative; 會提高對應元素的z-index 12. 判斷有無捲軸 13. 捲軸滾動到頁面最底部 14. 捲軸滾動到指定元素位置 15. 元素高寬未知時設定水平和垂直置中 16. 隱藏捲軸在出現捲軸的元素上添加樣式：    原文連結：http://www.cnblogs.com/wx1993/p/5765335.html 本文轉載自分針網