calc()的巧妙使用

最新推荐文章于 2023-02-21 14:00:01 发布
最新推荐文章于 2023-02-21 14:00:01 发布
阅读量854 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdmoment/article/details/82663658
版权

主要作用：css中计算(支持加减乘数 + - * /)

例子：width:calc(100%+2rem)

浏览器前缀：

/*Firefox*/
-moz-calc(expression);

/*chrome safari*/
-webkit-calc(expression);

/*Standard */
calc();

浏览器兼容性：IE9+、FF4.0+、Chrome19+、Safari6+

qdmoment
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
big-calc：使用React的Chrome扩展程序
02-04
首先，"Big Calc"的核心在于它巧妙地运用了React框架。React允许开发者通过创建可复用的组件来构建复杂的UI，这使得"Big Calc"计算器的界面清晰、易于维护。在项目中，我们可以预见到包括数字按钮、运算符按钮、结果...
使用CSS3中的calc()属性来以算式表达尺寸数值
09-24
calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表达尺寸数值
calc()函数 css中用100%的宽度/高度，减去50px？？
热门推荐
最初都是小白
08-27 2万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
qq_39877681的博客
12-13 1万+
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
calc()函数 css中用100%的宽度/高度，减去px
slice_93的博客
05-14 3285
注意： 1. 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2. 任何长度值都可以使用calc()函数进行计算； 3. calc()函数使用标准的数学运算优先级规则； 4. 它支持 “+”, “-”, “”, “/” 运算* div{ height: calc(100% - 114px); } ...
height calc()函数 css中用100%的宽度/高度
探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南，涵盖从基础到高级话题，旨在提升编程效率和技能。
11-05 2031
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：相对于视口的高度。视口被均分为100单位的vh 注意： 运算符前后都需要保留一个空格，例如：width: ..
css - calc()函数 & 组件高度占页面100%
asfcyg的博客
07-04 2028
css - calc()函数 & 组件高度占页面100%
beer-calc:漂亮的啤酒计算器
04-14
总结来说，“beer-calc”是一个结合了实用性和美学的家庭酿酒计算工具，其背后运用的CSS技术展示了编程与设计的巧妙结合。对于家庭酿酒者，它提供了一种便捷的方式来进行精确的酿造计算；对于开发者，它则是一个学习...
Libre Office Calc Pixel Art:将 Libre Office Calc 用于条件格式的像素艺术-开源
06-28
《使用Libre Office Calc创作像素艺术：开源的力量》 在数字化的艺术世界中，像素艺术以其独特的魅力和怀旧风格赢得了众多爱好者的心。然而，你可能没想到，一款日常使用的办公软件——Libre Office Calc，也能成为...
calc-math-expr-开源
04-24
这个项目允许用户计算包含函数、常量和变量的复杂数学表达式，通过巧妙地运用反向波兰表示法（Reverse Polish Notation, RPN）实现高效的计算。下面我们将深入探讨该项目的核心技术和应用场景。 反向波兰表示法是...
CSS 声明属性值计算calc()语法
吕氏春秋i
02-21 632
最近在学习小程序的项目用到适配高度滑动时 总是满足不了多个机型查阅资料 了解到CSS的calc()语法 更方便的实现计算后的适配宽高css简介calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：< length>、< frequency>, < angle>、< time>、< percentage>、< number>、或 < integer>。CSS的calc()语法 方便我们开发中做多余且重复的操作。
css:calc可以利用百分比计算长度函数
qq_20156289的博客
07-04 2329
#div1 { position: absolute; left: 50px; width: calc(100% - 100px); //这里，只能左边为百分数，右边不能是百分数，这个百分数相对于父容器的宽度来算的 border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; } ...
css 中动态获取宽度,css中的calc动态计算长度值
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
calc((100% - 0px)/1)
TanMengyi的博客
12-24 912
calc((100% - 0px)/1) 表达式中有“+”和“-”时，其前后必须要有空格
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...
CSS3 的 calc()函数（为元素设置动态的属性值）【积累】
单枪匹码
11-05 2433
一、定义与用法： （定义这个东西都是大同小异的，我这里是取自菜鸟教程） calc是英文单词calculate（计算）的缩写，是CSS3新增的功能，用来指定元素的长度。比如说：你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值，为何说是动态值呢？因为是我们使用表达式计算得到的值。不过calc()最大的好处就是用在流体布局上，可以通...
height:calc(100% - 20px);
陈熙之的博客
07-22 6114
记录一下，免得忘记了。 css里高/宽有时候按照百分比计算后，需要减掉对应的高度/宽度，避免用js去计算。
CSS3 calc()是怎么实现计算
大白兔
05-07 8388
css3的calc()函数允许我们在属性值中执行数学计算操作。例如，我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。 calc(表达式) - 表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、rem、em等）； - 表达式中有”+”、”-“运算符的，前后必须要有空格，这个是向前兼容，后期可能会带入变量等有”-“连字符； - 虽然“*”“/”没有空格...
CSS calc()函数的用法
web前端开发
07-20 2952
来源 | http://www.fly63.com/article/detial/3554css3 的 calc()函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc()...
css calc怎么使用
最新发布
05-19
CSS的calc()函数可以让你在样式中进行基本的数学运算，例如加、减、乘、除等等。它可以用于计算宽度、高度、边距、...同时，在使用 calc() 函数时，需要注意浏览器兼容性问题，建议在使用之前先检查浏览器支持情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值