css3的calc()屬性

標籤：廠商   header   ref   方便   運算   ott   nbsp   logs   保留   

1、calc()是css3的一個新增的功能，用來指定元素的長度，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性動態設定值。

2、calc()文法

1 .element {2   width：calc(expression);  3 }

3、calc()的運演算法則

　　1）、使用 "+"、"-"、"*" 和 "/" 運算

　　2）、可以使用百分比、px、em、rem等單位元運算

　　3）、可以混合使用各種單位進行運算

　　4）、運算式中有 "+" 和 "-" 時，其前後必須有空格。

　　5）、運算式中有 "*" 和 "/" 時，其前後可以沒有空格，但建議保留

4、瀏覽器的相容性

　　在IE9+、FF4.0+、Chrome19+、Safari6+都得到了較好的支援，使用時同樣在其前面加上各瀏覽器廠商的識別符首碼

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

5、應用

　　眾所周知，如果元素的寬度為100%時，其自身不帶其它盒模型屬性設定還好，如果有別的類似margin、padding或border的屬性設定，那將導致盒子被撐破。為瞭解決撐破容器的問題，以前我們只能計算div.box的寬度，用容器的寬度減去padding和border的值 ，但有時候我們苦於不知道元素的總寬度，比如說是調適型配置，只知道一個百分比值，但其它的值又是*px之類的值，這就比較難解決了。隨著css3的出現，其中利用box-sizing來改變元素的盒模型以達到最終想要的效果，但是calc()解決此問題更加方便。

 1     <div class="wrapper"> 2         <div id="header"> 3             <h1>CSS3 calc()</h1> 4         </div> 5         <div id="main"> 6             <h1>test……</h1> 7             <p>test……</p> 8         </div> 9         <div id="accessory">10             <ul>11                 <li><a href="#">test1……</a></li>12                 <li><a href="#">test2……</a></li>13                 <li><a href="#">test3……</a></li>14             </ul>15         </div>16      17         <div id="footer">18             footer19         </div>20     </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);10             width: -webkit-calc(100% - 40px);11             width: calc(100% - 40px);12             margin: auto;13         }14         #header {15             background: #f60;16             padding: 20px;17             width: cal(100% - 20px * 2);18         }19         #main {20             border: 8px solid #B8C172;21             float: left;22             margin-bottom: 20px;23             margin-right: 20px;24             padding: 20px;25             box-sizing:border-box;26             width:75%;27             28             /*29             width: 704px;30             width: -moz-calc(75% - 20px * 2 - 8px * 2);31             width: -webkit-calc(75% - 20px * 2 - 8px * 2);32             width: calc(75% - 20px * 2 - 8px * 2);*/33         }34         #accessory {35             border: 8px solid #B8C172;36             float: right;37             padding: 10px;38             box-sizing:border-box;39             width:calc(25% - 20px);40             41             /*42             width: 208px;43             width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);44             width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);45             width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/46         }47         #footer {48             clear:both;49             background: #000;50             padding: 20px;51             color: #fff;52             width: cal(100% - 20px * 2);53         }54     </style>

 

css3的calc()屬性