Firefox 4: CSS3 calc

最新推荐文章于 2022-07-22 11:16:34 发布
最新推荐文章于 2022-07-22 11:16:34 发布 · 308 阅读 · 0
文章标签：

#Firefox

本文介绍 CSS3 中的 calc() 函数使用方法，包括加、减、乘、除等基本运算，并展示了如何结合 max 和 min 函数来实现更复杂的样式调整。通过实例演示了如何设置元素宽度和高度。
calc() 这样用：

#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}


目前支持
+, -, *, /, mod, min, and max

这样用：
div {
height: -moz-min(36pt, 2em);
width: -moz-max(50%, 18px);
}


详细信息请猛击：
[url]http://hacks.mozilla.org/2010/06/css3-calc/[/url]
iteye_19781
关注
foxy-calc:Firefox的广泛数学计算器插件
05-24
狡猾的计算 Firefox计算器插件 特征 直观的用户界面 将用户输入传递到 归因 Addon使用 ，感谢您在该库中的工作！
详解CSS 3 中的 calc() 方法
09-24
在浏览器支持方面，`calc()`已经在主流桌面浏览器中得到广泛支持，包括Chrome、Firefox、Safari、Edge和Internet Explorer 9及以上版本。然而，早期的移动浏览器可能对其支持有限，所以在编写涉及`calc()`的代码时，...
火狐不支持calc吗？
zbailing的博客
09-03 672
今天使用 css calc属性时发现了一个bug，max-height: calc(100% - 100px); 在chrome里显示正常，但在火狐里不好使。 然后改成了 max-height: calc(100vh - 100px); 就好使了。 推测是兼容性问题，但单独拿出测试却好使。。 ...
旧版火狐浏览器使用calc()计算元素高度（height）
一条咸鱼的blog
12-10 1137
最近在适配比较老的火狐浏览器，发现了一个问题，给元素设置宽度和高度时，使用了calc（）方法，但是宽度生效了，高度却没有，原代码是这么写的： width: calc(100% - 40px); height: calc(100% - 40px); 试过了-moz-calc()方法，也不生效，在查阅了一些资料后，这样改就可以了 height: calc(100vh - 40px); 注：我的火狐版本是52.9（32位） ...
css 计算calc（）兼容火狐
YGang优快云的博客
07-22 538
css 计算calc（）兼容火狐
css3动画火狐不支持的_Firefox 3的内部渲染CSS
culuo8053的博客
07-25 296
css3动画火狐不支持的I was poking around Firefox's file and folder structure today. I've been doing research on how each browser vendor chooses to render CSS and, more specifically, what their default CSS sty...
CSS3 calc()会计算属性详解
09-27
`calc()`函数的兼容性在现代浏览器中已经相当好，包括Chrome、Firefox、Safari、Edge和Internet Explorer 9及更高版本。不过，对于较旧的浏览器，可能需要使用其他技术（如JavaScript）来实现类似的效果。 ### 基本...
hp12:HP 12C Calc的在线版本
04-07
8. 兼容性：由于是基于Web的，这个在线版本的HP 12C应该能在各种操作系统和浏览器上运行，包括Windows、MacOS、Linux，以及Chrome、Firefox、Safari等主流浏览器。 9. 持续更新与维护：作为开源项目，"hp12"可能会...
CSS的计算大师：calc()函数全解析
07-24
`calc()`函数得到了现代浏览器的广泛支持，包括但不限于 Chrome、Firefox、Safari、Edge 和 Opera。对于旧版浏览器，可能需要使用其他方法来实现类似的效果。在使用`calc()`函数时，建议检查目标用户的浏览器兼容性...
css3中的calc函数浅析
12-02
calc()函数在现代浏览器中得到了广泛支持，包括IE9+、Firefox 4.0+、Chrome 19+和Safari 6+。然而，在移动设备上的支持情况可能不尽相同。在实际应用中，可能需要添加浏览器厂商前缀（如 `-webkit-`）以确保更好的...
zoom不兼容火狐的解决，及calc的四则运算
huakaiwuxing的博客
02-26 3059
1. zoom不兼容火狐浏览器，所以要用transform: scale(0.75); transform-origin: bottom left;及-moz-transform: scale(0.75); -moz-transform-origin: bottom left;来代替zoom在火狐的不兼容性；2. calc: 例如：width: calc(12% + 12px)  calc可进行标...
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
热门推荐
飘过的春风
10-13 5万+
“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。” 我们想要实现页面自适应布局时，通常因为margin的存在，而比较麻烦；有时候想要实现宽度自适应的输入框时，也因为padding或margin的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效果不一致。css3新添加属...
浏览器中使用calc不识别
weixin_30925411的博客
12-22 1143
　　在使用css3中的calc运算函数时，发现浏览器不识别，当时代码是这样的 width:calc(100%-50px); 　　经过查询官网原来发现这里有个需要注意的地方就是在进行加减运算的时候，必须在运算符前后加空格 width:calc(100% - 50px); 这样就可以了，乘除运算时则没这个要求。 转载于:https://www.cnblogs.com/xiaos...
关于火狐和谷歌浏览器中遇到的一些兼容问题
百岁如流富贵冷灰的博客
07-26 7207
最近工作实在太多，已经有一个月没有更新博客了，还好平时有记录一些问题及解决方法的习惯，下面上这一个月下来我踩过的坑吧 日期 07-02     在p标签内如果嵌套了div标签的话，那么会引起浏览器的不正确渲染，表现为div不在p标签内部，而是和p标签平级 日期 07-12     如果设置了select标签的color为black option为white的话，那么火狐下的option为b...
css3的calc()使用
木神不木的博客
03-06 2627
css3的calc()使用 一、calc()可以做些什么？    calc()可以给一个元素做加减乘除运算，使用百分比、em、rem和px单位计算出元素的宽高。 eg..div{ width:calc(50% + 2em);//运算符号左右要空一格 } 二、运算规则    calc()使用通用的数学运算规则，但是也提供更智能的功能： 1、使用“+”、“-”、“*
火狐height100%的坑.
weixin_41887529的博客
01-11 1207
火狐的body不需bai要height:100%，因为默认就是du满屏的。其它的对象如果要d支持height:100%的话，那就需要它的父对象有一个height:(Number)px的属性 所以css样式的高度要连贯(每一层都要写). 如果不连贯,height:100%不自动撑开,样式会炸裂!!! ie都没这问题,太扯了. ...
CSS3的calc()使用
weixin_33966365的博客
09-13 1434
2019独角兽企业重金招聘Python工程师标准>>> ...
关于css3中@keyframes在火狐浏览器下的兼容问题（我是来提问的）
猿来是你呀
07-16 3920
关于firefox下@keyframes的兼容问题。
CSS中 calc可以计算vh和rem的差值吗
最新发布
08-07
### 关于 `calc()` 计算 `vh` 和 `rem` 差值的问题 #### 直接答案 **可以**。CSS 的 `calc()` 函数完全支持不同单位之间的混合计算，包括视口单位（`vh`）和相对单位（`rem`）的差值运算。 --- ### 一、基本用法示例 #### 有效语法： ```css .element { /* 视口高度减去2个rem单位 */ height: calc(100vh - 2rem); /* 更复杂的计算 */ padding: calc(5vh + 3rem); } ``` #### 计算规则： 1. 浏览器会先分别解析 `vh` 和 `rem` 的实际像素值 2. 然后执行减法运算 3. 最终结果转换为像素值应用 --- ### 二、注意事项 1. **运算符两侧必须留空格**： ```css /* 正确写法 */ calc(100vh - 2rem); /* 错误写法（会导致失效） */ calc(100vh-2rem); ``` 2. **嵌套计算支持**： ```css width: calc(calc(100vw - 10rem) / 3); ``` 3. **单位不可简化**： ```css /* 错误：不能抵消单位 */ calc(100vh - 100px - 2rem); /* 必须保留所有单位 */ ``` --- ### 三、实际应用场景 #### 场景1：固定页脚布局 ```css .main-content { height: calc(100vh - 6rem); /* 总高度减去页头页脚 */ } ``` #### 场景2：响应式间距 ```css .article { margin: calc(2rem + 5vh) calc(1rem + 2vw); } ``` #### 场景3：网格间隙计算 ```css .grid { gap: calc(0.5rem + 1vh); } ``` --- ### 四、浏览器兼容性 | 浏览器 | 支持版本 | 特殊情况 | |---------------|----------|---------------------------| | Chrome | 26+ | 完全支持 | | Firefox | 16+ | 早期版本需加-moz-前缀 | | Safari | 7+ | 需要-webkit-前缀（6.1+） | | Edge | 12+ | 完全支持 | | IE | 9+ | 部分限制（不支持vw/vh计算）| #### 渐进增强写法： ```css .element { height: 90vh; /* 回退方案 */ height: calc(100vh - 2rem); } ``` --- ### 五、高级技巧 1. **CSS变量结合计算**： ```css :root { --header-height: 4rem; } .content { height: calc(100vh - var(--header-height)); } ``` 2. **最小高度保护**： ```css .container { min-height: calc(100vh - 10rem); max-height: calc(100vh - 5rem); } ``` 3. **视口比例计算**： ```css .hero-image { width: calc(50vw - 3rem); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值