你真的会用calc()属性吗？

可能很多人还不清楚这个属性？？？

what???

那你可就吃亏了......

CSS3中的**calc( )**属性，也叫可以计算的属性

说到计算，自然而然就想到了 + - * /，没错，calc()就具备这个功能

相信很多人都遇到过这个问题：

在写一个这样布局的页面时，知道头部的高度，假设为100px,但是侧边栏的高度我不知道该如何设置才能让他刚好为浏览器高度-头部的高度，这个时候我们用calc()就很方便啦。（欢迎大家各抒己见）

height:calc(100vh - 100px);
复制代码

注意：-的左右侧都有一个空格，若没有，则没有办法实现，+ * /亦是这样
复制代码

不仅如此，相信大家写过很多遍让一个盒子垂直居中的方法，但是用到cala()的我觉得还是少数（我觉得，勿喷）

那下面我就列出来我所知道的让盒子垂直居中的方法：

盒子没有固定的宽和高

• 用translate

.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #aaa;
padding: 60px;
}
<div class="box"></div>
复制代码

• 用flex布局（知道父亲的宽高，不知子元素的宽高，让子元素实现垂直居中）

.box{
width: 300px;
height: 200px;
background: pink;
color: #fff;
/*以下三句话特别重要*/
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: flex;
}
<div class="box">
<div>haha</div>
</div>
复制代码

盒子有固定的宽和高

对于这种情况我们应该是最熟悉的，负margin的方法

.box{
width: 100px;
height: 100px;
background: #aaa;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
<div class="box"></div>
复制代码

margin:auto的方法：

.box{
width: 200px;
height: 100px;
background: pink;
color: #fff;
position: absolute;
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="box"></div>
复制代码

calc()计算的方法：

.box{
width: 100px;
height: 100px;
background: #aaa;
position: absolute;
left: 50%;
top: 50%;
left: calc( 50% - 50px );
top: calc( 50% - 50px );
}
<div class="box"></div>
复制代码

水平有限，望补充！！！

一起进步吧！哈哈哈哈~