What are the common css styles of side doors?
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!
