CSS3的calc()使用,css里不同单位相加你信不信?
博客专区 > 明非_ 的博客 > 博客详情
CSS3的calc()使用,css里不同单位相加你信不信?
明非_ 发表于2年前
CSS3的calc()使用,css里不同单位相加你信不信?
  • 发表于 2年前
  • 阅读 56
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

摘要: http://qun.jikexueyuan.com/web/topic/224

什么是 calc()

简单通俗的将,就是能把不同单位的属性执行四则运算,产出结果。

举一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .in {
            background: red;
            /*width: calc(100% - 25px);*/
            width: 100%;
            margin-left: 25px;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="in">
            **calc()**从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
        </div>
    </div>
</body>
</html>

展示效果如下图

calc()用法图

因为我们内部div的宽度为100%,然后又设置了margin-left,所以内部超出了外面的div,有时候我们不想要这种效果,我们继续测试下面的代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .in {
            background: red;
            width: calc(100% - 25px);
            margin-left: 25px;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="in">
            calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
        </div>
    </div>
</body>
</html>

如下图 calc()用法图

这样我们就达成了预期效果。

最后来看看兼容性

calc()兼容性图

2015-12-10 edire 发表于极客学院 http://qun.jikexueyuan.com/web/topic/224

标签: css calc
共有 人打赏支持
明非_
粉丝 8
博文 18
码字总数 10823
作品 1
×
明非_
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: