26 easy to forget CSS tips

Time:2020-9-12

Collect common but easy to forget CSS implementation methods, if there are omissions or supplements, please correct!

Solve the setting of inline block element overflow:hidden Attribute causes elements in adjacent rows to be offset downward


.wrap {
  display: inline-block;
  overflow: hidden
 vertical-align: bottom
}

Ellipsis is displayed for the parts exceeding the limit

//Single line text
.wrap {
 overflow:hidden;/ *Hidden beyond*/
 text- overflow:ellipsis;/ *Ellipsis is displayed for the parts exceeding the limit*/
 white- space:nowrap;/ *Specifies that the text in a paragraph does not wrap*/
}
//Multiline text
.wrap {
    width: 100%;
    overflow: hidden;
    Display: - WebKit box; // use the object as an elastic expansion box model to display the attributes that * must be combined*
    -WebKit box orientation: vertical; // sets the arrangement of child elements of the expansion box object * the attributes that must be combined*
    -WebKit line clamp: 3; // used to limit the number of lines of text displayed in a block element
    Word break: break all; // enable the browser to wrap lines at any location * break all means to allow line breaks within words*
}

CSS realizes no line break, automatic line feed and forced line feed

//No line breaks
.wrap {
  white-space:nowrap;
}
//Word wrap
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
//Force line feed
.wrap {
  word-break:break-all;
}

CSS to achieve text alignment

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    Text align last: justify; // the last line alignment of a block or row
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

Vertical typesetting of text

//Single column display
.wrap {
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
    Word wrap: break word; / * you need to add this sentence when you are in English*/  
}
//Multi column display
.wrap {
    height: 210px;
    line-height: 30px;
    text-align: justify;
    Writing mode: vertical LR; // left to right    
    Writing mode: TB LR; // ie from left to right
    //Writing mode: vertical RL; -- right to left
    //Writing mode: TB RL; -- right to left
}

Disable element mouse events

.wrap {
    //If you press tab to select the element, such as button, and then press enter, you can still execute the corresponding event, such as click.
 pointer-events: none;
    cursor: default;
}

Disable user selection


.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Cursor property

.wrap {
  Cursor: pointer; // little finger;
  Cursor: help; // arrow with question mark;
  Cursor: wait; // turn around;
  Cursor: move; // move the cursor;
  Cursor: crosshair; // crosshair
}

Using hardware acceleration


.wrap {
    transform: translateZ(0);
}

Image width adaptation


img {max-width: 100%}

Text transform and font variant

P {text transform: uppercase} // makes all letters uppercase
P {text transform: lowercase} // makes all letters lowercase
P {text transform: capitalize} // initial case
P {font variant: small caps} // changes the font to small capital letters

Make a container transparent


.wrap { 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5; 
}

Remove the transition screen


.wrap {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

Custom scroll bar

overflow-y: scroll;
Entire scroll bar
::-webkit-scrollbar {
    width: 5px;
}

Track of scroll bar
::-webkit-scrollbar-track {
    background-color: #ffa336;
    border-radius: 5px;
}

Scroll bar slider
::-webkit-scrollbar-thumb {
    background-color: #ffc076;
    border-radius: 5px;
}

Let HTML recognize ‘\ n’ in string and wrap


body {
   white-space: pre-line;
}

Implement a triangle


.wrap { 
  border-color: transparent transparent green transparent; 
  border-style: solid; 
  border-width: 0px 300px 300px 300px; 
  height: 0px; 
  width: 0px; 
}

Remove the border linked by the point


a {outline: none}
a {outline: 0}

Use CSS to display the URL after the link


a:after{content:" (" attr(href) ") ";}

The selected content is displayed in the center, and the drop-down content is aligned to the right


select{
    text-align: center;
    text-align-last: center;
}
select option {
    direction: rtl;
}

Modifying the color of the cursor in the input box does not change the color of the font


input{
    color:  #fff;
    caret-color: red;
}

Modify the default font style of the holder in the input box

//The browser of WebKit kernel 
input::-webkit-input-placeholder {
    color: #c2c6ce;
}
//Firefox version 4-18 
input:-moz-placeholder {
    color: #c2c6ce;
}
//Firefox version 19+
input::-moz-placeholder {
    color: #c2c6ce;
}
//IE browser
input:-ms-input-placeholder {
    color: #c2c6ce;
}

Child element fixed width parent element width is stretched

//The child element under the parent element is an in line element
.wrap {
  white-space: nowrap;
}
//If the child element under the parent element is a block level element
.wrap {
  White space: nowrap; // child elements are not wrapped
  display: inline-block;
}

Center the picture and text in div at the same time

.wrap {
  height: 100,
  line-height: 100
}
img {
  vertival-align:middle
}
//The vertical align attribute of vertical align CSS is used to specify the vertical alignment of inline or table cell elements. It is only valid for in row elements and table cell elements, and cannot be used to align block level elements vertically
// vertical-align:baseline/top/middle/bottom/sub/text-top;

Realization of width height ratio adaptive rectangle

.scale {
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            position: relative; 
        }

        .item {
            position: absolute; 
            width: 100%;
            height: 100%;
            background-color: 499e56;
        }    
   <div class="scale">
        <div class="item">
            Here is the container for all the child elements
        </div>
    </div>

The rotate property of transfrom is invalid under the span tag


span {
  display: inline-block
}

Border font same color

.wrap {
  width: 200px;
  height: 200px;
  color: #000;
  font-size: 30px;
  border: 50px solid currentColor;
  //Border: 50px solid; // implementation 2
 }

last

Here is the original text: GitHub, if there is any omission, please correct it!!

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.