做一个懒人----CSS之calc()

最新推荐文章于 2024-08-20 23:30:49 发布
最新推荐文章于 2024-08-20 23:30:49 发布
阅读量450 收藏
点赞数
分类专栏： 学习笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kesilll/article/details/78522889
版权
CSS的calc()函数能帮你免去手动计算宽度和高度的烦恼，实现动态计算布局。例如，通过calc(100% - 100px)可以让元素宽度自动适应浏览器宽度减去100px。不同浏览器可能需要前缀，如-webkit-calc()、-moz-calc()和通用的calc()。使用calc()时需注意，加减运算符间要有空格，函数名与括号间不应有空格。
摘要由CSDN通过智能技术生成

大家在写代码遇到要计算宽度、高度时一定很烦躁吧，每次都要去计算，但是CSS有一个强大的东西能够帮助我们做一个”懒人“，那就是calc()函数。

- calc()语法：

calc(expression) 

.test{
    width:-webkit-calc(100% - 100px);
    margin:0 auto;
}
<body>
    <div class="test">
        <p>Hello World!</p>
    </div>
</body>

在上面这个简单的例子中，我们可以得到的结果是div位于浏览器中央（这得益于margin:0 auto;），宽度为浏览器宽度减去100px，这就是calc()的作用，这样设置的好处就是会根

最低0.47元/天 解锁文章
kesilll
关注
专栏目录
css3高度计算函数cal（）
m0_56991207的博客
01-15 785
.foo { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; } 使用 calc() 函数，我们仅仅通过 top 与 left 属性便能实现相同的效果： .foo { position: absolute top: calc(50% - 150px); left: calc(50% - 150px); } ...
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
热门推荐
snowball的博客
11-29 1万+
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
css中怎样使calc计算的高度生效？
最新发布
金木编程
08-20 526
在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。
css的cal(),CSS3 Calendar
weixin_33498283的博客
08-04 184
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);body {margin: 0 auto;padding: 0;width: 600px;font-family: 'Roboto', sans-serif;font-weight: 400;background...
网站开发进阶（六十三）详解CSS3中的calc()
IT全栈 华强工作室
04-13 2798
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过 .foo { width: 100px + 50px; } // Or using SASS variables $width-one: 100px; $width-two: 50px; .bar {
【CSS】cal()函数的坑
smart_dream
02-21 2036
1、calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都必须保留一个空格，否则不生效。例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算。（包括 %、px、vh、vw、em等） calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 2、在less中使用calc()函数 今天在less中使用cal()时，遇到个问题：我写的 div {width : calc(100% ..
reduce-css-calc:最大程度地减少CSS calc（）函数
05-17
reduce-css-calc 最大程度地减少CSS calc（）函数。 对于或类的软件包尤其有用。 安装 npm install reduce-css-calc 用法 var reducedString = reduceCSSCalc(string, precision) var reduceCSSCalc = require ...
Date-Calc-5.4.tar.gz_Date-Calc-5.4
09-23
标题中的"Date-Calc-5.4.tar.gz_Date-Calc-5.4"指的是一个名为"Date-Calc"的Perl模块的版本5.4的压缩文件，它采用tar.gz格式进行打包。这种格式通常用于在Unix/Linux环境中归档和压缩文件，方便传输和存储。".tar"是...
calc-js:这是一个JavaScript计算器，支持基本功能且使用清晰的代码编写
03-21
calc-js 是一个基于JavaScript编写的前端计算器应用，它提供基本的数学运算功能，如加、减、乘、除等。这个项目的目标是展示如何使用JavaScript来实现用户友好的交互和计算逻辑，同时也体现了简洁编码的原则。 ### ...
CSS之calc函数
qwerty053的博客
10-17 1180
calc函数可以通过加减乘除计算来获得高度、宽度值等 比如width:calc(180px+20px)可以得到宽度为200px的盒子 但calc的使用完全不仅于此 父元素的子元素可以通过设置width:calc(100%)达到和父盒子一样的宽度，也可以通过 设置widthLcalc(100% - 20px)得到比父盒子少20px的盒子 千万要注意！ 100%和减号以及减号和20之间一定要有空格，否则就无法得到想要的效果。 ...
css的calc()函数
weixin_47042966的博客
05-10 195
calc()的用法
CSS calc() 函数
小黄的博客
03-06 3078
CSS calc() 函数用法
css3高度计算函数cal_CSS3 calc()是怎么实现计算
weixin_42509105的博客
12-23 710
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo {width: calc(100px + 50px);}为什么是 calc()如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过.foo {width: 100px + 50px;}// Or using SASS variab...
使用calc()函数在CSS属性值时执行计算
aspire_cj的博客
06-11 833
在现实中，我们经常要动态调整相对整个画面的整体高度或者宽度 比如：我想设置一个div高度为整个屏幕的100% 再减去20px固定高度，这种如何实现呢？ 我们就可以适合用calc()函数调整了。使用方法 width: calc(100% - 20px); calc方法可以使用 加(+)减(-)乘(*)除(/) 注意：乘法，乘数中至少有一个是 number。 注意：除法，除数（/ 右面的数）必须是 number。 备注： ‘+’ 和 - 运算符的两边必须要有空白字符。 ‘*’ 和 / 这两个运算符前后不
CSS之calc用法
MISS_zhang_0110的博客
10-18 463
CSS之calc用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100% - 20px) 注：减号两边的空格 链接: https://blog.csdn.net/weixin_30918415/article/details/99
calc( )计算css属性值
lipeng_kaka的博客
08-20 3311
calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 calc(）语法： 加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是<number>类型的、被除数（/右面的数）必须是<number>类型的 calc()使用通用的数学运算规则，...
css学习记录十三:css函数（一）：calc()计算函数
吮指原味鸡的博客
11-04 89
这里写目录标题一、calc()的作用二、写法 一、calc()的作用 计算盒子的宽高 二、写法 div{ height:calc(100px - 20rem) } 需要注意的是运算符的两边一定要有空格
Thermo-Calc中文用户指南：入门与精通
Thermo-Calc是一款强大的计算软件，主要应用于材料科学领域，尤其在热力学和动力学模拟方面具有广泛的应用。该软件结合了数据库和接口，允许用户进行复杂的相图计算、相平衡分析、扩散和反应速率预测等任务。对于新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值