Understanding mathematical Expressions in CSS 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

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

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

Application

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

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<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>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<div class= "Parent" style= "Background-color:lightgrey;" > <div class= "left" style= "Background-color:lightblue;" > <p>left</p> </div> <div class= "right" style= "Background-color:lightgreen;" > <p>right</p> <p>right</p> </div></div>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Understanding mathematical Expressions in CSS Calc ()