CSS技巧和經驗列表
阿新 • • 發佈:2017-06-22
bsp 隱藏元素 psi nowrap abs 選擇 css logs for
如何清除圖片下方出現幾像素的空白間隙?
img{display:block;}
如何讓文本垂直對齊文本輸入框?
input{vertical-align:middle;}
如何使文本溢出邊界顯示為省略號?
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
如何容器透明,內容不透明?
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
如何區別display:none與visibility:hidden?
相同的是display:none與visibility:hidden都可以用來隱藏某個元素; 不同的是display:none在隱藏元素的時候,將其占位空間也去掉;而visibility:hidden只是隱藏了內容而已,其占位空間仍然保留。
如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時,li之間產生的空白間隙的BUG?
li{vertical-align:top;}
如何解決按鈕在IE7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題?
input,button{overflow:visible;}
如何解決Chrome在應用transition時頁面閃動的問題?
-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
如何在IE6及更早瀏覽器中定義小高度的容器?
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
為什麽Standard mode下IE無法設置滾動條的顏色?
html{ scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd; }
將原來設置在body上的滾動條顏色樣式定義到html標簽選擇符上即可
如何讓已知高度的容器在頁面中水平垂直居中?
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}
如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中?
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
如何使頁面文本行距始終保持為n倍字體大小的基調?
body{line-height:n;}
CSS技巧和經驗列表