HTML and CSS Reference
In-Depth Information
he
calc()
function supports the following arithmetic operators:
+
(add)
-
(subtract)
/
(divide)
*
(multiply)
mod
(modulo division)
■
Modulo division produces the remainder of a division. for example, the result of
7 mod 2
is
1
. normally,
the operator for modulo division is
%
, but it was decided to use
mod
to avoid confusion with percentages.
Note
To calculate the width available alongside the element in the preceding example, CSS3 allows you to specify
the value like this:
calc(30% - 20px)
he
calc()
function is supported in IE 9+ and Firefox 16+. Chrome 19+ and Safari 6 support it on an
experimental basis with a browser-specific prefix (
-webkit-calc()
).
Percentages
Values specified as percentages use a number immediately followed by the percentage sign (
%
). here must be
no space between the number and
%
. Percentages are always relative to another value, normally the size of the
parent element. Browsers are capable of handling percentages to several decimal places.
Angles
Angles are used only with CSS3 properties, such as
transform
. Table
3-3
lists the accepted units.
Table 3-3.
Angle Units in CSS3
Unit
Meaning
deg
Degrees
grad
Gradians (1/400 of a turn)
rad
Radians
turn
Turns (360 degrees)
As with all other units of measurement, there must be no space between the number and unit.
Browsers convert angles to the range 0-360°. For example
-90deg
is the same as
270deg
.
