Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "commonly used side door css style which", the content is easy to understand, clear, hope to help you solve the doubt, the following let the editor lead you to study and learn "commonly used side door css style what are" this article.

::-webkit-input-placeholder

Input's H5 placeholder attribute is easy to use, but you can't change the text color directly, so the current solution is to use the:: input-placeholder attribute to change it.

Small Tips: it works better with the opacity attribute.

A practical CSS style with a side door

::-webkit-input-placeholder {/ * Chrome/Opera/Safari * / color: pink;}::-moz-placeholder {/ * Firefox 19 + * / color: pink;}:-ms-input-placeholder {/ * IE 10 + * / color: pink;}:-moz-placeholder {/ * Firefox 18-* / color: pink;}

@ impor nested style sheet file

Use it to nest stylesheet files within the stylesheet again, for example, some components CSS can be used, but this is not recommended because it may be left out when loading.

@ import url ("reset.css"); @ import url ("global.css"); @ import url ("font.css")

The current status line displayed by outline when clicking on the input element (outer glow)

A practical CSS style with a side door

This status line is used to indicate the user's current status, but because the effect is beautiful, it is recommended to remove it or change the style yourself.

Div {outline: none; / / default status line of mobile browser / / outline: 5px dotted red; can also be styled}

Contenteditable sets whether element is editable

Editable

Webkit-playsinline

Mobile video can be played on the page instead of full screen.

Position: absolute, what makes margin effective

Set left:0, right:0 will be fine. The reason is that if both sides are zero, there is no margin, so element can get the distance and center it.

Div {position: absolute; left: 0; right: 0; margin: 0 auto;}

Use clearfix to float clearly to solve the high collapse of the parent class.

.clearfix {zoom: 1;} .clearfix: after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0;}

User-select forbids users to select Chinese text

Div {user-select: none; / * Standard syntax * /}

A highlight that appears after clearing the element after the mobile phone tap event

* {- webkit-tap-highlight-color: rgba (0memo 0pr 0j0);}

::-webkit-scrollbar-thumb

You can change Google's scroll bar style, and so can safari.

-webkit-appearance:none

To apply platform specific styling to an element that doesn't have it by default

To remove platform specific styling to an element that does have it by default

Remove browser default styles, such as chrome's input default style

Input, button, textarea, select {* font-size: 100%;-webkit-appearance:none;}

CSS enables hardware acceleration

-webkit-transform: translateZ (0)

There may be a bug with flashing pages when using CSS transforms or animations

-webkit-backface-visibility: hidden

-webkit-touch-callout forbids long-press links and picture pop-up menus

-webkit-touch-callout: none

Transform-style: preserve-3d allows elements to support 3D

Div {- webkit-transform: rotateY (60deg); / * Chrome, Safari, Opera * /-webkit-transform-style: preserve-3d; / * Chrome, Safari, Opera * / transform: rotateY (60deg); transform-style: preserve-3d;}

Perspective perspective

The existence of this attribute determines whether the element you see is 2d or 3D. It is generally set on the parent class of the package element.

.div-box {perspective: 400px;}

Css implements no line wrapping, automatic line wrapping, and forced line wrapping

/ / No line wrapping white-space:nowrap; / / automatic line wrapping word-wrap: break-word; word-break: normal; / / forced line wrapping word-break:break-all

Box-sizing makes the width and height of the element include border and padding

{box-sizing: border-box;}

Calc function, calculating attribute valu

Div {width: calc (100-100px);}

The above example is to make the width 100% minus the value of 100px, which is very suitable in the project and should be compatible with IE9 or above.

Css3 linear-gradient linear gradient

Start in top by default, or you can customize the orientation.

Div {linear-gradient (red, yellow)} background: linear-gradient (direction, color-stop1, color-stop2,...)

Commonly used selector: nth-child Selector

The following code is to select the first child node under the parent class, p element, it is recommended to learn the use of this style attribute, it is very practical.

P:nth-child (1) {...}

The above is all the contents of the article "what are the common css styles?" Thank you for your reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.