CSS | calc的基本使用

最新推荐文章于 2024-06-25 17:44:25 发布
最新推荐文章于 2024-06-25 17:44:25 发布
阅读量586 收藏 1
点赞数
分类专栏： CSS3 文章标签： CSS3 calc calc() 宽高计算 CSS函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36145914/article/details/86580698
版权
本文介绍了CSS3的calc()函数，用于动态计算元素的宽高。通过calc(100% - padding * 2 - border * 2)等表达式，可以实现与border-box类似的效果，避免元素溢出。同时，文中强调了使用calc()时运算符两侧需加空格，以及可以结合CSS变量进行计算。
摘要由CSDN通过智能技术生成

文章目录

calc()的作用

 calc()顾名思义，calculate，是一个计算函数，我们可以通过 calc(表达式) 的形式为width/height,padding,margin等属性赋予动态计算的值。

问题回顾

 在box-sizing的解析与应用场景一文的问题场景中，我们用border-box属性使得 height/width = content + padding * 2+ border * 2，使得子元素盒子占满父元素内容块，并不发生溢出。
 除了使用border-box，我们还可以使用CSS3加入的calc（）函数进行规范。

解决方案

 我们可以使用calc()对元素的宽高进行手动计算，calc(100% - padding * 2 - border * 2)，效果等价于border-box

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
最低0.47元/天 解锁文章
MGsniper
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
做一个懒人----CSS之calc()
kesilll的博客
11-13 447
大家在写代码遇到要计算宽度、高度时一定很烦躁吧，每次都要去计算，但是CSS有一个强大的东西能够帮助我们做一个”懒人“，那就是calc()函数。- calc()语法：calc(expression) .test{ width:-webkit-calc(100% - 100px); margin:0 auto; } <body> <div class="test">
CSS calc()函数的用法
web前端开发
07-20 2976
来源 | http://www.fly63.com/article/detial/3554css3 的 calc()函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc()...
【CSS】深入探讨 CSS 的 `calc()` 函数
最新发布
九日的博客
06-25 628
calc是一个 CSS 函数，用于在样式表中进行数学计算，从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时，进行加减乘除运算。过多的动态计算可能会使样式变得难以理解和调试。特别是在涉及布局的大量计算时，可能会对渲染性能产生影响。：虽然 CSS 的解析和计算速度非常快，但在复杂页面中频繁使用。，但在某些老旧浏览器中，可能会遇到兼容性问题。函数，我们可以实现更灵活和响应式的设计。前，建议检查目标用户的浏览器支持情况。时保持简洁明了，避免过度复杂的计算。的用法、易错点和一些常见争议点。
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
snowball的博客
11-29 9642
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
calc的使用
曾小超的博客
10-30 732
有张页面是要求要一屏展示，我想到了媒体查询，也想到了vw和vh。我先用vw和vh来布局，分为上，中，下三部分。每块计算宽高，vw和vh可以实现响应式布局，所以就用上了。但媒体查询用上了却发现在这边不好用，这时使用上了calc()属性。因为上一个人引入了video.js并加上id:#myVideo，这边也做相应的计算处理。 注意：要有空格 calc()能计算的计算表达式里，在加号...
CSS之calc函数
qwerty053的博客
10-17 1173
calc函数可以通过加减乘除计算来获得高度、宽度值等 比如width:calc(180px+20px)可以得到宽度为200px的盒子 但calc的使用完全不仅于此 父元素的子元素可以通过设置width:calc(100%)达到和父盒子一样的宽度，也可以通过 设置widthLcalc(100% - 20px)得到比父盒子少20px的盒子 千万要注意！ 100%和减号以及减号和20之间一定要有空格，否则就无法得到想要的效果。 ...
scss里用calc计算百分比
m0_73216899的博客
01-29 1106
scss
CSS3 Calc实现滚动条出现页面不跳动问题
09-24
`calc()`的基本语法是 `calc(expression)`，其中`expression`是一个包含加法、减法、乘法和除法的计算表达式。在计算长度值时，它可以结合百分比、像素、em、rem等各种单位。例如，`width: calc(100% - 10px)` 表示...
浅析CSS中calc()的使用
09-24
首先，我们来了解`calc()`的基本语法。`calc()`函数接受一个计算表达式作为参数，这个表达式可以包含加法、减法、乘法和除法操作，甚至可以混合使用长度单位、百分比和`em`、`rem`等相对单位。例如，`calc...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
`calc()`函数允许在CSS中执行基本的算术运算，包括加法（+），减法（-），乘法（*）和除法（/）。例如，`width: calc(100% - 10px);`表示元素的宽度将占据其父元素的100%，但减去10像素。 当我们想要一个元素的高度...
CSS3 calc()会计算属性详解
09-27
下面将详细介绍`calc()`的使用方法、兼容性、基本理论以及注意事项。 ### 使用方法 `calc()`函数的标准语法如下： ```css property: calc(expression); ``` 其中，`property`是需要计算的CSS属性，如`width`、`...
css的calc()函数
weixin_47042966的博客
05-10 195
calc()的用法
CSS calc() 函数
小黄的博客
03-06 3071
CSS calc() 函数用法
使用calc()函数在CSS属性值时执行计算
aspire_cj的博客
06-11 831
在现实中，我们经常要动态调整相对整个画面的整体高度或者宽度 比如：我想设置一个div高度为整个屏幕的100% 再减去20px固定高度，这种如何实现呢？ 我们就可以适合用calc()函数调整了。使用方法 width: calc(100% - 20px); calc方法可以使用 加(+)减(-)乘(*)除(/) 注意：乘法，乘数中至少有一个是 number。 注意：除法，除数（/ 右面的数）必须是 number。 备注： ‘+’ 和 - 运算符的两边必须要有空白字符。 ‘*’ 和 / 这两个运算符前后不
CSS之calc用法
MISS_zhang_0110的博客
10-18 458
CSS之calc用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100% - 20px) 注：减号两边的空格 链接: https://blog.csdn.net/weixin_30918415/article/details/99
calc( )计算css属性值
lipeng_kaka的博客
08-20 3306
calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 calc(）语法： 加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是<number>类型的、被除数（/右面的数）必须是<number>类型的 calc()使用通用的数学运算规则，...
css学习记录十三:css函数（一）：calc()计算函数
吮指原味鸡的博客
11-04 85
这里写目录标题一、calc()的作用二、写法 一、calc()的作用 计算盒子的宽高 二、写法 div{ height:calc(100px - 20rem) } 需要注意的是运算符的两边一定要有空格
【CSS】浅谈CSS中的calc函数
码婆Doph
11-24 1301
在css中，我们常常需要计算功能。以前我们常常使用js来进行计算，然后布局，但是为了更符合MVC结构的概念，css中calc函数已经开始被广泛使用。calc函数允许进行任何长度值的计算，运算符包括“+”，“-”，“ * ”，“ / ”等。但是需要注意的是，运算符前后最好都要有一个空格。都是技术人员，下面，我将通过使用场景和代码来与大家共同探讨calc。场景一如图所示，图中的内容一旦超过了浮动元素的高
css calc怎么使用
05-19
CSS的calc()函数可以让你在样式中进行基本的数学运算，例如加、减、乘、除等等。它可以用于计算宽度、高度、边距、填充等值，使得我们可以更加灵活地控制页面布局。 使用 calc() 函数的语法如下： ``` width: calc(expression); ``` 其中，expression 是一个数学表达式，可以包含长度、百分比、数字和运算符。下面是一些使用 calc() 函数的示例： ``` /* 计算宽度 */ width: calc(100% - 20px); /* 计算高度 */ height: calc(50vh - 10px); /* 计算字体大小 */ font-size: calc(16px + 2vw); /* 计算边距 */ margin: calc(10px + 2vw) calc(20px - 2vh); /* 计算填充 */ padding: calc(5px + 1em) calc(10px - 0.5em); ``` 需要注意的是，calc() 函数只能用于长度值和百分比值，不能用于颜色、角度、时间等其他类型的值。同时，在使用 calc() 函数时，需要注意浏览器兼容性问题，建议在使用之前先检查浏览器支持情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值