calc()函数实现动态布局

最新推荐文章于 2023-11-29 14:54:45 发布
最新推荐文章于 2023-11-29 14:54:45 发布
阅读量423 收藏
点赞数 1
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42485707/article/details/119730029
版权

calc()函数可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

 

 

 本文来自于菜鸟教程

 

星羽xy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中的计算函数calc在网站布局中一个示例
01-19
calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活...
css3中的calc函数浅析
12-02
总的来说，CSS3的calc()函数为Web开发者提供了更精细的布局控制能力，能够动态计算并设置元素尺寸，解决了许多传统CSS难以处理的问题。掌握并善用calc()，可以提高页面布局的灵活性和响应性，让网站在各种屏幕尺寸下...
【CSS】calc 函数（动态计算长度值）
qq_45677671的博客
04-24 1106
文章目录基本用法 基本用法 calc() 函数用于动态计算长度值。 需要注意的是: 1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)； 2. 任何长度值都可以使用calc()函数进行计算； 3. calc()函数支持 "+", "-", "*", "/" 运算； 4. calc()函数使用标准的数学运算优先级规则； 示例： <!DOCTYPE html> <html> <head> <meta charset=
内联样式和js中使用calc方法
HOMEXS的博客
02-21 1661
:style="height:calc(100vh - ${bannerHeight}px)" div.style.height = "calc(100vh - " + (this.bannerHeight + 69) + “px)”;
calc()用于一行中中间内容自适应
liulei21的专栏
10-09 432
在面试前没有想过中间内容自适应的问题，在一次面试中考官问到知道左右两边的栏的宽度如何让中间的宽度自适应，但是回答的五花八门，回来后查了查使用css3中的calc（）  其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值...
calc()方法的使用
weixin_68531033的博客
01-11 1092
calc实现css中动态计算通过--height来绑定动态的高度。
css3中calc的使用
业余前端的职业经历
05-06 768
在我入坑前端第一次听着函数的使用还是听得是公司UI小姐姐说的，包括100vh,100vw的用法。 calc 用来计算自适应的页面元素的宽度用着很舒服。 比如我们俩边的边距我们知道 只是不确定元素的宽度 我们可以根据父元素减去两侧边距就可以计算出来 特别是一些比较麻烦点的修改,我们将复杂的运算的交给自己计算机 用法 calc( +/-/*// ) 注意计算的时候 俩个计算数字 必须 得和运算符...
CSS3的calc()做响应模式布局的实现方法
12-13
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和...
vue实现简单瀑布流布局
10-15
`px-container`确保了页面宽度的最大值，`.clearfix`类用于清除浮动，`.px-waterfall`定义了每列的宽度，通过`calc()`函数计算每个列的宽度。使用`:nth-child(3n+2)`选择器，我们可以为中间的列添加额外的间距，以...
CSS常用的两个函数
01-08
它们在网页设计和开发中扮演着重要角色，能够帮助我们实现更灵活、动态的布局和元素属性处理。 首先，让我们详细了解一下`calc()`函数。`calc()`允许我们在CSS中进行动态计算，尤其在处理尺寸时非常有用。例如，当...
行内块+calc+margin 三列布局
weixin_30267697的博客
08-28 199
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .main{font-size:0;} /* 去掉行内块受换行符的影响*/ .left{d...
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
最新发布
snowball的博客
11-29 8672
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
CSS3 的 calc()函数（为元素设置动态的属性值）【积累】
单枪匹码
11-05 2470
一、定义与用法： （定义这个东西都是大同小异的，我这里是取自菜鸟教程） calc是英文单词calculate（计算）的缩写，是CSS3新增的功能，用来指定元素的长度。比如说：你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值，为何说是动态值呢？因为是我们使用表达式计算得到的值。不过calc()最大的好处就是用在流体布局上，可以通...
vue 动态 style 计算 calc
weixin_45427064的博客
04-02 3967
动态 style calc
写页面常用的css特性：calc() vh vw ch和ex
Maci_yera的博客
08-02 2781
vh与vw calc() 与 less技巧
calc()方法
dingsongtuo4851的博客
10-31 510
calc()= calc(四则运算) 用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 转载于:https://www.cn...
内联css使用calc()写法 + 固定自定义导航栏
m0_68630350的博客
10-07 325
内联css使用calc()写法 + 固定自定义导航栏
calc（）使用记录、css换行、常用的几个特殊属性
i_am_a_div的博客
08-04 487
calc（）使用记录、css换行、常用的几个特殊属性
Vue项目中动态修改元素宽高的三种方式
热门推荐
06-21 1万+
一般用于父组件动态变换宽高,子组件需要同步修改宽高，我这里是用在了一个ElementUi弹窗上面，当页面大小发生变化后，动态修改弹窗的大小，我试着通过deep函数修改el-dialog__body的高度，但是不好用，因为我的style上面加了scoped，但是呢，在el-dialog__body的div上却没有data的hash值绑定，所以导致样式不生效，所以要把style的scoped属性去掉才可以：具体动态修改元素宽高的方法，大概有三种方式。
不用calc函数来实现同样的效果
06-06
当然可以，我们可以使用flex布局来实现同样的效果，不需要使用calc()函数。下面是一个不使用calc()函数的示例代码： ```html <!DOCTYPE html> .container { display: flex; flex-direction: column; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值