首页 > 代码库 > css3的calc()属性

css3的calc()属性

2024-09-18 01:00:11   220人阅读

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             footer
19         </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()属性


联系
我们