CSS tips for using

1, clear floating to our code to bring trouble, presumably do not need to say, we will use a lot of ways to avoid this trouble, which I think the most convenient is the best compatibility is ....//clear float. clearfix{zoom:1;}.  clearfix:after{Display:block; Content‘‘; Clear:both;} 2, vertical horizontal center in the world of CSS in the horizontal center than the vertical center of the simple, after years of evolution, there is still no good way to let elements vertical center (all kinds of ways have advantages and disadvantages, but can not achieve compatibility good, the goal of small damage), Here are a few common ways to achieve absolute positioning and a known wide height position:absolute;top:50%;left:50%;margin-top: -3em;margin-left: -7em;width:14em;height: 6em; absolute positioning + unknown width + translateposition:absolute;left:50%;top:50%;transform:translate (-50%,-50%);//need to supplement browser prefix Flex Easy to handle horizontal vertical center (Unknown wide height) display:flex;align-items:center;justify-content:center;3, add ellipses at the end of text when the content of the text exceeds the width of the container, We want to add ellipses to the default to reach the effect of omitting the display of user content. Fixed width, suitable for single-line display ... overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width is not fixed, suitable for multi-line and mobile display Overflow:hidden; Text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;4, Blur Effect of manufacturing text you can do this when we want to create a vague effect on the text color:transparent;text-shadow:0  0 2px Rgba (0,0,0,.5); 5, the animation to achieve a concise loading effect we come to achieve a very concise loading effect. loading:after{Display:inline-block;  Overflow:hidden;  Vertical-align:bottom;  Content' \2026 '; -webkit-animation:ellipsis 2s infinite;}  Animation part @-webkit-keyframes ellipsis{from{width:2px;  } to{width:15px; }}6, custom text selection style By default, when we select text on the page, we give the selected part a dark blue background color (you can pick up the mouse and try it yourself), if we want to customize the selected part of the style?  Note You can only modify the font color of these two properties by selecting the background color element::selection{color:green; Background-color:pink;}  element::-moz-selection{Color:green; Background-color:pink;} 7, the corner sticker effect Sometimes we will have this demand, in a list display page, some of the list items are newly added, or high heat, it will be asked to add a sticker effect on top of the strip like Hexo default blog fork me on GitHub that effect, such as. Next we begin to complete the leftmost effect Html<div class="Wrap" > <div class="Ribbon" > <a href="#" >fork Me on github</a> </div></div>css/* outer container several settings */.wrap{width:160px; height:160px; overflow: Hidden position:relative; Background-color:#f3f3f3;}. ribbon{Background-color:#a00; Overflow:hidden; White-space:nowrap; Position:absolute; /* Shadom */-webkit-box-shadow:0 0 10px#888; -moz-box-shadow:0 0 10px#888; box-shadow:0 0 10px#888; /* Rotate */-webkit-transform:rotate ( -45DEG); -moz-transform:rotate ( -45DEG); -ms-transform:rotate ( -45DEG); -o-transform:rotate ( -45DEG); Transform:rotate ( -45DEG); /* Position */left: -50px; top:40px;}. Ribbon a{border:1px Solid#faa; Color#fff; Display:block; Font:bold 81.25%' Helvetica Neue ', Helvetica, Arial, Sans-serif; MARGIN:1PX 0; padding:10px 50px; Text-align:center; Text-decoration:none; /* Shadow */text-shadow:0 0 5px#444;} 8. Input placeholder When we set the placeholder property to part of the input type, it is sometimes necessary to modify its default style. input::-webkit-input-placeholder{Color:green; Background-color:#F9F7F7; font-size:14px;} input::-moz-input-placeholder{Color:green; Background-color:#F9F7F7; font-size:14px;} input::-ms-input-placeholder{Color:green; Background-color:#F9F7F7; font-size:14px;} 9, Mobile can click on the element to the default border in the mobile browser, when you click on a link or a clickable element defined by JavaScript, there will be a blue border, to tell the truth, it is very disgusting, how to remove it? Webkit-tap-highlight-color:rgba (255,255,255,0); 10, drop cap to achieve an effect similar to the drop cap in Word, you can use the following code element:first-letter{Float:left; Color:green; font-size:30px;} 11, the small triangle in many places we can use the small triangle, next we draw a four-direction triangle. triangle{/* Base style */Border:solid 10px transparent;} /* under */.triangle.bottom{border-top-color:green;} /* on */.triangle.top{Border-bottom-color:green;} /* left */.triangle.top{Border-right-color:green;} /* Right */.triangle.top{border-left-color:green;} You can see that drawing a small triangle is very simple, as long as two lines of style can be done, for the direction as long as you want to draw which direction is set in the opposite direction of the style properties can be 12, mouse hand type in general, we want to add the following elements of the mouse hand type asubmitinput[type= "iamge"]input[type=< Span class= "hljs-string" > "button"]buttonlabelselecta[href],input[type= ' submit '], Input[type= ' image '],input[type= ' button '], Label[for], select, button {Cursor:pointer;} 13. Block WebKit in Mobile browser when you visit a mobile site, you will notice that there are some gray boxes around the selected element, and use the following code to mask the style-webkit-touch-callout:none;- Webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;  

 移动端兼容性问题1.手机旋转字体会自动调整*{text-size-adjust:none}2.click出现点击区域闪一下a{-webkit-tap-highlight-color:rgba(0,0,0,0)}3.textarea,input默认框内有阴影textarea,input{appearance:none}4.iOS下默认识别页面中的电话<meta name="format-detection" contnent="telephone=no">5.:active兼容处理(1)给body添加ontouchstart(2)document.addEventListener(‘touchstart‘,function(){},false)6.某些圆角实效background-clip:padding-box;7.IE10 Inputy有叉号input:ms-clear{display:none}

