1.解释:calc() 是一个css 函数,他可以计算一个元素的宽度高度值,功能主要用于计算。
2.使用方法:
calc(expression),expression 是可以用 + - * /符号进行计算的
如:calc(100% - 80px); 注: 100 、80 与符号之间需要空格
举个例子:
html:
<div class="main">
<div class="box"></div>
</div>
css:
.main{
width:500px;
background:#ccc;
}
.box{
height:200px;
background:#f60
}
css 新增:
.main{
width:500px;
padding:5px;
background:#ccc;
}
.box{
height:200px;
width:100%;
background:#f60;
padding:10px;
border:5px solid #f40;
}
3.为了解决里面盒子 超出父类盒子的问题,我们使用calc 函数
.main{
width:500px;
padding:5px;
background:#ccc;
}
.box{
height:200px;
background:#f60;
padding:10px;
border:5px solid #f40;
width:90%;//是考虑到不兼容calc 的浏览器处理方式根据项目自己定义
width:calc(100% - 30px);
width:-webkit-calc(100% - 30px);
}
解析一下:calc(100% - 30px), 子类盒子有 5px 的 border 两边加一起就是10px;pading:10px; 两边加一起就是20px,
可以换成这样:calc(100% - (5px + 10px) * 2);