前端动态计算宽高度—— calc()函数

最新推荐文章于 2024-04-30 14:40:20 发布
最新推荐文章于 2024-04-30 14:40:20 发布
阅读量7k 收藏 2
点赞数 3
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhuge_S/article/details/94003285
版权

calc() 函数 用于动态计算width与height
写法如下：

width: calc( 100% - 10px );

要注意：

  1. 运算符前后都需要保留一个空格
  2. 任何长度值都可以使用calc()函数进行计算
  3. calc()函数支持 “+” , " - " , " * " , " / " 运算
  4. calc()函数使用标准的书写运算优先级规则
xiaozhuge_S
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1172
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
vue3中自定义指令之动态根据页面高度设置元素的高度
最新发布
wch19960518的博客
04-30 697
自定义指令
height calc()函数 css中用100%的宽度/高度
qq_37916164的博客
04-01 9626
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：...
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 346
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
计算文本高度
上孟的专栏
12-01 320
- (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize { NSDictionary *dict = @{NSFontAttributeName : font}; // 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围 // 如果将来计算的文
JS calc() 动态计算长度函数
卡尔特斯
10-21 3471
CSS calc() 函数 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格， 例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； #div1 { position: absolute; left: 50px; width: calc(100% - 100px); borde..
前端特效源代码——绚丽多彩的圆圈气泡CSS3背景动画特效
09-18
对于背景的分布，可以使用`calc()`函数和百分比单位来动态调整气泡的位置，确保它们在整个视口内均匀分布。 总的来说，“绚丽多彩的圆圈气泡CSS3背景动画特效”是一个展示CSS3动画能力的优秀案例，它充分利用了CSS3...
calc-js:这是一个JavaScript计算器，支持基本功能且使用清晰的代码编写
03-21
**JavaScript计算器——calc-js** calc-js 是一个基于JavaScript编写的前端计算器应用，它提供基本的数学运算功能，如加、减、乘、除等。这个项目的目标是展示如何使用JavaScript来实现用户友好的交互和计算逻辑，...
mini-calc:迷你计算器
05-13
迷你计算器，或者称为"mini-calc"，是一个小型应用程序，主要使用三种前端技术——HTML、CSS和JavaScript构建。这个项目的主要目标是为开发者提供一个实践JavaScript技能的机会，特别是纯JavaScript的运用，不依赖...
unconventional_calc:用JS实现的计算器
03-18
今天我们将深入探讨一个独特的项目——"unconventional_calc"，这是一个用JavaScript实现的计算器。它展示了JavaScript的灵活性以及在创建交互式用户界面时的强大功能。 首先，让我们理解这个项目的背景。...
光标弹簧离子前端
02-24
《光标弹簧离子前端——深度探索SCSS技术》 在当今快速发展的Web开发领域，前端技术不断迭代更新，其中“光标弹簧离子前端”项目是一个结合了Spring Boot、Ionic框架和SCSS（Sass预处理器）的创新实践。本文将深入...
前端笔记93——文档、可视区宽高以及滚动距离计算
裕博的博客
06-22 414
前言 在实际的前端开发当中，我们经常获取文档、可视区宽高以及滚动距离。实现起来是很简单的，下面分享相关的Demo。 Js代码实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body ...
自适应布局之动态计算宽高
weixin_45259626的博客
07-27 934
我们经常会遇到某个高度（宽度）是根据窗口高度（宽度）减去已知div高度（宽度）而得到，此时就需要calc函数。 calc()语法非常简单，使用数学表达式来表示，但是得注意： 使用“+”、“-”、“” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的，width: calc(100% - 10px)则正确； 表达式中有“”和“/”时，其前后
旧版火狐浏览器使用calc()计算元素高度（height）
一条咸鱼的blog
12-10 881
最近在适配比较老的火狐浏览器，发现了一个问题，给元素设置宽度和高度时，使用了calc（）方法，但是宽度生效了，高度却没有，原代码是这么写的： width: calc(100% - 40px); height: calc(100% - 40px); 试过了-moz-calc()方法，也不生效，在查阅了一些资料后，这样改就可以了 height: calc(100vh - 40px); 注：我的火狐版本是52.9（32位） ...
黑鹰的VIP数据库（一）
热门推荐
caiguazheng4921的博客
12-06 16万+
转自：[url]http://bbs.cqqqz.cn/read.php?tid=4897[/url] NA 353b2cd767a9d75d waq99hjz 8c01f9e64dc3f965 waqi520 83aa400af464c76d war1 7d010614f902b76e warangle 28d9277b06468304 warbb 92935ef2...
height：calc（100%-100px）如何兼容ie8
qq_36528523的博客
05-14 1万+
做公司后台管理系统时，右边content-main内容块高度出现了兼容问题。是content-main包裹了iframe。如何兼容ie8，贴出以下代码部分（css,js）原来css供参考另一个参考地址：https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery...
JS中如何正确的使用有变量的calc()？
CruellyJohn的博客
03-19 2万+
在说JS中的calc()方法前，我们先说说使用calc()的一定要注意（无论在js中还是css中）。 　　①使用calc()动态运算时,要注意加减运算时，符号前后要加空格。乘除运算则不需要。例如： 　　　　　　　width:calc(100% - 200px); 　　　　　　　width:calc(50%*200px); 　　在写js中，我们可能会碰到需要某个...
JS中计算可视距离高度问题
西楚小羽的专栏
11-28 959
export default { getElementLeft(element) { let actualLeft = element.offsetLeft let current = element.offsetParent while (current !== null) { actualLeft += curr
calc动态计算字体宽度
08-30
calc函数是CSS中的一个函数，用于动态计算字体的宽度。它可以根据不同的条件来计算字体宽度，如字体大小、间距和文本内容等。 在使用calc函数时，需要使用到算术运算符和单位。例如，可以使用加号（+）和减号（-）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值