Commonly used CSS knowledge points in front-end work

css import method
inline style
<divstyle="width: 100px"></div>
inline mode
<divclass="header"></div> .header {width: 100px;}
outreach mode
<linkrel="stylesheet"href="./base.css">
Imported
// inside the less/scss file @import url("./base.css");

1.1 Text overflow ellipsis:

Text single line overflow:

overflow: hidden;            // overflow hidden
text-overflow: ellipsis;      // overflow is shown with ellipsis
white-space: nowrap;         // Specifies that text within a paragraph should not wrap

Multiline text overflow:

overflow: hidden;            // overflow hidden
text-overflow: ellipsis;     // overflow is shown with ellipsis
display:-webkit-box;         // Displayed as a flex box model.
-webkit-box-orient:vertical; // Set the arrangement of the sub-elements of the flexible box: vertical arrangement from top to bottom
-webkit-line-clamp:3;        // number of rows displayed

1.2css variables:

CSS variables, also known as CSS custom properties, are composed of custom properties in css --var and function var(), and var() is used to refer to custom properties. When it comes to why variables are used in CSS, the following uses an example to describe.

:root {
 --c-color: orange;
}
.title {
 background-color: var(--c-color);
}

1.3 Gradient:

Gradients are divided into linear gradients and radial gradients. Here, the author directly records the usage method, which is also for more intuitive use. Here, when using linear gradients, using angles and percentages to control gradients will be more flexible.

How to use:

//gradient(direction)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//gradient(angle)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

Border Gradient:

Border has a border-image attribute, similar to background also has a background-image, by setting the gradient color for it, the gradient is achieved, and the number 4 behind it is the offset in the x direction

How to use:

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

1.4 background-size: cover and contain and 100%

contain: The image can only be enlarged to meet the minimum side of the background area. When the aspect ratio of the background area and the background image is inconsistent, the background area may have a blank space under the long side that is not fully covered. cover: The image is enlarged until it can meet the maximum time change. When the aspect ratio of the background area and the background image is inconsistent, the background image will be cropped under the short side, and the display will not be complete.

Percentage: two values ​​can be set

  • The first sets the width, the second sets the height

  • If only one value is set, the second value will be set to auto by default

Example:

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      width: 100%;
      height: 300px;
      background: url('./img/mtk.png');
      /* background-size: contain; */ 
      /* background-size: cover; */
      background-size: 100%;
      background-repeat: no-repeat;
    }
  </style></head><body>
  <div class="bg"></div></body></html>

The results are shown in the following figure in turn:

contain:

cover:

Percentage (100% here):

1.5 css pseudo class triangle:

First look at the example

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-triangle</title>
  <style>
    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
  </style></head><body>
  <div class="triangle">
  </div></body></html>

If you want a lower triangle, you can make the upper border of the border visible, and set the other border colors to transparent

.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

1.6 Media Queries

There must be a meta statement about viewport in the head of the page

<meta name="'viewport'" content=""width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no""/>

It is usually used when doing responsive layouts and large screens, so as to achieve different display effects under different resolutions

/* Display multiple columns after exceeding 1920 resolution */@media screen and (min-width:1920px) {
  .car_box.el-card {
    min-width: 450px !important;
    width: 450px !important;
  }
}

1.7 Several ways to modify the elementui style:

The author's current technology stack is vue, and it is really miserable to modify the style of elementui. Style uses css preprocessors (less, sass, scss) to write as follows

// The first type /deep/
/deep/ .test {
 ***
}

// The second type::v-deep
::v-deep .test{
 ***
}

Sometimes you will encounter modifying all the styles of the table in elementui, so let’s modify them one by one:

① Modify the table header background:

::v-deep .el-table th{
    background: orange;
  }

② Modify the table row background:

::v-deep .el-table tr{
   background: #eee;
  }

③ Modify the background of the zebra crossing table:

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #ccc;
  }

④ Modify the color of the inner line:

::v-deep .el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  2px solid #eee;
  }

⑤ Modify the bottom border color and height of the table:

::v-deep .el-table::before{
   border-bottom:  1px solid #ccc;
    height: 3px
  }

⑥ Modify the header font color:

::v-deep .el-table thead {
    color: #ccc;
    font-weight: 700;
  }

⑦ Modify the font color and font size of the table content:

::v-deep .el-table{
    color: #6B91CE;
    font-size: 14px;
  }

⑧ Modify the background and font color when the table has no data

::v-deep .el-table__empty-block{
    background: #ccc;
  }
::v-deep .el-table__empty-text{
  color: #fff
}

⑨ Modify the table mouse hover background color

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: pink;
}

1.8 Image tiling

object-fit: cover;
object-fit: contain;

1.9 Text wrapping

word-wrap: break-word;

2.0 space before paragraph

white-space: pre-wrap;

2.1 Typesetting text vertically

tb-rl default
vertical-lr vertical direction, from left to right
vertical-rl vertical direction, from right to left

1.7 Modify the default scroll bar

/* scroll bar container */
::-webkit-scrollbar {
    width: 6px;
}
/* rolling groove */
::-webkit-scrollbar-track {
    border-radius: 10px;
}
/* scroll bar slider */
::-webkit-scrollbar-thumb {
    background-color: #dedfe1;
    border-radius: 10px;
    -webkit-transition: all .2s ease-in-out;
    &:hover {
        background-color: #c8c9cc;
        cursor: pointer;
    }
}

2.2 The style is centered horizontally and vertically

  1. text-aling + lin-height

.parent {
    text-align: center;
    height: 20px;
    line-height: 20px;
}
.son {
    display: inline-block;
}
  1. margin + padding

.parent {
    padding-top: 25px;
}
.son {
    display: block;
    margin: 0 auto;
}
  1. postion + transform

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
  1. postion + margin

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
}
  1. flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2.3 font-size less than 12px

font-size: 11px;
-webkit-text-size-adjust: none;

2.4 Quickly generate css tree from html

1. Install CSS Tree
2. Box select html tags
3. Right-click to select Control Panel (ctrl+shift+p)
4. Choose Generate CSS tree
5. Delete redundant code

Tags: Front-end css

Posted by parag on Thu, 19 Jan 2023 00:32:28 +0300