CSS calc() の数式に関する詳細な理解

<スタイル>
.test1{
    border: calc( 1px + 1px ) 黒一色;
    /* calc の演算は * と / の順序に従い、+ と - よりも優先されます*/
    幅: calc(100%/3 - 2*1em - 2*1px);
    背景色: ピンク;
    フォントスタイル: 切り替え(斜体、通常); 
}
.test2{
    /* + 演算子の左側と右側にスペースがないので無効です */
    border: calc(1px+1px) 黒一色;
    /* 0未満にならない属性値については、計算結果が0未満になった場合は0として扱います*/
    幅: calc(10px - 20px);
    左パディング: 10px;
    背景色: 水色;
}
</スタイル>
<div class="test1">テストテキスト 1</div>    
<div class="test2">テストテキスト 2</div>

<スタイル>
p{マージン: 0;}
.parent{オーバーフロー: 非表示;ズーム: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
</スタイル>
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>左</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>正しい</p>
        <p>正しい</p>
    </div>
</div>