What calc () yes?
In short abbreviation is CSS3 in a new function, calculate (calculate) a. For dynamically calculating the width / height, you can use Calc () set to each attribute value of the element [margin, border, padding, font-size, etc.].
calc () syntax
calc syntax is a simple four operations
Use "+", "-", "*" and "/" four operations;
- The percentage may be used, px, em, rem, and other units;
- It can be mixed with various calculation units;
- Expression in the "+" and "-", it must have a space before and after, such as "widht: calc (12% + 5em)" This wording is no space error;
- An expression of "*" and "/", it can be no space before and after, but it is recommended to leave a space.
Browser Compatibility:
browser compatibility calc () is pretty good, in IE9 +, FF4.0 +, Chrome19 + , Safari6 + have been better supported, also need to add each browser vendor identifier in front, but unfortunately, the mobile terminal browser not only "firefox for android 14.0" support.
Calc () use
The main uncertainty is used to calculate values such as outside a distance of 10px, width of 100% of the elements of this case how we set it? If you set
width: 100%;
margin: 10px;
You can see that this box has overflowed, then how to solve it? You can use the calc function
width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;
If small partner useful, give a praise chant! Your support is what I continue to share power, imperial mushroom cool to thank!