* {Margin:0;padding:0;text-decoration:none;-webkit-overflow-scrolling:touch!important;/*ios inertia rolling */outline:none;- webkit-font-smoothing:antialiased;/* font slender */-moz-osx-font-smoothing:grayscale;} Body {position:relative;margin:0 auto;width:100%;height:100%;min-width:900px;overflow-x: hidden;font-family:"Microsoft Jas Black";-webkit-touch-callout:none;/* disables the pop-up menu */-webkit-tap-highlight-color:white;box-sizing:border-box when long pressing the page;} Li {list-style:none;} Ul,ol {list-style-type:none;} Select,input,img,select {vertical-align:middle;} img {border:none;display:inline-block}i {font-style:normal}a {text-decoration:none;-webkit-appearance:none;} *:focus {outline:none;} Input,textarea,button {resize:none;-webkit-appearance:none;outline:none;} input {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} strong {font-weight:bold;} H3,h4 {font-weight:normal}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color:#cecece;} Input:-moz-placeholder,textarea:-moz-placeholder {color:#cecece;} input[Type="Button"],input[Type="Submit"],input[Type="File"],button {cursor:pointer;-webkit-appearance:none;} Table {border-collapse:collapse;border-spacing:0;}. Hover-hand {cursor:pointer;/* hover show hand */}/* forbidden Copy*/.dont-select {-moz-user-select:none;-webkit-user-select:none;- Ms-user-select:none;-khtml-user-select:none;user-select:none;} /*Float*/.left {Float:left;}. Right {Float:right;}. Clearfloat:after {content:"";d Isplay:block;height:0;clear:both;zoom:1;visibility:hidden;}. clearfloat {zoom:1;clear:both;}. clear {clear:both;zoom:1;}. Hide {Display:none!important;}. show {Display:block;} /*font-size*/.font12 {font-size:12px;}. font13 {font-size:13px;}. font14 {font-size:14px;}. font15 {font-size:15px;}. font16 {font-size:16px;}. font18 {font-size:18px;}. font19 {font-size:19px;}. font20 {font-size:20px;}. font22 {font-size:22px;}. Font24 {font-size:24px;}. font26 {font-size:26px;}. font28 {font-size:28px;}. Font30 {font-size:30px;}. Font32 {font-size:32px;}. font36 {font-size:36px;}. font48 {font-size:48px;}. Font60 {font-size:60px;}. color-white {color:white;}. color-red {color:red;}. Color-green {color:green;}. Color-black {color:black;}. cl1685d3 {color:#1685D3;}. bg1685d3 {background:#1685D3;}. Color-blue {color:blue;}. Color-yellow {color:yellow;}. Color-pink {color:pink;}. Bg-yellow {background:yellow;}. bg-red {background:red;}. Border-blue {border:1px solid blue;}. Border-black {border:1px solid black;}. Border-white {border:1px solid white;}. TC {text-align:center;}. TL {text-align:left;}. TR {text-align:right;} /* Line multiple lines display ellipsis */.one-line {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*clip trim text. */}.more-line {display:-webkit-box!important;overflow:hidden;text-overflow:ellipsis;word-break:Break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;} /*flex*/.flex {Display:flex;flex-wrap:nowrap;flex-direction:row;flex-flow:row Nowrap;justify-content:flex-start ;/*flex-start | Flex-end | Center | Space-between | Space-around;*/align-items:flex-start;/*flex-start | Flex-end | Center | Baseline | Stretch;*/align-content:flex-start;/*flex-start | Flex-end | Center | Space-between | Space-around | Stretch;*/align-self:auto;} /* Mobile 1px*/.onepx-border:before {content: ';p osition:absolute;top:0px;left:0px;width:200%;height:200%;border : 1px solid blue;transform-origin:0 0;transform:scale (0.5, 0.5); box-sizing:border-box;border-radius:10px;} /* scroll bar style */::-webkit-scrollbar {width:6px;height:6px}::-webkit-scrollbar-track-piece {background: #eee;}::- webkit-scrollbar-thumb:vertical {background: #666;}   

Second Edition:

