【解疑答惑】css中經常被忽略的程式碼陷阱
css大家都認為是很簡單東西,但是是程式碼就有讓人頭疼的時候,只是多少的問題,伴著小編走過的路,在前端多少也滾了一些坑,今天為了方便後來者,把收集到的東西跟大家分享一下,有需要的朋友可以當作參考,希望對各位盟友有幫助:
一. css 2.x code
1. 文字換行
/*強制不換行*/
white-space:nowrap;
/*自動換行*/
word-wrap: break-word;
word-break: normal;
/*強制英文單詞斷行*/
word-break:break-all;
2. 兩端對齊
text-align:justify;text-justify:inter-ideogra
3. 去掉Webkit(chrome)瀏覽器中input(文字框)或textarea的黃色焦點框
input,button,select,textarea{
outline:none;}
textarea{
font-size:13px; resize:none;}
去掉chrome記住密碼後自動填充表單的黃色背景
4. ie6:
position:fixed
.fixed-top
/* position fixed Top */
{
position:fixed;
bottom:auto;top:0;
}* html
.fixed-top
/* IE6 position fixed Top */
{
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));
}
*html{
background-1image:url(about:blank);
background-attachment:fixed;}
5. clearfix
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix{ display:inline-block; } html[xmlns] .clearfix{display:block;} * html .clearfix{height:1%;} .clearfix{*zoom: 1;} .clearfix:after{clear:both;display:table;content:"”;} .clearfix{overflow:hidden;_zoom:1;}
6. seperate-table
.tab{border-collapse:separate;border:1px solid #e0e0e0;}.tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;}.tab th{background:#edf4f0;}.tab tr.even td{background:#fff;}
7. min-height: 最小高度相容程式碼
.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}
8. 滑鼠不允許點選:
cursor:not-allowed;
9. mac font: osx平臺字型優化
font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微軟雅黑';
10. 省略號:
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
二. css 3 code
1. 漸變:
.a{background:-webkit-gradient(linear,left top,left bottom,from(#69bdf9),to(#4aa7e8));background:-moz-linear-gradient(top,#67bcf8,#3b96d6);background:-o-linear-gradient(top,#67bcf8,#3b96d6);background:linear-gradient(top,#67bcf8,#3b96d6);}
2.投影:
.b{box-shadow:inset 1px -1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;}filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6);
background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')9;
看哪個startColorstr和endColorstr,一共8位,後6位是RGB的顏色程式碼,前兩位是16進位制的
比如60%透明,就是256x0.6=154,再換算成16進位制=9A background-image:-ms-linear-gradient(top, #fff, #ddd); ie10漸變 http://www.iefans.net/ie10-yulanban-css3-jianbian/
alpha透明相容程式碼生成:
http://leegorous.net/tools/bg-alpha.html
透明相容
3. search佔位
::-webkit-input-placeholder {}::-moz-input-placeholder {}input:focus::-webkit-input-placeholder { color: transparent; }-webkit-appearance:none; google邊框去除
input[type="search"]{-webkit-appearance:textfield;} // 去除chrome預設樣式
http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/
http://blog.csdn.net/do_it__/article/details/6789699
line-height: normal; /* for non-ie */line-height: 22px9; /* for ie */
4. 漸變
background: #bde25e;
/* Old browsers */
background: -moz-linear-gradient(top, #bde25e 2%, #8bb31d 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#bde25e), color-stop(100%,#8bb31d));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bde25e 2%,#8bb31d 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bde25e 2%,#8bb31d 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bde25e 2%,#8bb31d 100%);
/* IE10+ */
background: linear-gradient(to bottom, #bde25e 2%,#8bb31d 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bde25e', endColorstr='#8bb31d',GradientType=0 );
/* IE6-9 */
@media screen and (max-width:1220px) and (min-width:1151px) {
#wrapper {font-size:15px;}}
5.阻止預設事件
pointer-events:none;
以上是小編整理的部分常用的css程式碼,篇幅所限,後續會陸續更新感謝盟友的閱讀;