Common front-end CSS tips

-o- : opera-ms: // ie10-moz: // Firefox – webKit: //Safari 4-5, Chrome 1-9

19. Realize text vertical typesetting

The easiest way to type text vertically is to set a smaller width and then adjust the height.

p{
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
}
Copy the code

However, when you want to display multiple columns, setting the width does not achieve the desired effect. In this case, you can use the writing-mode attribute.

p{ height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr; // From left to right writing mode: tB-lr; // from left to right //writing-mode: vertical-rl; -- From right to left //writing-mode: tB-rl; -- From right to left}Copy the code

18. Realize the calculation of light red to dark red color values in proportion

Set RGB, set r value to ff, let g = b, gradient from ff to 0

17. Calc allows us to ignore the element width value and hand it over to the browser to calculate

Using calc to set the width of an element is the best solution for situations where the left width is fixed and the right width is variable. It is well supported in Internet explorer 9+, FireFox4.0+, Chrome19+ and Safari6+

Support “+”, “-“, “*”, “/” (add Spaces before and after operators) support “PX”, “%”, “em”, “REM” and other units (can be mixed)

CSS code: div. left{width: 200px; } div. Right {width: calc(100%-200px); width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); }Copy the code

16. CSS automatically shrinks images to scale and centers them vertically and horizontally without distortion

CSS code: div{position: relative; width: 270px; height: 200px; border: 1px solid#e2e2e2;
}
div img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 270px;
    max-height: 200px;
    width:expression(this.width > 270? "270px": this.width); Height :expression(this.height > 200?"200px" : this.height);
}
Copy the code

15. Multi-line text overflow displays ellipsis

