css3 calc计算使用注意事项

最新推荐文章于 2023-09-30 22:10:15 发布
最新推荐文章于 2023-09-30 22:10:15 发布
阅读量138 收藏
点赞数 2
文章标签： calc css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42163123/article/details/116531262
版权
本文详细介绍了CSS中calc()函数的用法，强调了在进行数学运算时，减号前后需要添加空格以确保表达式的正确解析。示例展示了如何使用calc()设置元素高度为视口高度减去100像素，帮助开发者避免样式失效的问题。
摘要由CSDN通过智能技术生成

height:calc(100vh-100px);

上面的减符号前后需要有空格（运算符都需要空格），不然会导致无效！

下面的才可以正常计算

height: calc(100vh - 100px);

web前端的搬运工
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初探CSS3中的calc()功能
09-25
在CSS3中，`calc()`函数的引入为开发者提供了一种动态计算长度值的方法，极大地增强了样式表的灵活性。它允许我们在样式表中执行基本的数学运算，以确定元素的尺寸，如宽度、高度、内边距或外边距。这在创建响应式...
css3中的calc函数浅析
12-02
在CSS3中，`calc()`函数是一个强大的计算工具，允许开发者在样式表中执行动态长度计算。它为CSS带来了更灵活的布局控制，特别是对于响应式设计而言，calc()的功能显得尤为重要。尽管它看上去与JavaScript函数相似，...
height: calc(100vh - 100px)；
最新发布
fury的博客
09-30 2487
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
网页前端div的高度设置
反手一个bug的博客
11-18 4441
首先我们要区分关于CSS里height的一个误区，width：100%是保持和父块宽度一样，但是有的时候我们设置height:100%会无效，为什么呢 因为我们在div设计时会控制width，但是一般不会去设置height，除非你想要一个绝对布局另当别论，不然我们都会让里面的内容去自适应它的height，这就是height：100%无效的原因，你不能对一个自适应高度的父类去保持和它一样的高度，父类...
实现缩小pc屏幕，表格完整展示
weixin_63896561的博客
10-09 597
pc端自适应高度
vw vh
qq_40774743的博客
08-23 418
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。   （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表...
CSS3新vw, vh单位
服务好姐qa
12-17 2万+
From: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 /* 既然vw, vh是视区相
CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
微信小程序购物车、父子组件传值及calc的注意事项总结
12-09
在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有...
计算
02-10
CSS计算还涉及到一些特定的限制和注意事项。例如，`calc()`不支持负值作为单位，但可以计算出负值结果。另外，某些CSS属性可能不支持`calc()`，因此在使用时需要查阅文档以确认兼容性。 总的来说，CSS中的计算能力...
css3自适应布局单位vw,vh详解
qq_36453396的博客
09-18 800
视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight..
100vh和100vw是什么意思？
qq_42931285的博客
03-28 1万+
vw/vh 目标：能够使用vw单位设置网页元素的尺寸 它们是 相对单位，对视口的尺寸计算结果 l vw：viewport width 1vw = 1/100视口宽度 l vh：viewport height 1vh = 1/100视口高度。 我们若想刚好实现一屏的话可以用100vh来实现，可以适用于不同的分辨率。 *注：vw和vh在同一个选择器中不能同时出现，同一选择器中只能出现一个。 <div class="box2"></div> .box2 { width: 1
css3自适应单位vw,vh详解
夏天的博客
02-02 1891
在CSS3中，新增了很多长度单位，今天就来谈谈： vw、vh、vmin、vmax 1.什么是视口？ 在客户端，视口指的是浏览器的可视区域； 而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小.
height: calc(100% - 96rpx)
baozaobenren的博客
07-15 907
height: calc(100% - 96rpx);高的百分之百减去96rpx，学到了
在css中实现width:100%-100px，即100%宽度减去100px
一只小辣鸡
04-30 2万+
尝试了很多，最简单的办法是加一个margin-left： .class-name{ width: 100%; margin-left: 100rpx; }
css一屏布局展示
小糖穿越火线
06-11 1090
方法一 设置html的高度为100%，然后百分比高度。 <style> html, body { height: 100%; margin: 0; padding: 0; } .wrap { height: 100%; } .top { height: 20%; } .content { height: 50%; } .footer { height: 30%; } </style&
div 动态高度
03-22 603
height: calc(100vh - 100px); Css3特性，表示 系统高度减100px
height:100vh
热门推荐
qq_40001322的博客
06-30 4万+
1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点...
js中怎么使用css的calc计算是多少
06-07
在JavaScript中，可以通过获取元素的CSS属性值和计算后的值来使用CSS的calc函数。具体步骤如下： 1. 获取元素的CSS属性值：可以使用`window.getComputedStyle`方法获取元素的计算后的CSS属性值，例如： ```javascript const el = document.getElementById('my-element'); const style = window.getComputedStyle(el); const width = style.getPropertyValue('width'); ``` 2. 计算CSS属性值：可以使用CSS的`calc`函数进行计算，例如： ```javascript const newWidth = `calc(${width} + 10px)`; ``` 这样就可以将获取到的CSS属性值和`calc`函数结合起来进行计算，得到最终的CSS属性值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值