CSS3中width属性的width: calc(100% - 20px)； 使用问题

最新推荐文章于 2024-02-21 11:23:31 发布
原创 最新推荐文章于 2024-02-21 11:23:31 发布 · 2.8k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍 CSS3 中的 calc() 函数，它允许动态计算元素的宽度或其他尺寸属性。通过简单的数学运算，例如加减乘除，可以实现更灵活的布局调整。

目的是动态改变宽度/高度的变化，适配问题。

width: calc(100% - 20px); 

css3 的 calc()函数。

这里的意思是设置宽度比100%的宽度少20px。

calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
CSS3中width属性的width: calc(100% - 20px); 使用问题
鸡血博客
12-26 2万+
目的是动态改变宽度/高度的变化，适配问题。 width: calc(100% - 20px); css3 的 calc()函数。 这里的意思是设置宽度比100%的宽度少20px。 calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； ...
width:calc(100% - 20px) 无效
qq_36648885的博客
06-13 4047
** width:calc(100% - 20px) 无效 在最近做项目的时候，在设置div的宽度的时候，发现width:calc(100%-20px)没有效果，这里在console端显示的是这样的 一开始我以为是其他的地方设置的width将他覆盖了，但是我把它改成90%就生效了。说明不是被覆盖。在探索了很久以后，我发现竟然是**减号两边没有加空格！！！**啊~多么不可原谅的错误 总结： 错误写法：calc(100%-20px) 正确写法：calc(100% - 20px) ...
CSS样式中width : calc ()函数
m0_62782752的博客
11-30 1857
目的是动态改变宽度/高度的变化，适配问题css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。calc()函数支持 + - * / 使用标准数学运算的优先级规则。calc()函数用于动态计算长度值。
CSS3中width属性的calc()使用
热门推荐
Zhangxi
04-11 2万+
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元 素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这 些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将 会把元素盒子撑破（标准模式下，除I
width: calc(100% - 20px);
weixin_30336061的博客
11-03 704
width: calc(100% - 20px); css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。 calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 转载于:https://www.cnblogs.com/pansidong/p/77801...
为什么我拉伸浏览器画布大小就会导致浏览器width: calc(100% - 20px); height: calc(100% - 20px); /* height: calc(100% - 74px); */ border-radius: 20px; background: var(--box-text-color); /* margin-left: 10px; */ /* margin-top: 22px; */ /* margin-bottom: 10px; */我这些都变了？
最新发布
09-09
你提到当浏览器画布大小发生变化时，这些样式似乎“变了”，这可能是由于 `calc(100% - 20px)` 的计算方式依赖于其父容器或视口大小，当画布拉伸时，`100%` 的基准发生变化，从而导致 `width` 和 `height` 的值也...
max-width: calc(100% - 24px);
08-01
`calc()` 函数允许开发者在 CSS 中进行动态计算，例如 `max-width: calc(100% - 24px)` 可以确保元素的最大宽度为父容器的 100% 减去 24 像素，通常用于为边距、内边距或固定宽度的子元素留出空间。在移动设备上，...
/* top: calc(50% - 315px); */ left: calc(100% -300px); width: 600px; height: 100%; z-index: 1000; position: fixed;想要元素靠右怎么改
03-21
用户提供的CSS代码中有一些错误，比如`left: calc(100% -300px);`缺少空格，而且他们可能希望元素紧贴右侧，而不是留出空间。 首先，我需要分析用户当前的代码。他们的元素使用了`position: fixed;`，所以定位属性...
width: calc(50% - 20px);
06-21
width: calc(100%-20px); /* 缺少空格 */ } ``` 2. **父元素尺寸限制**：如果希望子元素的宽度基于父元素的尺寸计算，则父元素必须明确指定高度或宽度。否则，`100%` 的计算可能会失效[^4]。 3. **支持的运算...
宽度100%-20px ,css样式设置超出部分...
weixin_30421809的博客
01-12 257
不能直接写，要写成： calc(100% - 20px) 注：减号两边的空格 css样式设置超出部分... span{ width:88%;white-space:nowrap;text-overflow:ellipsis; overflow: hidden; } span:after{ content: "..."; width: ...
height:calc(100% - 20px);
陈熙之的博客
07-22 6307
记录一下，免得忘记了。 css里高/宽有时候按照百分比计算后，需要减掉对应的高度/宽度，避免用js去计算。
CSS3自动计算宽度calc()函数
weixin_43983960的博客
07-05 3787
定义与用法 calc() 函数用于动态计算长度值 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 语法 此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。 width: calc(100% - 80
calc()
qq_27851967的博客
09-26 675
。。。。。。。。 才知道CSS有一个可以计算的函数 calc() calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； #div1 { wi...
CSS 中的 calc() 函数
qq_43730272的博客
02-21 2428
在这个例子中，容器的宽度将是视窗宽度的50%，并且减去20像素的空间。通过使用vw和vh单位，容器的大小会根据视窗的大小动态调整，从而实现响应式设计。calc()函数是CSS3中的一个强大特性，可以用于在CSS属性中进行数学运算。在上述代码中，我们使用 calc() 函数来计算 .container 容器的宽度。上述例子中，标题的字体大小会根据视窗宽度自动调整，同时保持与基准字体大小（1rem）的比例关系。上述例子，盒子的宽度和上边距都会根据父元素宽度的50%进行计算，并且保持宽高比为1：1。
css中使用calc()计算宽高
liujiujiang的博客
12-19 9889
calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使...
CSS 宽高度百分比数减去固定像素值的写法（例：100%-20px）
安琦科技
02-25 2060
做个记录，也能够帮助恰好看到这篇文章的人。 经常做布局的时候遇到加减距离。 height:calc(100% - 20px); 注意：减号两边一定要打空格，不然会失效 这个地方我就遇到问题了，查了好久的资料才解决。 ...
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
snow的博客
11-29 1万+
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
CSS 宽高度百分比数减去固定像素值的办法（例：100%-20px）
楚峡云归的博客
05-27 2万+
做个记录，也能够帮助恰好看到这篇文章的人 height:calc(100% - 20px); 注意：减号两遍一定要打空格，不然会失效 这个地方我就遇到问题了，查了好久的资料才解决。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兰舟轻帆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值