* {Margin:0;padding:0;border:0px;-webkit-tap-highlight-color:rgba (0, 0, 0, 0);/* Clear a highlight in element when the mobile tap event occurs */ Text-decoration:none;-webkit-overflow-scrolling:touch!important;/*ios inertial Rolling */outline:none;-webkit-font-smoothing : antialiased;/* font slender */-moz-osx-font-smoothing:grayscale;}  Body {position:relative;margin:0 auto;width:100%;height:100%;min-width:900px;overflow-x: hidden;font-family:"Microsoft Jas Black";-webkit-touch-callout:none;/* disables the pop-up menu when long pressing a page */-webkit-tap-highlight-color:white;box-sizing:border-box;- Webkit-transform:translatez (0);/*css turn on hardware acceleration */-webkit-backface-visibility:hidden;/* use CSS transforms or Animations may have a page flashing bug*/}li {list-style:none;} Ul,ol {list-style-type:none;} Select,input,img,select {vertical-align:middle;} img {border:none;display:inline-block}i {font-style:normal}a {text-decoration:none;-webkit-appearance:none;} *:focus {outline:none;} Input,textarea,button {resize:none;-webkit-appearance:none;/* Removes the default browser style, such as Chrome's input default style */outline:none;} input {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} strong {font-weight:bold;} H3,h4 {font-weight:normal}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color:#cecece;} Input:-moz-placeholder,textarea:-moz-placeholder {color:#cecece;} input[Type="Button"],input[Type="Submit"],input[Type="File"],button {cursor:pointer;-webkit-appearance:none;} Table {border-collapse:collapse;border-spacing:0;}. Hover-hand {cursor:pointer;/* hover show hand */}.use-3d {-webkit-transform:rotatey (60DEG);/* Chrome, Safari, Opera */- webkit-transform-style:preserve-3d;/* Chrome, Safari, Opera */transform:rotatey (60deg); transform-style:preserve-3d ;}. Perspective {/*perspective Perspective: The existence of this attribute determines whether the element you see is 2d or 3d. Typically set on the parent class of the package element. */perspective:400px;} /* Disable Check Copy*/.dont-select {-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;- Khtml-user-select:none;user-select:none;} /*Float*/.left {Float:left;}. Right {Float:right;}. Clearfloat:after {content:"";d Isplay:block;height:0;clear:both;zoom:1;visibility:hidden;}. clearfloat {zoom:1;clear:both;}. clear {clear:both;zoom:1;}. Hide {Display:none!important;}. show {Display:block;} /*font-size*/.font12 {font-size:12px;}. font13 {font-size:13px;}. font14 {font-size:14px;}. font15 {font-size:15px;}. font16 {font-size:16px;}. font18 {font-size:18px;}. font19 {font-size:19px;}. font20 {font-size:20px;}. font22 {font-size:22px;}. Font24 {font-size:24px;}. font26 {font-size:26px;}. font28 {font-size:28px;}. Font30 {font-size:30px;}. Font32 {font-size:32px;}. font36 {font-size:36px;}. font48 {font-size:48px;}. Font60 {font-size:60px;}. color-white {color:white;}. color-red {color:red;}. Color-green {color:green;}. Color-black {color:black;}. cl1685d3 {color:#1685D3;}. bg1685d3 {background:#1685D3;}. Color-blue {color:blue;}. Color-yellow {color:yellow;}. Color-pink {color:pink;}. Bg-yellow {background:yellow;}. bg-red {background:red;}. Border-blue {border:1px solid blue;}. Border-black {border:1px solid black;}. Border-white {border:1px solid white;}. TC {text-align:center;}. TL {text-align:left;}. TR {text-align:right;} /* Line multiple lines display ellipsis */.one-line {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*clip trim text. */}.more-line {display:-webkit-box!important;overflow:hidden;text-overflow:ellipsis;word-break:Break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;}. AUTO-GP {/* line wrap */word-wrap:break-word;word-break:normal;} /*flex*/.flex {Display:flex;flex-wrap:nowrap;flex-direction:row;flex-flow:row Nowrap;justify-content:flex-start ;/*flex-start | Flex-end | Center | Space-between | Space-around;*/align-items:flex-start;/*flex-start | Flex-end | Center | Baseline | Stretch;*/align-content:flex-start;/*flex-start | Flex-end | Center | Space-between | Space-around | Stretch;*/align-self:auto;} /* Mobile 1px*/.onepx-border:before {content:  ";p Osition:absolute;top:0px;left:0px;width: 200%;height:200%;border:1px Solid blue;transform-origin:0 0;transform:scale (0.5, 0.5); box-sizing:border-box; border-radius:10px;} /* scroll bar style */::-webkit-scrollbar {width:6px;height:6px}::-webkit-scrollbar-track-piece {background:  #eee;}::-webkit-scrollbar-thumb:vertical {background:  #666;}   

Mono Link: https://juejin.im/post/59eb0c43f265da4321532f34 Source: Nuggets copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

CSS tips for using