Summary of css tips-CSS Tutorial-php.cn

Summary of css tips

巴扎黑

Release： 2017-05-21 10:42:39

Original

1640 people have browsed it

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是背景颜色值

Copy after login

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

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

Copy after login

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;}

Copy after login

4, textarea attribute

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

Copy after login

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

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

Copy after login

6 , Single line text is omitted

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

Copy after login

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;}

Copy after login

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 */
}

Copy after login

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>

Copy after login

10. Input box

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

Copy after login

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;}

Copy after login

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

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

Copy after login

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