cool calc

New Css3 attributes: calc () and css3 attributes calc I. Preface Calc () Looks like a function in javascript, but in fact it is used in Css and can be used to calculate the length (width or height ), it can automatically adjust the value based on the screen of different sizes, so that the Adaptive Layout can be easily displayed under screens of different sizes. E

-Calc (75%- 20px * 2- 8px * 2); width: Calc (75%- 20px * 2- 8px * 2); }4. Set the right column styleTo the sidebar set a 25% width, in addition to containing 8px of the border, 10px of the inner distance, There is also the main content 20px to remove, or the whole width and the container will be different 20px, in other words will burst the container Fell. So the actual width of the sidebar should be "25%-1

; padding:10px; width:208px; /* Fallback for browsers that Don "t support the Calc () function/ 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); } In this way, you will see the above demo show the layout effect. After this example, you will not feel that usin

container will be different 20px, in other words will burst the container fell. So the actual width of the sidebar should be "25%-10px * 2-8px * 2-20px":#accessory { border:8px solid #B8C172; Float:right; padding:10px; width:208px; /* Fallback for browsers that don't support the Calc () function */ width:-moz-calc (25%-10px * 2-8px * 2-20px); C5/>width:-webkit-

' t support the Calc () function */width: -moz-Calc (75%- 20px * 2- 8px * 2); width: -webkit-Calc (75%- 20px * 2- 8px * 2); width: calc (75%- 20px * 2- 8px * 2); }4. Set the right column styleTo the sidebar set a 25% width, in addition to containing 8px of the border, 10px of the inner distance, there is also the main

-Calc (75%- 20px * 2- 8px * 2); width: calc (75%- 20px * 2- 8px * 2); }4. Set the right column styleTo the sidebar set a 25% width, in addition to containing 8px of the border, 10px of the inner distance, there is also the main content 20px to remove, or the whole width and the container will be different 20px, in other words will burst the container fell. So the actual width of the sidebar should be "25%-1

Calc () and css3calc () in css3 ()1. What is calc ()?Calc is the abbreviation of the English word calculate (calculation). It is a new feature of css3 to specify the length of an element. For example, you can use calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width of an ele

Problem: When making a page, there will always be a 100% width of the elements encountered. If the element width is 100%, as long as the element is added Border,padding,margin any value, will be the element box burst (standard mode, except IE weird mode). Although the box-sizing in the CSS3 attribute solves this problem to some extent, the Calc () function function achieves the above effect more easily.What is cal