用css的calc()函数计算长度

最新推荐文章于 2023-11-29 14:54:45 发布

weixin_30641465

最新推荐文章于 2023-11-29 14:54:45 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/javenlee/p/10717379.html

版权

　 ● 重点：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

● 任何长度值都可以使用calc()函数进行计算；

● calc()函数支持 "+", "-", "*", "/" 运算；

● calc()函数使用标准的数学运算优先级规则；

　 ● calc()函数支持各种单位混搭，如 height: calc(100vh - 20px)；

转载于:https://www.cnblogs.com/javenlee/p/10717379.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30641465

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS calc() 函数计算标签长度

qq_36236621的博客

09-09

494

今天来讲一个灵活控制标签长度的方法calc()。 calc()语法规则： calc(expression)，expression是一个数学表达式。举个栗子：首先，显示一个宽度只有50%的div 1，- width: calc(100% - 100px); 宽度100%的基础上，两边各削减50px 2，+ width: calc(100% + 100px); 宽度100%的基础上，两边各加宽50px 3，* width: calc(50% * 2); 宽度50%的基础上乘以2，即100%（高度有变化

height:calc(100% - 20px);

陈熙之的博客

07-22

6151

记录一下，免得忘记了。 css里高/宽有时候按照百分比计算后，需要减掉对应的高度/宽度，避免用js去计算。

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

CSS：calc() 函数 / 动态计算长度值 / 不同场景使用

热门推荐

Ranx的博客

09-28

13万+

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport

calc(100vh - 10px) calc(100vw - 10px) calc(100% - 10px) 简单说明

Asa的专栏

12-05

3万+

在讲calc之前先说一下 vh vw： vw 相对于视口的宽度。视口被均分为100单位的vw vh 相对于视口的高度。视口被均分为100单位的vh vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax vmin 相对于视口的宽度或高度中较小的那个。其

css中calc不生效（不起作用）

yanhappiness

11-11

1万+

calc属性作用不起作用是因为书写格式错误，正确的格式需要在运算符的两边留有空格。2、父元素需要设置高度或者宽度，不能用100%。如果还解决不了，请留言。css中calc属性不起作用。

CSS3 calc()会计算属性详解

09-27

CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...

css中的计算函数calc在网站布局中一个示例

01-19

calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是加号和减号前后需要有个空格。 calc 大大的增加了css的灵活...

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

01-19

其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...

css3中的calc函数浅析

12-02

在CSS3中，`calc()`函数是一个强大的计算工具，允许开发者在样式表中执行动态长度计算。它为CSS带来了更灵活的布局控制，特别是对于响应式设计而言，calc()的功能显得尤为重要。尽管它看上去与JavaScript函数相似，...

CSS3使用calc() 计算高度和宽度 vh px

陆柏熺

05-17

8504

Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能： Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%...

CSS calc()函数与单位vh 常见height：100vh

guojing5721的专栏

07-24

1万+

calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；举例，给一个div动态设置宽度如下: #divBox { position: absolute; left: 50px; width: calc(100% - 100p...

css l数字相加,CSS calc()的完整指南

weixin_36166752的博客

08-03

1241

CSS具有calc()执行基本数学运算的特殊功能。.main-content {/* 从100vh减去80px */height: calc(100vh - 80px);}在本指南中，我将介绍有关此非常有用的功能的所有知识。推荐阅读之前写过一篇类似文章《css3 calc()属性介绍以及自适应布局使用方法》。calc()用于值可以使用calc()函数的唯一地方是值。请看下面这些示例，其中我们为许...

使用calc()计算宽高错误

令瑞斌

11-19

2411

有时候会遇到calc()计算后的结果转为百分比。如 cacl(100% - 580px) 会变为calc(-480%)。这种错误出现在less中使用。因为less的计算方式与calc有冲突。解决方案：calc(~“100% - 580px”) ...

Calc计算属性

Forest

05-20

444

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

css3的calc属性用于动态计算长度值

xiasohuai的博客

08-16

1614

calc() 函数用于动态计算长度值。 calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小 vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%,100代表100%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：...

CSS3中width属性的calc()使用问题

Arlisol的博客

02-14

2444

恭喜博主今天又踩到了一个坑，继滚动条问题解决后博主在测试过程中又发现了一个问题。由于博主的左侧菜单可以折叠，博主在折叠打开左侧菜单过程中发现右侧主题内容的宽度显示不正常，上图说明：初始渲染显示正常：折叠菜单显示正常：问题来了，再次打开发现显示不正常：博主通过谷歌的开发者工具发现了问题，之前的内容宽度为1306px，但是经过折叠宽度就变成了1346px。因为内容宽度用的是CSS3的...

calc()

jasonjkj的博客

01-23

549

关于css calc的测试 0.参考 https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 1.使用的场合 1.box-sizing 的替代品 2.类似于简单的@media 做一个简单的响应是布局(实现比较容易)

css 中动态获取宽度,css中的calc动态计算长度值

weixin_36085931的博客

08-03

1万+

1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...

css中的calc函数如何使用

06-07

CSS中的`calc()`函数可以用于计算CSS属性值，它支持加、减、乘、除四则运算。使用`calc()`函数的语法格式为： ``` calc(expression) ``` 其中，`expression`是要计算的表达式，可以包含长度、百分比、数值和其它CSS属性值。例如： ``` width: calc(100% - 20px); height: calc(50vh + 10%); ``` 在使用`calc()`函数时，需要注意以下几点： 1. 表达式中的数值、长度、百分比等必须使用空格将运算符分开，例如`calc(100% - 20px)`而不是`calc(100%-20px)`。 2. `calc()`函数不能嵌套使用，例如`calc(calc(100% - 20px))`是不合法的。 3. `calc()`函数支持CSS3的数学函数，例如`sin()`、`cos()`、`tan()`等。 4. `calc()`函数的兼容性较好，大部分现代浏览器都支持，但是IE9及以下版本不支持。