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

This article mainly introduces the relevant knowledge of how to use calc () in CSS3, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use calc () in CSS3. Let's take a look at it.

What is calc ()?

Calc () literally we can take it as a function function. In fact, calc is the abbreviation of the English word calculate (calculation). It is a new feature of css3 to specify the length of an element. For example, you can use calc () to set dynamic values for the border, margin, pading, font-size, and width attributes of an element. Why is it a dynamic value? Because of the expression we use to get the value. However, the biggest advantage of calc () is that it is used in fluid layout, where the width of the element can be calculated by calc ().

What can calc () do?

Calc () allows you to calculate the element, you can give a div element, using the percentage, em, px and rem unit values to calculate its width or height, such as "width:calc (50%+2em)", so that you do not have to consider the width value of the element DIV, but leave the annoying task to the browser to calculate.

Calc () syntax

The syntax of calc () is very simple, just as we learned to add (+), subtract (-), multiply (*) and divide (/) when we were young, using mathematical expressions to express:

.elm {

Width:calc (expression)

}

Where "expression" is an expression that is used to calculate the length.

Operation rules of calc ()

Calc () uses general mathematical rules, but also provides smarter functionality:

1. Use "+", "-", "*" and "/" operations

2. Percentage, px, em, rem and other units can be used.

3. Various units can be mixed for calculation.

4. When there are "+" and "-" in the expression, there must be spaces before and after them. It is wrong to write "widht:calc (12%+5em)" without spaces.

5. When there are "*" and "/" in the expression, there can be no space before and after it, but it is recommended to leave a space.

Browser compatibility

The compatibility of the browser to calc () is not bad, and it is well supported in IE9+, FF4.0+, Chrome19+, and Safari6+. It is also necessary to add the identifiers of various browser manufacturers in front of them, but unfortunately, mobile browsers do not have only "firefoxforandroid14.0" support, and the rest are wiped out.

When you actually use it, you also need to add the prefix of the browser.

.elm {

/ * Firefox*/

-moz-calc (expression)

/ * chromesafari*/

-webkit-calc (expression)

/ * Standard*/

Calc ()

}

.box {

Background:#f60

Height:50px

Padding:10px

Border:5pxsolidgreen

Width:90%;/* to browsers that do not support calc () * /

Width:-moz-calc (100%-(10px+5px) * 2)

Width:-webkit-calc (100%-(10px+5px) * 2)

Width:calc (100%-(10px+5px) * 2)

}

It is worth noting that there must be a space on each side of the operator in the calc function, otherwise the function will report an error.

This is the end of the article on "how to use calc () in CSS3". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use calc () in CSS3". If you want to learn more, you are welcome to follow the industry information channel.

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.