calc()函数实现动态布局

最新推荐文章于 2023-10-07 17:52:50 发布
最新推荐文章于 2023-10-07 17:52:50 发布
阅读量408 收藏
点赞数 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-13
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和...
内联css使用calc()写法 + 固定自定义导航栏
最新发布
m0_68630350的博客
10-07 294
内联css使用calc()写法 + 固定自定义导航栏
【CSS】calc 函数（动态计算长度值）
qq_45677671的博客
04-24 1054
文章目录基本用法 基本用法 calc() 函数用于动态计算长度值。 需要注意的是: 1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)； 2. 任何长度值都可以使用calc()函数进行计算； 3. calc()函数支持 "+", "-", "*", "/" 运算； 4. calc()函数使用标准的数学运算优先级规则； 示例： <!DOCTYPE html> <html> <head> <meta charset=
内联样式和js中使用calc方法
HOMEXS的博客
02-21 1570
:style="height:calc(100vh - ${bannerHeight}px)" div.style.height = "calc(100vh - " + (this.bannerHeight + 69) + “px)”;
calc()用于一行中中间内容自适应
liulei21的专栏
10-09 426
在面试前没有想过中间内容自适应的问题，在一次面试中考官问到知道左右两边的栏的宽度如何让中间的宽度自适应，但是回答的五花八门，回来后查了查使用css3中的calc（）  其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值...
calc()方法的使用
weixin_68531033的博客
01-11 1051
calc实现css中动态计算通过--height来绑定动态的高度。
css3中calc的使用
业余前端的职业经历
05-06 756
在我入坑前端第一次听着函数的使用还是听得是公司UI小姐姐说的，包括100vh,100vw的用法。 calc 用来计算自适应的页面元素的宽度用着很舒服。 比如我们俩边的边距我们知道 只是不确定元素的宽度 我们可以根据父元素减去两侧边距就可以计算出来 特别是一些比较麻烦点的修改,我们将复杂的运算的交给自己计算机 用法 calc( +/-/*// ) 注意计算的时候 俩个计算数字 必须 得和运算符...
CSS常用的两个函数
01-08
calc() 函数用于动态计算长度值。 语法： calc(数学表达式)， 如：width:calc(100% – 20px); .calc{ font-size: 10vw; overflow: hidden; } .calc .left{ float:left; width:calc(100% - 20vw); ...
CSS3 Calc实现滚动条出现页面不跳动问题
12-13
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和...
巧用CSS3的calc()宽度计算做响应模式布局的方法
01-19
于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、...
行内块+calc+margin 三列布局
weixin_30267697的博客
08-28 197
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .main{font-size:0;} /* 去掉行内块受换行符的影响*/ .left{d...
CSS3 的 calc()函数（为元素设置动态的属性值）【积累】
单枪匹码
11-05 2403
一、定义与用法： （定义这个东西都是大同小异的，我这里是取自菜鸟教程） calc是英文单词calculate（计算）的缩写，是CSS3新增的功能，用来指定元素的长度。比如说：你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值，为何说是动态值呢？因为是我们使用表达式计算得到的值。不过calc()最大的好处就是用在流体布局上，可以通...
vue 动态 style 计算 calc
weixin_45427064的博客
04-02 3878
动态 style calc
calc()方法
dingsongtuo4851的博客
10-31 507
calc()= calc(四则运算) 用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 转载于:https://www.cn...
calc（）使用记录、css换行、常用的几个特殊属性
i_am_a_div的博客
08-04 467
calc（）使用记录、css换行、常用的几个特殊属性
写页面常用的css特性：calc() vh vw ch和ex
Maci_yera的博客
08-02 2734
vh与vw calc() 与 less技巧
Vue项目中动态修改元素宽高的三种方式
06-21 9642
一般用于父组件动态变换宽高,子组件需要同步修改宽高，我这里是用在了一个ElementUi弹窗上面，当页面大小发生变化后，动态修改弹窗的大小，我试着通过deep函数修改el-dialog__body的高度，但是不好用，因为我的style上面加了scoped，但是呢，在el-dialog__body的div上却没有data的hash值绑定，所以导致样式不生效，所以要把style的scoped属性去掉才可以：具体动态修改元素宽高的方法，大概有三种方式。
CSS3的calc()函数在布局中的使用
SCU_Cindy
08-01 1469
使用背景
不用calc函数来实现同样的效果
06-06
当然可以，我们可以使用flex布局来实现同样的效果，不需要使用calc()函数。下面是一个不使用calc()函数的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .bird { position: relative; width: 50px; height: 50px; background-color: #ffcc66; border-radius: 50%; animation: bird-fly 2s ease-in-out infinite alternate; } .circle { position: absolute; width: 40px; height: 40px; border: 2px solid #ccc; border-radius: 50%; animation: circle-rotate 4s linear infinite; } .circle1 { top: -150px; right: 50%; transform: translateX(110px); } .circle2 { top: calc(50% - 20px); left: -150px; transform: translateY(-110px); } .circle3 { bottom: -150px; right: 50%; transform: translateX(110px); } @keyframes circle-rotate { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } @keyframes bird-fly { from { transform: translateY(0) rotateZ(0deg); } to { transform: translateY(-100px) rotateZ(360deg); } } </style> </head> <body> <div class="container"> <div class="bird"></div> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> </div> </body> </html> ``` 在上面的代码中，我们使用了flex布局来实现元素的居中和垂直居中，不需要使用calc()函数计算位置。同时，我们使用了transform属性来调整圆圈的位置和旋转效果，通过设置top、bottom、left、right等属性来调整元素的位置。其他的样式和动画效果与之前的代码相同。 注意：在使用flex布局时，需要确保浏览器支持flex布局，否则可能会出现布局问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值