Home > Web Front-end > HTML Tutorial > calc()_html/css_WEB-ITnose in css3

calc()_html/css_WEB-ITnose in css3

WBOY
Release: 2016-06-24 11:47:59
Original
1229 people have browsed it

1. What is calc()?
Calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values ​​for the border, margin, padding, font-size, and width properties of an element. The biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().
2.What can calc() do?
calc() allows you to calculate the width or height of a div element using percentage, em, px and rem unit values, such as "width:calc(50 % 2em)", so that you don't have to consider the width value of the element div, and leave this annoying task to the browser to calculate.
3.calc() syntax
The calc() syntax is very simple, just like when we learned addition ( ), subtraction (-), multiplication (*), and division (/) when we were young, Use mathematical expressions to represent:

.elm {  width: calc(expression);}
Copy after login
where "expression" is an expression used to calculate the length.
4. Calc() operation rules
calc() uses general mathematical operation rules, but also provides smarter functions:
Use " ", "-", " *" and "/" four arithmetic operations;
You can use percentage, px, em, rem and other units;
You can mix various units for calculation;
When there are " " and "-" in the expression , there must be spaces before and after it. For example, "widht: calc(12% 5em)" is wrong to write without spaces;

When there are "*" and "/" in the expression, there must be spaces before and after There can be no spaces, but it is recommended to leave spaces.

5. Browser compatibility

Browser compatibility with calc() is pretty good, and is well supported in IE9, FF4.0, Chrome19, and Safari6 , it is also necessary to add the identifier of each browser manufacturer in front of it, but unfortunately, the mobile browser does not yet have "firefox for android 14.0" support, and the rest are completely wiped out.
In actual use, you also need to add the browser prefix
 .elm {  /*Firefox*/  -moz-calc(expression);  /*chrome safari*/  -webkit-calc(expression);  /*Standard */  calc(expression); }
Copy after login


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template