CSS3 Instance Tutorial: Exploring Cal () features

Article Introduction: There are many hidden modules and functions in the CSS3. Here we will explore the CAL () feature, which may change the way you previously designed the layout.

CSS3There are a lot of hidden modules and functions. Here we will explorecal ()function; This function may change the way you used to design the layout, the gray-often tough~~

CSS3of thecal ()function is used to calculate the length (lengths), number (numbers), angle (angles), Transition (transition)/Animation Time (Animation times) or sound frequency (sound frequencies). It will allow you to use a hybrid calculation type-CSS3is also an unusually powerful concept.

Suppose a website is designed to contain2a floating element that you want to use a60pxthe horizontal line divides it into2an element of the same width, it sounds easy? If the page is designed to be960px, then it's easy, and every one of them is450px.

But what if the change element is a floating box or a dynamic layout? If the page is designed to be600px, most designers will set the horizontal line to10%, the rest of the45%, in the widescreen or square screen of the browsing window will be distorted or have margin!

Fortunately, the new featurescal ()feature allowsWomenCalculate the width. In the example above, we can set it to the total width of the50%-30px, such as:

#element1, #element2 {float:left width:calc (50%-30px);} #element2 {margin-left:60px;}

If you want to make the horizontal line size is relative to the font of the large child, such as4em, no problem:

#element1, #element2 {width:calc (50%-2EM);}

Or you want to put one around the element2pxof theBorder, there is no problem:

#element1, #element2 {width:calc (50%-2em-4px); border:2px solid #000;}

The author suggests that as far as possible, the calculation is simple, but the complex calculation can be achieved, for example:

#element1, #element2 {width:calc (50% + 2em)/2 + 14px);}

browser support for this element:

Cla () function is The Consortium recommended features, so you'll guess which browser will always support it? Maybe your guess is wrong. When the author wrote this article, only IE9 Support, Firefox also supported (requires its unique prefix): -moz-cla () . Webkit The kernel's browser is not currently supported, such as Chrome and Safari ) or is Opera , the function is very useful, I believe that in a very long time these browsers will support. Luckily you can be in your style sheet ( CSS ) using the enhanced style:Element1, #element2 {width:45%;/* All browsers/width:-moz-calc (50%-30px); * Firefox 4+/Width:calc (50%-30px ); /* ie9+ and future browsers/} Please remember that you need to add the appropriate adjustments (to face different browsers). #element2 {margin-left:10%/* all browsers * * Margin-left:-moz-calc (60px);/* Firefox 4+/Margin-left:calc (60px); * ie9+ and future Browsers/} CSS3 min () and Max () if you like Cal () element, you may also refine min () and Max () features that they can explain 2 one or 2 more than one element value separated by commas and can return the maximum or minimum value. #myelement {Width:max (300px, 30%, 30em); Font-size:min (10px, 0.6em); this feature prevents Font It's very useful when it's too big or very small, but unfortunately more modern browsers don't support min () and Max () function, we can only silently look forward to browser support bar ~~