CSS小tips--calc()和justify-content

今天在codepen看到各位小伙伴的css，有的我根本没见过，在此做个笔记。

1.  CSS3的calc()函数

    calc()，顾名思义，calculate, 计算的意思，用于在css中做样式的四则运算操作。

    比如：.container{

                    height: calc(100%-100px);//注意，冒号后面要加空格。

                }

菜鸟教程讲得很好，我直接copy过来：

    任何长度值都可以使用calc()函数进行计算；
    calc()函数支持 "+", "-", "*", "/" 运算；

    calc()函数使用标准的数学运算优先级规则；

暂时不知道怎么运用，记下来先。

2. justify-content

    在弹性盒对象的 <div> 元素中的各项周围留有空白

第一，容器要是display:flex

第二，容器里面留空白的元素是div

比如：

 

<style type="text/css">
    .contaier {
        display: flex;
        justify-content: space-around;
        height: 600px;
        width: 600px
    }
    .box{
        height: 50px;
        width: 50px;
        background-color: plum;
    }
</style>
<div class="contaier">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

space-around表示四周都留空白

效果如图：

更多属性请参考菜鸟教程：