【CSS】calc 函数（动态计算长度值）

一颗不甘坠落的流星

已于 2022-07-14 17:11:11 修改

阅读量1k

点赞数

分类专栏： CSS 笔记文章标签： css calc

于 2022-04-24 09:43:45 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/124375456

版权

CSS 笔记专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

- 基本用法

基本用法

calc() 函数用于动态计算长度值。

需要注意的是: 
1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)；
2. 任何长度值都可以使用calc()函数进行计算；
3. calc()函数支持 "+", "-", "*", "/" 运算；
4. calc()函数使用标准的数学运算优先级规则；

示例：react 示例

<div stytle={{width: 'calc(100vh - 2px)'}}><div/>
等价于：
<div stytle={{width: `${window.innerHeight - 2}px`}}><div/>

示例：html 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实现div居中显示</title> 
<style>
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>

<body>
<p>创建一个横跨屏幕的div，div 两边有 50px 的间隙：</p>
<div id="div1">一些文本...</div>
</body>
</html>

允许结果：当屏幕左右拉伸时，div两边都是50px的间隙

一颗不甘坠落的流星

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】calc 函数（动态计算长度值）

文章目录基本用法基本用法calc() 函数用于动态计算长度值。需要注意的是: 1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)；2. 任何长度值都可以使用calc()函数进行计算；3. calc()函数支持 "+", "-", "*", "/" 运算；4. calc()函数使用标准的数学运算优先级规则；示例：<!DOCTYPE html><html><head><meta charset=
复制链接

扫一扫