css小技巧,會不斷更新的

來源:互聯網
上載者:User

標籤:全屏   單行   運算式   程式碼片段   color   內容   strong   chrome   ret   

1、去除input記住密碼後自動填滿表單的黃色背景

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset;  }
//其中#fff是背景顏色值

2、IE8不支援opacity:0屬性,可以加上下面屬性:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

3、IE input 框去掉文字框的叉叉和密碼輸入框的眼睛表徵圖:

::-ms-clear,::-ms-reveal{display:none;}

4、textarea屬性

resize:none;  //去除大小拖動outline:none;  //去除黃色邊框

5、判斷是否滿足Regex要正確書寫方式

正則.test(要滿足的那個val值)

6、單行文本省略

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

7、當樣式表裡font-size 小於 12px時,中文版chrome瀏覽器裡字型顯示仍為12px,這時可以用:

html{-webkit-text-size-adjust:none;}

8、解決xmp標籤不自動換行:

xmp {         whitewhite-space: pre-wrap; /* css-3 */    whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */    whitewhite-space: -pre-wrap; /* Opera 4-6 */    whitewhite-space: -o-pre-wrap; /* Opera 7 */    word-wrap: break-word; /* Internet Explorer 5.5+ */    white-space: pre-wrap; /* Firefox */}

9、object高度為0不生效的解決方案

在其外層添加一個div,讓這個div的高度為0,或者font-size為0<div style="height:0">   <object object width="0" height="0" ></object></div>

10、input框

消除input的記憶功能:在input框裡面加:autocomplete="off"input裡面的內容防止複製:oncopy="return false;" oncut="return false;"input裡面的內容取消粘貼:onpaste="return false"input裡面的內容取消選取、防止複製 :<body onselectstart="return false">

11、全屏遮罩程式碼片段(fixed是相對視窗)

 <div class="mask"></div> .mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}

12、display: none與visibility:hidden的區別:

display: none; 不顯示,不佔據空間
visibility: hidden; 不顯示,佔據空間

 

css小技巧,會不斷更新的

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.