search

Home  >  Article  >  Web Front-end  >  Summary of css tips

Summary of css tips

巴扎黑
巴扎黑Original
2017-05-21 10:42:391609browse

This article mainly provides a brief summary of css tips. It has a very good reference value. Friends who need it can take a look together

1. Remove the yellow background that automatically fills in the form after entering the password to remember


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

2. IE8 does not support the opacity:0 attribute. You can add the following attributes: 


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

3. IE input box removes the cross in the text box and the eye icon in the password input box: 


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

4, textarea attribute


resize:none;  //去除大小拖动
outline:none;  //去除黄色边框

5. To determine whether the regular expression is satisfied, you must write it correctly


正则.test(要满足的那个val值)

6 , Single line text is omitted 


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

7. When the font-size in the style sheet is less than 12px, the font display in the Chinese version of Chrome browser is still 12px , you can use: 


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

8. Solve the problem that xmp tags do not wrap automatically: 


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. The solution to the problem that the object height is 0 does not take effect

Add a p in its outer layer, so that the height of this p is 0, or the font-size is 0


<p style="height:0">
   <object object width="0" height="0" ></object>
</p>

10. Input box


消除input的记忆功能：在input框里面加：autocomplete="off"
input里面的内容防止复制：oncopy="return false;" oncut="return false;"
input里面的内容取消粘贴：onpaste="return false"
input里面的内容取消选取、防止复制 :<body onselectstart="return false">

11. Full screen mask Mask code segment (fixed is relative to the window)


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

12. The difference between display: none and visibility:hidden: 


display: none; 不显示，不占据空间 
visibility: hidden; 不显示，占据空间

The above is the detailed content of Summary of css tips. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of display:flex||inline-flex property in CSSNext article：Detailed explanation of display:flex||inline-flex property in CSS

Related articles

See more