1, the preface

Document some handy CSS properties

1, calc ()

The calc() function is used to dynamically calculate the length value. Any length value can be evaluated using the calc() function. Note that a space must be left before and after the operator, for example:

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

compatibility

2, min ()

The min() function allows you to select a minimum value from a comma-delimited expression as a CSS property value, for example:

.box{
	width: min(1vw.4em.80px)}Copy the code

In the example above, the width is at most 80px. If the viewport is less than 800px wide, or an EM is less than 20px wide, it will be even narrower. In other words, the maximum width is 80px.

When min() is used to control the text size, make sure the text is large enough to read. It is recommended to embed the min() method in Max ()

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

This is used to ensure a minimum of 1rem so that the text is scaled as the page is scaled

compatibility

3, the Max ()

The Max () function lets you select the largest (positive) value for the attribute from a comma-separated list of expressions

.box{
	width: max(10vw.4em.80px)}Copy the code

In the example above, the width will be at least 80px unless the view is larger than 800px or an EM is wider than 20px. In simple terms, the minimum width is 80px. You can also consider the value of Max () to provide the smallest possible value for an attribute.

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

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

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

compatibility

4, clamp ()

Clamp () functions clamp a value between an upper and lower limit, and when the value exceeds the minimum and maximum range, select a value between the minimum and maximum value to use. It takes three parameters: the minimum, the preferred value, maximum clamp (MIN, VAL, MAX), when the preferred value than the minimum hours, use the minimum, when the preferred value between the minimum and maximum values, use the preferred value, when the first value is bigger than the maximum value, use the maximum value, the expression of each value can use different units.

.box{
	width: clamp(200px.50vw.600px)}Copy the code

compatibility

5, gap

The gap property is used to set the gap between Grid rows and columns. This property is short for row-gap and column-gap and applies to Flex, Grid, and multi-column layout elements

#flex {
  width: 300px;
  display: flex;
  gap: 20px 5px;
}
#grid {
  height: 200px;
  display: grid;
  grid-template: repeat(3.1fr) / repeat(3.1fr);
  gap: 20px 5px;
}
Copy the code

compatibility

6, writing – mode

The writing-mode attribute defines how text is laid out horizontally or vertically. The syntax is as follows:

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
Copy the code

Horizontal-tb: Horizontal top-down writing. The left – right – top to bottom

Vertical-rl: indicates that the vertical direction is written from right to left. The top – bottom – right – left

Vertical-lr: the contents are from top to bottom in the vertical direction and from left to right in the horizontal direction

Sideways -rl: Content is vertically arranged from top to bottom

Sideways -lr: Content is arranged vertically from bottom to top

compatibility

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Use NVM to manage node.js version and change NPM Taobao image source
  • Enumerative JS practical and powerful operator & operator
  • Wechat small program to achieve search keyword highlighting
  • Env files are used in vUE to store global environment variables and configure vUE startup and package commands
  • The use of try and catch in javaScript and breaking out of forEach loops

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets