Learn these CSS skills to make your writing style more silky

Time:2022-5-6

1. Preface


Record some useful CSS attributes

1,calc()


The calc() function is used to dynamically calculate the length value. Any length value can be calculated using the calc() function. It should be noted that a space should be reserved before and after the operator, for example:

.box{
    width: calc(100% - 10px)
    height: calc(100% - 2rem)
}

compatibility

[image upload failed… (image-7ebe0-1626054339984)]

2,min()


The min() function allows you to select a minimum value from the comma separator expression as the attribute value of CSS, for example:

.box{
    width: min(1vw, 4em, 80px)
}

In the above example, the width is up to 80px. If the width of the viewport is less than 800px, or if the width of an EM is less than 20px, it will be narrower. In other words, the maximum width is 80px.

When min () is used to control the text size, ensure that the text is large enough for easy reading. It is suggested to embed the min () method into max ()

p{
    font-size: max(min(0.5vw, 0.5em), 1rem)
}

This is used to ensure that the minimum value is 1rem, so that the text will be scaled when the page is scaled

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

3,max()


The max() function allows you to select the maximum (positive direction) value as the value of the attribute from a comma separated list of expressions

.box{
    width: max(10vw, 4em, 80px)
}

In the above example, the minimum width will be 80px, unless the view width is greater than 800px or an EM is wider than 20px. In simple terms, the minimum width is p80x. You can also think that the value of max () provides the smallest possible value of an attribute.

When max() is used to control the size of the text, make sure the text is always large enough to be read. One suggestion is to use a function nested in max () with min (). The second value of the function is a relative length unit, which is always large enough to read

p{
    font-size: max(min(0.5vw, 0.5em), 1rem)
}

This ensures a minimum size of 1rem, and if the page is scaled, the text size is scaled

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

4,clamp()


The clamp () function is used to limit a value between an upper limit and a lower limit. When the value exceeds the range of the minimum value and the maximum value, select a value between the minimum value and the maximum value. It receives three parameters: minimum value, preferred value and maximum value clamp (min, Val, max). When the preferred value is smaller than the minimum value, the minimum value is used. When the preferred value is between the minimum value and the maximum value, the preferred value is used. When the preferred value is larger than the maximum value, the maximum value is used. Each value in the expression can use different units.

.box{
    width: clamp(200px, 50vw, 600px)
}

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

5,gap


Gap attribute is used to set the gap between grid rows and columns. This attribute is a short form of row gap and column gap, which is applicable to elements of flex, grid and multi column layouts

#flex {
  width: 300px;
  display: flex;
  gap: 20px 5px;
}
#grid {
  height: 200px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

6,writing-mode


The writing mode attribute defines how the text is arranged horizontally or vertically.
The syntax format is as follows:

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Horizontal TB: horizontal writing from top to bottom. Left right top bottom

Vertical RL: vertical writing from right to left. Top bottom right left

Vertical LR: the content in the vertical direction is from top to bottom, and the horizontal direction is from left to right

Sideways RL: the content is arranged vertically from top to bottom

Sideways LR: the content is arranged vertically from bottom to top

compatibility

Learn these CSS skills to make your writing style more silky

compatibility

If it helps, I [email protected]Pengduoduo 11997110103, welcome to like and pay attention to comments;
END

Previous articles

Personal homepage