阅读:4264回复:0
css3的calc()属性介绍
1、calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。
2、calc()语法 .element { width:calc(expression); } 3、calc()的运算法则 1)、使用 "+"、"-"、"*" 和 "/" 运算 2)、可以使用百分比、px、em、rem等单位运算 3)、可以混合使用各种单位进行运算 4)、表达式中有 "+" 和 "-" 时,其前后必须有空格。 5)、表达式中有 "*" 和 "/" 时,其前后可以没有空格,但建议保留 4、浏览器的兼容性 在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀 .element { -moz-calc(expression); -webkit-calc(expression); -o-calc(expression); -ms-calc(expression); calc(expression); }5、应用 众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。 <div class="wrapper"> <div id="header"> <h1>CSS3 calc()</h1> </div> <div id="main"> <h1>test……</h1> <p>test……</p> </div> <div id="accessory"> <ul> <li><a href="#">test1……</a></li> <li><a href="#">test2……</a></li> <li><a href="#">test3……</a></li> </ul> </div> <div id="footer"> footer </div> </div> <style> body { background:#E8EADD; color: #3C323A; padding: 20px; } .wrapper { width: 1024px; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); margin: auto; } #header { background: #f60; padding: 20px; width: cal(100% - 20px * 2); } #main { border: 8px solid #B8C172; float: left; margin-bottom: 20px; margin-right: 20px; padding: 20px; box-sizing:border-box; width:75%; /* width: 704px; width: -moz-calc(75% - 20px * 2 - 8px * 2); width: -webkit-calc(75% - 20px * 2 - 8px * 2); width: calc(75% - 20px * 2 - 8px * 2); */ } #accessory { border: 8px solid #B8C172; float: right; padding: 10px; box-sizing:border-box; width:calc(25% - 20px); /* width: 208px; width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px); width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px); width: calc(25% - 10px * 2 - 8px * 2 - 20px); */ } #footer { clear:both; background: #000; padding: 20px; color: #fff; width: cal(100% - 20px * 2); } </style> 转自:https://www.cnblogs.com/wangchunlin/p/6782419.html |
|
最新喜欢:饼干.
|