Understanding mathematical Expressions in CSS Calc ()

Previous words

The Mathematical Expression calc () is a function in CSS that is primarily used for mathematical operations. Using Calc () provides a convenient and new way of thinking about the layout of page elements. This article describes the contents of the Calc ()

Defined

The Mathematical Expression calc () is an abbreviation for the Calculate calculation, which allows the use of + 、-、 *,/These four operators, which can be mixed with%, px, EM, REM, and other units for calculation

Compatibility: ie8-, safari5.1-, ios5.1-, android4.3-not supported, android4.4-4.4.4 only supports addition and subtraction. IE9 not supported for Backround-position

[Note that the]+ and-operators must have a blank character on both sides

<style>. Test1{Border:Calc (1px + 1px) solid black;    /*the operations in Calc follow the order of *,/precedence over +,-*/width:Calc (100%/3-2*1em-2*1px);Background-color:Pink;Font-style:Toggle (italic, normal); }. Test2{    /*since the left and right sides of the operator + have no whitespace characters, the invalid*/Border:Calc (1px+1px) solid black;    /*for a property value that cannot be less than 0, when the result of the operation is less than 0 o'clock, press 0 to process*/width:Calc (10px-20px);Padding-left:10px;Background-color:LightBlue;}</style>

<class= "test1"> Test text one </div>    <class= "test2"> Test Text two </Div  >

Application

Mathematical Expressions Calc () is commonly used for numerical operations of different units in layouts

<style>P{margin:0;}. Parent{Overflow:Hidden;Zoom:1;}. Left{float: Left;width:100px;Margin-right:20px;}. Right{float: Left;width:Calc (100%-120px);}</style>

<Divclass= "Parent"style= "Background-color:lightgrey;">    <Divclass= "Left"style= "Background-color:lightblue;">        <P>Left</P>    </Div>    <Divclass= "Right"style= "Background-color:lightgreen;">        <P>Right</P>        <P>Right</P>    </Div></Div>

Understanding mathematical Expressions in CSS Calc ()