Calc () Property for CSS3

1. Calc () is a new feature of CSS3 that specifies the length of the element, and you can use Calc () to dynamically set values for attributes such as border, margin, pading, font-size, and width of the element.

2. Calc () syntax

1 . Element {2  width:calc (expression);   3 }

3. Calc () algorithm

1), using "+", "-", "*" and "/" operations

2), can use the percentage, px, EM, REM and other unit operations

3), can be mixed with a variety of units for the operation

4), when there are "+" and "-" in the expression, there must be a space before and after it.

5), the expression has "*" and "/", there can be no space before and after, but it is recommended to retain

4. Browser compatibility

In ie9+, ff4.0+, chrome19+, safari6+ have been better supported, using the same as in front of each browser manufacturer's identifier prefix

1 . Element {2  -moz-calc (expression); 3 4-o-calc  (expression);     5   -ms-calc (expression); 6   calc (expression);       7 }

5. Application

It is well known that if an element has a width of 100%, it does not have its own box model property set, and if there is another property setting similar to margin, padding or border, it will cause the box to burst. In order to solve the problem of bursting the container, we can only calculate the width of the div.box, the width of the container minus the value of padding and border, but sometimes we do not know the total width of the element, such as adaptive layout, only know a percentage value, but the other values are *px and other values, This is more difficult to solve. With the advent of CSS3, which uses box-sizing to change the box model of the element to achieve the desired effect, Calc () solves the problem more conveniently.

1     <Divclass= "wrapper">2         <DivID= "header">3             <H1>CSS3 Calc ()</H1>4         </Div>5         <DivID= "Main">6             <H1>Test ...</H1>7             <P>Test ...</P>8         </Div>9         <DivID= "Accessory">Ten             <ul> One                 <Li><ahref="#">Test1 ...</a></Li> A                 <Li><ahref="#">Test2 ...</a></Li> -                 <Li><ahref="#">Test3 ...</a></Li> -             </ul> the         </Div> -       -         <DivID= "Footer"> - Footer +         </Div> -     </Div>

1     <style>2 Body{3 background:#E8EADD;4 Color:#3C323A;5 padding:20px;6         }7 . Wrapper{8 width:1024px; 9 width:-moz-calc (100%-40px);Ten width:-webkit-calc (100%-40px); One width:Calc (100%-40px); A margin:Auto; -         } - #header{ the background:#f60; - padding:20px; - width:cal (100%-20px * 2); -         } + #main{ - Border:8px Solid #B8C172; + float: Left; A Margin-bottom:20px; at Margin-right:20px; - padding:20px; - box-sizing:Border-box; - width:75%; -              -             /* in width:704px; - width:-moz-calc (75%-20px * 2-8px * 2); to width:-webkit-calc (75%-20px * 2-8px * 2); + Width:calc (75%-20px * 2-8px * 2);*/ -         } the #accessory{ * Border:8px Solid #B8C172; $ float: Right;Panax Notoginseng padding:10px; - box-sizing:Border-box; the width:Calc (25%-20px); +              A             /* the width:208px; + width:-moz-calc (25%-10px * 2-8px * 2-20px); - width:-webkit-calc (25%-10px * 2-8px * 2-20px); $ Width:calc (25%-10px * 2-8px * 2-20px);*/ $         } - #footer{ - Clear:both; the background:#000; - padding:20px;Wuyi Color:#fff; the width:cal (100%-20px * 2); -         } Wu     </style>

Calc () Property for CSS3