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

最新推荐文章于 2024-04-11 09:45:17 发布

原创最新推荐文章于 2024-04-11 09:45:17 发布 · 7.3k 阅读

2 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS中calc()函数的使用方法，包括如何动态计算元素的width和height，以及在计算过程中支持的运算符和优先级规则。了解这些内容有助于更灵活地布局网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

width: calc( 100% - 10px );

要注意：

运算符前后都需要保留一个空格
任何长度值都可以使用calc()函数进行计算
calc()函数支持 “+” , " - " , " * " , " / " 运算
calc()函数使用标准的书写运算优先级规则

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaozhuge_S

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

编译原理——语法制导的语义计算

梁辰兴的博客

05-27

1078

属性文法和翻译模式是编译器中语义分析的核心方法。属性文法通过综合属性（自底向上计算）和继承属性（自顶向下传递）将语法与语义结合，分为S-属性文法（仅综合属性）和L-属性文法（允许继承属性）。翻译模式是属性文法的实现形式，通过嵌入语义动作实现语义计算，S-翻译模式适用于自底向上分析，L-翻译模式支持继承属性的传递。Yacc工具利用LALR(1)算法自动生成语法分析器，通过描述文件定义语法规则、语义动作及优先级，简化编译器开发。二者结合为语义分析和代码生成提供系统化解决方案。

css中怎样使calc计算的高度生效？

最新发布

金木AI

08-20

1360

在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。

参与评论您还未登录，请先登录后发表或查看评论

calc动态计算高度或者宽度

LJ_QWE的博客

09-28

1162

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

CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度

qq_39877681的博客

12-13

1万+

CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度

【CSS笔记】— 使用calc()计算宽高（vw/vh）

weixin_34148508的博客

12-18

1329

【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算，使用“+”、“-”、“*” 和 “/”四则运算；可以使...

前端动态计算高度

qq_45801301的博客

09-26

116

【代码】前端动态计算高度。

css属性中使用数学计算——calc()函数

weixin_41309331的博客

08-24

1591

首先要说明一下，这篇博客关于calc的相关知识，大多数来自于这位前辈的博客：https://blog.youkuaiyun.com/wjnf012/article/details/80227644 为了能让我自己看得更顺心，我稍作修改。作为一名初出茅庐的前端实习生，在工作中 ...

巧用CSS3的calc()宽度计算做响应模式布局的方法

09-24

calc()函数可以用于计算任何CSS属性，但最常用的还是计算宽度和高度。它支持基本的四则运算——加法（+）、减法（-）、乘法（*）、除法（/），并且可以混合不同的单位，比如百分比（%）、像素（px）、em单位或者rem...

前端特效源代码——绚丽多彩的圆圈气泡CSS3背景动画特效

09-18

对于背景的分布，可以使用`calc()`函数和百分比单位来动态调整气泡的位置，确保它们在整个视口内均匀分布。总的来说，“绚丽多彩的圆圈气泡CSS3背景动画特效”是一个展示CSS3动画能力的优秀案例，它充分利用了CSS3...

calc-js:这是一个JavaScript计算器，支持基本功能且使用清晰的代码编写

03-21

**JavaScript计算器——calc-js** calc-js 是一个基于JavaScript编写的前端计算器应用，它提供基本的数学运算功能，如加、减、乘、除等。这个项目的目标是展示如何使用JavaScript来实现用户友好的交互和计算逻辑，...

CSS3 calc() 函数,动态计算高度

echo

11-02

1万+

最近突然发现原来**calc()**函数可以动态设置高度在没发现之前，我一直以为这是需要js动态计算的刚看calc()是不是觉得很熟悉和scale()长得非常像我常常用 scale() 来设置10px的字 font-size：12px; transform: scale(0.8333); 这个具体就不多讲了，可以私下问我然后看这次重点calc() height: calc(100% - 170px); 这里可以用于不用单位之间的运算,比如：px也可以用vh代替之类使用calc()函数时

动态高度-calc css 的calc在计算的时候

lx233

04-11

299

运算符号那里一定要带空格！不然不会生效 height:-moz-calc(100% - 100px); 闪闪编辑器

CSS 使用calc()获取当前可视屏幕高度

热门推荐

Soutv - Hello Bug !

05-03

7万+

先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的...

vue 在template内通过style中的calc动态计算dom元素的高度

maoge_666的博客

04-11

1132

vue 在template内通过style中的calc动态计算dom元素的高度

CSS calc() 函数用法（计算动态高度很有用）

qq_32184753的博客

07-13

2354

如果有固定头部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到css3的计算属性calc。用法如下：内容区域高/宽 = calc(100% - 头部高宽) 例如： #div1 { position: absolute; left: 50px; width: calc(100% - 100px); padding: 5px; } div 两边有 50px 的间隙（其他占满） ...

计算文本的高度

weixin_30371469的博客

07-12

115

计算文本的高度分两种情况，指定文本只有1行和多行，可以写方法返回字符串的size，options通常使用NSStringDrawingUsesLineFragmentOrigin，这样整个文本将以单行文本的矩形来计算整个文本高度 ①文字显示一行 -(CGSize)sizeOneLineText:(NSString *)text font:(UIFont *)font{ CGSiz...

css3高度计算函数cal_css函数calc()的使用

weixin_39968852的博客

12-23

2140

calc函数四则运算calc函数是css中提供的一个用来计算属性值，通过calc函数我们可以设置诸如width，height等一系列属性的值。换句话说，calc函数把一些简单的js计算挪到了css中了，把布局运算交给了浏览器，减少了js的负担。calc函数可以通过 +,-,*,/ 四则运算，下面我们看一个高度的例子：height:calc(100%-50px);这里需要注意一下，calc计算+...

前端开发中获取各种高度宽度

老电影故事的博客

04-28

3178

前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 获取这些尺寸。

计算富文本的高度

weixin_33946605的博客

10-11

433

1.设置富文本 - (CGFloat)textHeight :(NSString *)content{ NSString *text = [CustomMethod transformString:content emojiDic:emojiDic]; text = [NSString stringWithFormat:@"<font color='bl...