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

最新推荐文章于 2024-08-20 23:30:49 发布
最新推荐文章于 2024-08-20 23:30:49 发布
阅读量7.1k 收藏 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
关注
专栏目录
巧用CSS3的calc()宽度计算做响应模式布局的方法
09-24
calc()函数可以用于计算任何CSS属性，但最常用的还是计算宽度和高度。它支持基本的四则运算——加法（+）、减法（-）、乘法（*）、除法（/），并且可以混合不同的单位，比如百分比（%）、像素（px）、em单位或者rem...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
CSS 使用calc()获取当前可视屏幕高度
热门推荐
Soutv - Hello Bug !
05-03 7万+
先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的...
css中怎样使calc计算的高度生效？
最新发布
金木编程
08-20 520
在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1201
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
calc动态计算高度或者宽度
LJ_QWE的博客
09-28 1070
div样式 <div class="color-white" style="width: 100%;height: 100%;color:rgb(2,223,254)"> <div style="height: 160px;width: 100%;border:1px solid red;"> </div> <div class="clearfix" style="height: calc(100% - 160px);width: 100%;bor
css3高度计算函数cal_css函数calc()的使用
weixin_39968852的博客
12-23 2000
calc函数四则运算calc函数是css中提供的一个用来计算属性值，通过calc函数我们可以设置诸如width，height等一系列属性的值。换句话说，calc函数把一些简单的js计算挪到了css中了，把布局运算交给了浏览器，减少了js的负担。calc函数可以通过 +,-,*,/ 四则运算，下面我们看一个高度的例子：height:calc(100%-50px);这里需要注意一下，calc计算+...
前端特效源代码——绚丽多彩的圆圈气泡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的运用，不依赖...
ES6记录异步函数的执行时间详解
10-21
文章《ES6记录异步函数的执行时间详解》针对这一领域提供了一个实用的技巧——如何记录异步函数的执行时间。 在探讨这个话题之前，我们先了解异步函数的基础概念。异步函数是指不会立即返回结果的函数，它的执行...
JS计算字符串在浏览器的宽度和高度
yuge486的博客
02-25 1860
JS计算字符串在浏览器的宽度和高度
三种方法 计算 文本宽度 及 文本行数
夜雨风亭
03-16 4737
1.已有元素，获取元素内文本行数 //计算元素内的行数 var line=parseFloat(el.css("height"))/parseFloat(el.css("line-height")); 2.canvas计算文本宽度、行数 注：不同字体、不同尺寸 的文字占用宽度不同 //txt:文字 font：字体 width：一行最大宽度 //计算宽度 function getwidth(txt,font){ var canvas = document.createElement('canvas'
height calc()函数 css中用100%的宽度/高度
qq_37916164的博客
04-01 9745
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：...
获取页面剩余高度
qq_42315540的博客
11-30 3050
div css获取页面剩余高度 因为自己写页面每次都会忘记，却又很常用，记得刚入门至今也是常用易忘且困难的事情，所以整理了一下百度的资料 先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 标签 效果 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 r
1分钟学会如何用 JS 计算文本的宽度
前端达人
10-27 9730
在项目开发中，我们有时候需要计算文本的内容宽度，你是怎么做的呢？今天看到一篇关于此内容的简短文章在此分享给大家。方法一：使用 clientHeight 和 clientWidth我们都清楚...
前端html——文字水平位置 行高 文字样式
qq_41141657的博客
02-20 1万+
line-height:文字在此行的高度中垂直居中 line-height: 2em;文字内容占2倍行高, em是参照当前文字的实际文字大小 需要设置字体大小，否则为默认高度 text-indent: 2em;——首行缩进两个字符 font-weight: 700;——文字粗细,正常粗细400,加粗700 font-style:italic;——文字倾斜 text-decorati...
计算文本高度
上孟的专栏
12-01 326
- (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize { NSDictionary *dict = @{NSFontAttributeName : font}; // 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围 // 如果将来计算的文
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值