calc 的实现举例

作者 johansen 日期 2016-12-09
技术小记
calc 的实现举例

居中对齐

最近发现好多项目都用到居中对齐，我用的最多的就是rem设置宽度，然后就是margin值为0 auto。
基本上都能解决遇到的问题。无意间发现一个css的属性方法 calc()，真是个大招。

在介绍他之前先看一个技术痛点，然后在请出calc()。

1. 基于绝对定位方法实现

举例：(一般方法)
main {
position : absolute;
top : 50%;
left : 50%;
margin-top : -3em;
margin-left : -5em;
width : 10em;
height : 6em;
}

举例：基于calc()的实现如下
main{
position : absolute;
top : calc(50% - 3em);
left : calc(50% - 5em);
height : 6em;
width : 10em;
}

注意：calc函数中的运算符左右两边需要有空格，要不然浏览器不会生效。

可以看出代码量减少了，这一部工作就交给浏览器实现了。

实现等分自适应布局

前段时间看见企鹅用到一个方法，应用在类似等分布局里面，因此得到启发。

举例：基于calc

html:
    <div class="main">
        <a href="javascript:;" class="item"></a>
        <a href="javascript:;" class="item"></a>
        <a href="javascript:;" class="item"></a>
        <a href="javascript:;" class="item"></a>
        <a href="javascript:;" class="item"></a>
    </div>

css:

    .main
    {
        width : 50%;
        height : 100px;
    }
    .item
    {
        display : inline-block;
        border : 2em solid #fff;
        width : calc(20% - 4em);
        height : 100%;
    }

这种方法类似于box-sizing:border-box。

实现页脚紧贴底部

举例： 假设如下布局，利用calc实现页脚紧贴底部。

html:
 <header></header>
 <main></main>
 <footer></footer>
css:
 header{
     height:6em;
 }
 footer{
     height:10em;
     padding:1em 0;
 }
 main{
     min-height:calc(100vh - 10em - 2em -6em);
 }

综上：有时候当你计算元素宽高，或者其他值比较费劲时直接交给浏览器吧。省事省时，冬天来了，就是不爱动弹，交给浏览器算好了，吃个夜宵洗洗睡了。

写博不留种，大家懂得。。。。
参考：
1.calc
2.calc实践

FEATURED TAGS
技术小记