CSS3之calc()

作者: LemonnYan | 来源:发表于2018-05-06 17:11 被阅读1次

[译]calc()是如何工作的
CSS3之calc()
css3 calc()
css3之calc（）
CSS calc()函数与单位vh 常见height：100vh
CSS3 calc()
css3的calc属性不生效
calc使用
CSS3：calc() 属性用法
CSS3----calc()

一、calc()是什么

calc是英文单词calculate(计算)的缩写，是css3新增的功能，calc() 函数用于动态计算长度值。

语法：calc(数学表达式)

语法规则：

calc()函数使用标准的数学运算优先级规则，支持 +、-、*、 /四则运算；
可以使用百分比、px、em、rem等单位运算，也可以混合使用各种单位运算
注意：运算符前后都需要保留一个空格

二、浏览器兼容性

浏览器兼容性：需要添加兼容性前缀

示例：

width:-moz-calc(40% - 1px); 
width:-webkit-calc(40% - 1px); 
width:calc(40% - 1px);

三、使用示例

示例1：手机端一屏显示

使用说明：
（1）html和body需要同时定义高度100%；
（2）头部和底部定高，中间部分使用calc相减；

示例效果图1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>calc</title>
    <style>

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            color: #ffffff;
            text-align: center
        }

        header {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            background-color: #1AA094
        }

        section {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 100px - 150px);
            background-color: #4D5BB3
        }

        footer {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
            background-color: #A63DB8
        }

    </style>
</head>
<body>
    <header>
        这是header
    </header>

    <section>
        这是高度自动变化的区域
    </section>

    <footer>
        这是footer
    </footer>
</body>
</html>

示例2：九宫格
示例效果图12：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>calc</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .grid-3 {
        width: calc(100%/3 - 5px);
        float: left;
        margin-right: calc(5px*3 /2);
        background: #eee;
        color: #333;
        height: auto;
        text-align: center;
        margin-bottom: calc(5px*3 /2);
        font-size: 18px;
        line-height: 100px;
    }

    .grid-3:nth-child(3n) {
        margin-right: 0;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="grid-3">1</div>
        <div class="grid-3">2</div>
        <div class="grid-3">3</div>
        <div class="grid-3">4</div>
        <div class="grid-3">5</div>
        <div class="grid-3">6</div>
        <div class="grid-3">7</div>
        <div class="grid-3">8</div>
        <div class="grid-3">9</div>
    </div>
</body>
</html>