Home > Article > Web Front-end > Summary of css tips
Summary of css tips
- 巴扎黑Original
- 2017-05-21 10:42:391604browse
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!