使用css3的calc中的一个会出现的问题

最新推荐文章于 2024-01-29 16:30:36 发布
原创 最新推荐文章于 2024-01-29 16:30:36 发布 · 401 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #calc

本文介绍了一个关于 CSS3 中 calc 函数使用的细节问题，即在表达式中空格的重要性。通过一个具体的例子说明了如何正确书写 calc 函数以避免布局出现错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

width:calc(100%-30px);

这样写会失效；

必须写成：width: calc(100% - 30px); 这里css3莫名其妙地对空格敏感了，要注意。

CSS样式小结
Tessa_zzl的博客
08-14 323
CSS样式小结 首行缩进：em-字符单位 text-indent:20px; text-indent:2em; 阴影： *20px：水平阴影的位置 *10px：垂直阴影的位置 8px：模糊距离 5px：阴影的尺寸 outset/inset：外阴影/内阴影 box-shadow: 20px 10px 8px 5px #888888 inset; 文字超出盒子长度，后面显示… width:200...
css calc不生效 px 不识别问题记录
kis_wuyan的博客
08-05 782
css calc 失效问题
calc无效
Zxiuping的博客
03-10 1234
width:calc(100%-100px);无效是因为有两个原因：1、必须加上单位，2、必须在运算符左右用空格隔开， 例如：width:calc(100% - 100px);
css属性设置calc后(动态计算)，不生效的问题
engineer_why的博客
06-12 2975
的左右两边需要空格，，没有空格不生效。为了统一，/ 和 * 最好都带上空格。父元素需设置宽高，若没有可设置100%在书写calc语法时，运算符(
CSS3 - Less中calc计算属性
idomyway的博客
06-18 3847
前言     在写普通的CSS样式时，计算属性的写法如下： .box { widhth: 100%; height: calc(100% - 50px); } Less中的写法 .box { width: 100%; height: calc(~"100% - 30px"); // 效果相同 height: ~"calc(100% - 60px...
css 让 width = （100% - 30px）
pig_ning的博客
01-29 809
css 让 width = （100% - 30px）
CSS3 Calc实现滚动条出现页面不跳动问题
09-24
在处理滚动条出现导致的页面跳动问题时，`calc()`函数能提供一个优雅的解决方案。当页面内容逐渐增加，原本没有的滚动条会出现，这会导致固定宽度居中对齐的布局向左偏移一个滚动条的宽度。为了防止这种偏移，可以...
CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
css3中的calc函数浅析
09-22
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
CSS3图片模糊处理和计算盒子宽度calc函数
m0_61547956的博客
04-03 717
模糊处理：filter:blur(4px)数值越大越模糊。 需求：不论父盒子变大变小，都希望子盒子永远比父盒子宽度小30px，我们可以使用calc函数 width:calc(100%-30px)。
CSS calc() 使用指南
p1967914901的博客
10-19 7739
你听说过或使用过 CSS 的 `calc()` 函数吗？也许你听说过它，但从未尝试过，或者尝试过使用它，但在使用过程中遇到了一些问题。这篇指南可以帮助你。
calc()无效问题
二木成林
01-22 1万+
width:calc(100%-100px);——无法起作用 width:calc(100% - 100px);——可以使用了 calc()计算中的两个值必须同运算符号之间存在空格，否则不会起作用
CSS3中width属性的calc()使用
热门推荐
Zhangxi
04-11 2万+
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元 素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这 些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将 会把元素盒子撑破（标准模式下，除I
在css中实现width:100%-100px，即100%宽度减去100px
一只小辣鸡
04-30 2万+
尝试了很多，最简单的办法是加一个margin-left： .class-name{ width: 100%; margin-left: 100rpx; }
页面底部出现大片空白
LM18826013676的博客
05-24 1968
第一次遇到这种情况，通过删除多余的html 解决了。 转载于:https://www.cnblogs.com/Isabel4u/p/6900393.html
css属性中使用数学计算——calc()函数
weixin_41309331的博客
08-24 1597
首先要说明一下，这篇博客关于calc的相关知识，大多数来自于这位前辈的博客：https://blog.youkuaiyun.com/wjnf012/article/details/80227644 为了能让我自己看得更顺心，我稍作修改。 作为一名初出茅庐的前端实习生，在工作中 ...
关于CSS3的calc()计算的坑！
qq_40610760的博客
09-12 593
错误写法： 正确写法：写空格！
css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
weixin_33840661的博客
03-17 724
 最近项目遇到一个布局需求，头部高度固定，页面需要刚好占满一屏幕。 如下示意图：      方法：使用calc .wrap{ position: relative; margin-left: 24px; margin-right: 24px; min-height: calc(100% - 123px); } calc()说明： css3 的 calc()函数...
oracle 视图有感叹号,中间带很多！感叹号的地方怎么就是执行不到这里哦？
weixin_42469706的博客
04-05 1265
CREATE OR REPLACE PROCEDURE XYGMES.proc_sm_rpt_cbjs_calc (v_sgid IN VARCHAR2,v_mat_cat IN VARCHAR2,v_mat_caltype IN VARCHAR2,v_sg_weight IN ...
css中calc怎么使用
最新发布
07-19
`calc()` 是 CSS 中的一种动态计算函数，允许在 CSS 属性中进行数学运算，并支持多种单位的混合使用（如 `px`、`em`、`%` 等），从而实现更加灵活的布局控制 [^3]。它可以在 `<length>`、`<percentage>`、`<number>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值