css calc函数

最新推荐文章于 2023-09-05 11:00:37 发布
最新推荐文章于 2023-09-05 11:00:37 发布
阅读量683 收藏
点赞数
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44058725/article/details/103344386
版权
html 同时被 2 个专栏收录
28 篇文章 1 订阅
订阅专栏
css
20 篇文章 2 订阅
订阅专栏

我最近看别人写的样式发现一个函数calc,于是我查了一下用法。

.div {
    height: calc(100vh - 60px);//用来动态计算div的高度
    width: 100%;
    background: #eaebef;
    padding: 6px 40px;
    margin-top: 60px;
    padding-top: 30px;
  
}

calc可以动态的计算css值，比如height/width/padding/margin等

详情请看菜鸟教程（还有其它css函数的用法）

崽崽的谷雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css怎么设置高为100%,CSS如何设置div height 100%减去nPx
weixin_29827071的博客
08-04 894
In CSS3 you could useheight: calc(100% - 60px);Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.* {margin:0px;padding:0px;overflow:hidden}div {position:absolute}div#header {...
CSS calc()函数的使用
weixin_41993525的博客
12-24 716
https://blog.csdn.net/romantic_love/article/details/80868909
css 设置宽高 calc(100vh - 56px) widht: calc(12%+5em)
baidu_40537062的博客
08-30 834
1、px 像素，我们在网页布局中一般都是用px。 2、百分比 百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“*” 和 “/”四则运算； >可以使用百分
calc()无效，知道真相的我眼泪掉下来
zm151110202的博客
05-28 2332
calc(100%-60px) —— 错误 calc(100% - 60px) —— 正确 啊，原来是 - 左右得加上空格。 calc() 能计算的计算表达式里，“ + ” 和 “ - ” 两边要留空格，而 “ * ” 和 “ / ” 没有这个要求。
css的使用
dimandsun的博客
11-29 506
目录简介宽高calcpaddingdisplay: flex 简介 零星的记录使用到的新知识： 宽高 calc calc(100vh - 60px);高全屏-60px。-号左右必须加空格，否则失效。 height: calc(100vh - 60px); padding 内边距 display: flex 可以使侧边导航条占满剩余高度 flex: 1 占据剩余空间 ...
height: calc(100vh-60px) 这样写不对吗
qq_25741071的博客
09-04 568
这样写可以确保 CSS 解析器正确解析数学表达式，并计算出正确的结果。请注意，在数学表达式中的运算符两侧都需要添加空格，以确保正确的计算结果。函数用于执行数学计算，并将结果作为 CSS 属性的值。
less中如何使用calc
2301_77456141的博客
09-05 959
普通写css时使用calc直接height：calc（100vh-60px)即可，但是我们发现在less编译模式中不管用了，是因为在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。
CSS中calc()方法以及vh、vw单位
m0_56063262的博客
02-23 1938
使用“+”、“-”、“*” 和 “/”四则运算；也可以混合使用各种单位进行计算，如“height: calc(100vh - 44px - 49px)”错误写法： "height: calc(12%+5em)"“ * ”和 “ / ”可以没有空格。举个直观的例子，让大家感受说人话。+”和“-”计算的时候要加空格。expression是表达式。
css属性中使用数学计算——calc()函数
weixin_41309331的博客
08-24 1468
首先要说明一下，这篇博客关于calc的相关知识，大多数来自于这位前辈的博客：https://blog.csdn.net/wjnf012/article/details/80227644 为了能让我自己看得更顺心，我稍作修改。 作为一名初出茅庐的前端实习生，在工作中 ...
css3中的calc函数浅析
09-22
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
CSS常用的两个函数
01-08
在CSS（层叠样式表）中，有两个非常实用的函数：`calc()` 和 `attr()`。它们在网页设计和开发中扮演着重要角色，能够帮助我们实现更灵活、动态的布局和元素属性处理。 首先，让我们详细了解一下`calc()`函数。`calc...
reduce-css-calc:最大程度地减少CSS calc（）函数
05-17
最大程度地减少CSS calc（）函数。 对于或类的软件包尤其有用。 安装 npm install reduce-css-calc 用法 var reducedString = reduceCSSCalc(string, precision) var reduceCSSCalc = require ( 'reduce-css-...
CSS的计算大师：calc()函数全解析
最新发布
07-24
### CSS 的计算大师：`calc()`函数全解析 #### 一、引言 CSS（Cascading Style Sheets，层叠样式表）作为一种重要的前端技术，主要用于控制网页元素的外观和布局。随着网络技术和用户需求的发展，CSS也在不断进化...
【css】有关样式的一些问题
xms_can_fly的博客
12-07 176
一些有关css的问题
关于css计算宽度，高度的calc(100% - 24px)
qiaoqiaoBigBoss的博客
04-26 1772
css常用计算款高度的方法calc() 我们用height: calc(100% - 24px) 或height: calc(100vh - 24px) , 但是最终计算结果往往是 height: 76% 或 height: 76vh, 怎样解决呢 解决方法 height: clac(~'100% - 24px')
calc()运算
a12345612124的博客
05-04 388
calc()运算 calc()使用通用的数学运算规则，但是也提供更智能的功能： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中有“*”和“/”时，其前后可以没有空格，...
html使用calc函数,CSS calc() 函数的介绍与使用方法
weixin_28843191的博客
06-18 5923
在HTML页面的DIV布局中，如果我们把DIV的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，CSS中的一个关于计算的函数 calc()calc() 函数介绍calc()：英文单词calculate(计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。calc() 函数...
不只是简单的计算，深入掌握CSS calc()函数，让你的响应式设计更加灵活多变
weixin_43826851的博客
04-24 623
CSS calc()函数是CSS中一个功能强大的计算函数，可以实现复杂的布局设计和响应式效果。使用calc()函数，你可以动态计算长度值或百分比，支持四则运算、括号和嵌套，以及变量和函数的使用，是一种非常方便的CSS布局方式。总之，CSS calc()函数是CSS中一种非常方便的布局方式，使用它可以大大简化响应式设计的工作，让你的网站更加灵活和适应性更强。掌握calc()函数，将让你的CSS编码更加高效和精确，让你的网站更加专业和出色。在实际的开发中，calc()函数还支持变量的使用。
React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现，在浏览器打开文件
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-11 3万+
前言： 最近做一个项目要求在前端浏览器可以直接打开office文件（pdf,doc,xlsx等文件）。pdf浏览器可以直接打开（可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js）。但是word,xlsl等文件很难实现，网上的实现方式有微软的方法实现但是访问的文件地址必须是公共文件，所有人都能访问到才可以使用，显然是不行的，所以我就找到了reac...
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及以下版本不支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽崽的谷雨

漫漫前端路，摸爬滚打

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值