你真的会用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>
复制代码

水平有限，望补充！！！

一起进步吧！哈哈哈哈~

转载于:https://juejin.im/post/5cda86cd518825686401fb46