|
阅读：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 |
|
最新喜欢： 饼干.
|
公众号
