Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the calc () function in CSS, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

The calc () function of CSS3 allows us to perform mathematical operations on attribute values. For example, we can use calc () to specify that the fixed pixel value of an element width is the sum of multiple numeric values.

.foo {

Width: calc (100px + 50px)

}

Why calc ()

If you have used a CSS preprocessor, such as SASS, you may have encountered the above example

.foo {

Width: 100px + 50px

}

$width-one: 100px

$width-two: 50px

.bar {

Width: $width-one + $width-two

}

However, the calc () function provides a better solution. First of all, we can combine different units. In particular, we can mix absolute units (such as percentages and viewport units) with relative units (such as pixels). For example, we can create an expression that subtracts a pixel value by a percentage.

.foo {

Width: calc (100%-50px)

}

In this case, the. foo element is always less than its parent element width 50px.

Second, with calc (), the calculated value is the expression itself, not the result of the expression. When using the CSS preprocessor to do mathematical operations, the given value is the result of the expression.

.foo {

Width: 100px + 50px

}

.foo {

Width: 150px

}

However, the value of calc () parsed by the browser is the real calc () expression.

.foo {

Width: calc (100%-50px)

}

.foo {

Width: calc (100%-50px)

}

This means that the values in the browser can be more flexible and responsive to changes in viewports. We can set a height for the element to the height of the viewport minus an absolute value, which will be adjusted as the viewport changes.

Use calc ()

The calc () function can be used to perform four operations on numeric attributes. For example, or a data type.

Here are some examples:

.foo {

Width: calc (50vmax + 3rem)

Padding: calc (1vw + 1em)

Transform: rotate (calc (1turn + 28deg))

Background: hsl, calc (3 * 20), 40%)

Font-size: calc (50vw / 3)

}

Clac () nesting

The calc () function can be nested. Inside the function, it is treated as a simple parenthetical expression, as shown in the following example.

.foo {

Width: calc (100% / calc (100px * 2))

}

The calculated value of the function is as follows:

.foo {

Width: calc / (100px * 2)

}

Downgrade scheme

Clac () has been widely supported.

For browsers that do not support calc (), the entire attribute value expression is ignored. However, we can use a fixed value as a downgrade scheme for browsers that do not support calc ().

.foo {

Width: 90%

Width: calc (100%-50px)

}

What scenarios can use calc ()

Example 1-Center element

Using calc () provides us with another solution for vertically centered elements. If we know the size of the element, a typical solution is to use a negative outer margin to move half of the height and width of the distance, as follows:

.foo {

Position: absolute

Top: 50%

Left: 50%

Marging-top:-150px

Margin-left:-150px

}

Using the calc () function, we can achieve the same effect simply through the top and left properties:

.foo {

Position: absolute

Top: calc (50%-150px)

Left: calc (50%-150px)

}

With the intervention of Flexbox, this approach is rarely needed. However, in some cases Flexbox cannot be used. For example, elements require absolute or fixed positioning, which is useful.

Example 2-create root grid siz

You can use the rem,calc () function to create a viewport-based grid. We can set the font size of the root element to be part of the width of the viewport.

Html {

Font-size: calc (100vw / 30)

}

Now, the 1rem is 1 stroke 30 of the width of the viewport. Any text on the page will be automatically scaled according to your viewport. Further, viewports of the same scale always display the same amount of text, regardless of the true size of the viewports.

If we use rem to set the size for non-text, they also follow this behavior. The element of a 1rem width is always 1 inch 30 of the width of the viewport element.

Example 3-clarity

Finally, calc () makes the calculation clearer. If you make a set of items 1x6 of the width of their parent element container, you might write:

.foo {

Width: 16.666666667

}

However, it can be clearer and readable:

.foo {

Width: calc (100 / 6)

}

With calc (), we can do more things, such as creating a grid system. It is one of the most useful new features of CSS

Thank you for reading this article carefully. I hope the article "how to use the calc () function in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.