CSS code:.box{width: 100%; overflow: hidden; display: -webkit-box; // Display an object as an elastic flex box model * attributes that must be combined * -webkit-box-orient: vertical; // Set the arrangement of the child elements of the flex box object * attributes that must be combined * -webkit-line-clamp: 3; // To limit the number of lines of text to be displayed within a block elementbreak-all; // Let the browser implement line breaks * in any positionbreak-all to allow line breaks within words *}Copy the code

14. Single-line text overflow displays ellipsis

CSS code: a{overflow: hidden; // beyond hiding display: block; max-width: 116px; text-overflow: ellipsis; // Display ellipsis white-space: nowrap; // Display ellipsis white-space: nowrap; // The text will not wrap on the same line until the <br> tag is encountered. Height: 40px; line-height: 40px; background-color:#f8f8f8;
    padding: 0 10px;
}
Copy the code

Main code: Overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Text – overflow: clip | ellipsis clip: don’t show the ellipsis (…). Ellipsis: Display ellipsis when text content overflows (…)

13. The height of the left and right divs are adaptive equal

You need to set margin and padding as large as possible and you need to set overflow: hidden for the parent element;

HTML code structure: <div class="w c pagecont">
    <div class="l pageleft"></div>
    <div class="l pageright"></div>
</div>
Copy the code

CSS code:.c{overflow: hidden; zoom: 1; } .pageleft, .pageright { padding: 30px; margin-bottom: -10000px; padding-bottom: 10030px; }Copy the code

12. Appearance property, used to remove native control styles.

Example: Remove the small drop-down triangle to the right of the select default style

select{ appearance: none; -moz-appearance: none; //Firefox -webkit-appearance: none; / / Safari and Chrome}Copy the code

11. The CSS implements text alignment at both ends

Div {text-align: justify; text-justify: distribute-all-lines; //ie6-8 text-align-last: justify; // Align the last line of a block or line -moz-text-align-last: justify; -webkit-text-align-last: justify; }Copy the code

10. Common Compatibility problems with Internet Explorer 6

In IE6, a horizontal double margin is displayed after the element is floated. -- Add _display: inline; // 3px bug Floating block elements in the same line have a default 3px spacing. -- Set non-floating elements to float. // Opacity: 0.6; --filter: alpha(opacity = 60);Copy the code

9. Call QQ on PC to realize online chat

Click the icon or text can be directly called QQ to achieve online chat

<a href="http://wpa.qq.com/msgrd?v=3& uin=80080088& site=qq& menu=yes" target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:80080088:51" title="Online Customer service"/></a> //Copy the code

<a href="tencent://message/? uin=80080088& Site=Sambow& Menu=yes"< span style = "box-sizing: border-box; word-wrap: break-word! Important;Copy the code

8. CSS3 Gradient

CSS3 Gradient is divided into linear Gradient and radial Gradient.

HTML code: <div class ="gradient" style = "width: 120px; height: 80px; "></div>
Copy the code

CSS code: background:#e6e6e6; // This statement will be executed when the browser does not support background gradient
background: -o-linear-gradient(top, #fdfdfd, #e6e6e6);
background: -moz-linear-gradient(top, #fdfdfd, #e6e6e6); 
background: -webkit-linear-gradient(top, #fdfdfd, #e6e6e6); // Latest release syntax
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), #e6e6e6); // Old fashioned syntax
Copy the code

Example:

background: -webkit-linear-gradient(left top, #ccc, green, yellow, red); // Linear gradient
background: -webkit-radial-gradient(center, red, blue, #f96, green); // Radial gradient// If no position is set, the distribution will be uniformCopy the code

background: -webkit-linear-gradient(top, #ccc 5%, #F95 30%, red); // Linear gradient
background: -webkit-radial-gradient(center, red 5%, blue 10%, #f96 40%, green 100%); // Radial gradient// Set the locationCopy the code

background: -webkit-repeating-linear-gradient(-45deg, #f96, #f96 3px, green 3px, green 8px); // Linear repeat gradient
background: -webkit-repeating-radial-gradient(red, #f96 2px, green 2px, green 8px); // Radial repeat gradient
Copy the code

The first parameter indicates the direction of the linear gradient. Top is from top to bottom, and left is from left to right. If defined as left top or Angle (-45deg), it is from top left to bottom right. The second argument is the starting color, and the third argument is the ending color. You can insert more parameters between them to indicate a gradient of multiple colors.

IE relies on filters for gradients. StartColorstr indicates the starting color, and endColorstr indicates the ending color. GradientType represents the GradientType, 0 for vertical gradient and 1 for horizontal gradient.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f96, endColorstr=#ccc); //IE9
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f96, endColorstr=#ccc)";   //IE8+
Copy the code

Example (to achieve the effect of black dots when the mouse moves up)

Span {display: block;float: left;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #ccc;
    font-size: 0;
    background: #fff;
    margin: 0 5px;
}
span:hover{
    background: # 676767;
    background: -o-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -moz-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -webkit-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
}
Copy the code

7. CSS3 columns Layout

Div {// Divide the text in the div element into 4 columns -moz-columns: 4; -webkit-columns: 4; columns: 4; // Divide the text in the div element into three columns with 30px space between them -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; // Specify the width, style and colour between columns. -moz-column-rule: 1px outset#fff;
    -webkit-column-rule: 1px outset #fff;
            column-rule: 1px outset #fff;
}
Copy the code

6. Set the form file control to select multiple files when uploading files

<input type='file' multiple='true'> // Set the multiple property totrue
Copy the code

5. The CSS achieves the effect that one line is horizontally centered and multiple lines are aligned on the left

HTML code: <p class='text'><span> One line is horizontally centered and multiple lines are left aligned. </span></p> <p class='text'><span> One line is horizontally centered and multiple lines are left aligned. One line is horizontally centered and multiple lines are aligned to the left. One line is horizontally centered and multiple lines are aligned to the left. </span></p>Copy the code

CSS code:.text {text-align: center; } .text span {display: inline-block; text-align: left; }Copy the code

4. White space will be preserved

CSS code: white-space: pre;Copy the code

3. Modify the cursor color in the input box without changing the font color

input{
    color:  #fff;
    caret-color: red;
}
Copy the code

2. Modify the placeholder default font style in the input box

// webkit-input-placeholder {color: placeholder;#c2c6ce;} //Firefox version 4-18 INPUT :-moz-placeholder {color: placeholder;#c2c6ce;} //Firefox version 19+ INPUT ::-moz-placeholder {color: green;#c2c6ce;} // input:-ms-input-placeholder {color: green;#c2c6ce;
}
Copy the code

1. Remove the colored border around the focus of input button tags in the browser

CSS code: input, textarea, button{outline:none; }Copy the code