【CSS】浅谈CSS中的calc函数

分手后的思念是犯贱 2022-06-05 10:13 225阅读 0赞

在css中，我们常常需要计算功能。以前我们常常使用js来进行计算，然后布局，但是为了更符合MVC结构的概念，css中calc函数已经开始被广泛使用。

calc函数允许进行任何长度值的计算，运算符包括**“+”，“-”，“ \* ”，“ / ”**等。

但是需要注意的是，**运算符前后最好都要有一个空格**。

都是技术人员，下面，我将通过使用场景和代码来与大家共同探讨calc。

## 场景一 ##

如图所示，图中的内容一旦超过了浮动元素的高，那么这些文本就会与图片左对齐，但是我们需要形成图二的效果。（img的大小是百分比）  
![图一][SouthEast]  
![图二][SouthEast 1]  
那有人说，要实现这样的效果也很简单，给这段文本添加一个左边距maigin-left即可。没问题。确实要加上margin-left。但是如果是简单的：margin-left：10px；则会出现如下图的效果：  
![10px][]  
如果使用calc，就可以实现如图二所示效果；  
具体代码如下：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> *{ margin:0; padding: 0; } div{ border: 1px solid black; margin: 0 auto; width: 200px; } img{ width: 50%; float: left; } p{ margin-left: calc(50% + 10px); /*margin-left: 10px;*/ } </style>
    </head>
    <body>
    <div>
        <img src="C_79.png" alt=""/>
        <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
    </div>
    
    </body>
    </html>

## 场景二 ##

一排摆放四个img，每个img加margin的大小是25%；那就会产生一个问题。如图所示：  
![这里写图片描述][SouthEast 2]  
导致这个问题的原因是代码中的width：25%；并没有减去10px的margin-left；  
因此只需用 width:calc(25% - 10px);即可  
最终效果如图：  
![这里写图片描述][SouthEast 3]  
代码如下：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> *{ margin:0; padding: 0; } div{ border: 1px solid black; margin: 0 auto; width: 400px; height: auto; float: left; } img{ width: calc(25% - 10px); float: left; margin-left: 10px; } </style>
    </head>
    <body>
    <div>
        <img src="C_79.png" alt=""/>
        <img src="C_79.png" alt=""/>
        <img src="C_79.png" alt=""/>
        <img src="C_79.png" alt=""/>
    
    </div>
    
    </body>
    </html>

## 场景三 ##

结合媒体查询@media 就十分容易实现一个响应式布局。

![这里写图片描述][SouthEast 4]

calc今天就聊到这里。各位看官如果有任何疑问，请在博文下回复评论即可。

**挚谢阅读。**

[SouthEast]: /images/20220605/27716e81806c41639f65a26959215ebe.png
[SouthEast 1]: /images/20220605/c8df97fea3874606b42e342cb9330e26.png
[10px]: /images/20220605/403ed295179a4cd4bfdcfcd2ce983234.png
[SouthEast 2]: /images/20220605/aede49f463ce49288acc4383b270fa6e.png
[SouthEast 3]: /images/20220605/619900ae0fb14e9daad90553dffb4ebd.png
[SouthEast 4]: /images/20220605/de7a2f88f10f4bd4ad41ffd264bc4fcd.png