calc() ---一个会计算的css属性

最新推荐文章于 2024-06-25 17:44:25 发布

会做饭的技术男

最新推荐文章于 2024-06-25 17:44:25 发布

阅读量145

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=1khk2j0j&title=calc%28%29+---%E4%B8%80%E4%B8%AA%E4%BC%9A%E8%AE%A1%E7%AE%97%E7%9A%84css%E5%B1%9E%E6%80%A7

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

　　最近这个月一直在赶项目开发，遇到的问题和学到的前端知识没有更新到博客园，现在闲了下来，就整理一下前端知识。
　　在项目开发中，在样式这方面花费的时间较多，因为针对于数字的变化特别多，本人不爱记数字，在看设计图时总是反复计算之间的数值，觉得很麻烦，偶然谷歌一下，发现了css3的一个属性--calc()
　　calc() 很显然，是calculate的缩写--计算。是css3的一个属性。可以用来给width，height，border，margin以及padding等属性值设置动态值，拿个例子说：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width:200px;    //内容的宽度是200px
            height:200px;
            background: red;
            border: 1px solid;
        }
        .two {
            height:100%;
            padding-left: 10px;
            padding-right: 20px;
            background: pink;
            width:calc(100% - 10px - 20px);  //内容的宽度是170px
        }
        .three {
            height:100%;
            padding-left: 20px;
            background: aqua;
            width: calc(100% - 20px);    //内容的宽度是150px
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">
            <div class="three">abc</div>
        </div>
    </div>
</body>
</html>