css 在原来宽度的基础上加上或减去宽度

原创 已于 2024-01-15 15:00:18 修改 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

于 2022-01-25 16:07:44 首次发布
本文介绍了一种使用 CSS 的 calc 函数来精确控制元素宽度的方法。通过 -webkit-calc, -moz-calc 和 calc 函数，可以实现跨浏览器的兼容性，并确保元素宽度能够根据特定比例和像素值进行动态调整。 
width:-webkit-calc(25% - 1px); 
width:-moz-calc(25% - 1px); 
width:calc(25% - 1px);

汪叽在羡
关注
css-calc数值计算(加 减 乘 除)
岂不闻
03-06 1972
css-calc数值计算(加 减 乘 除)
防止CSS网页布局错位 CSS宽度计算
09-25
6. 从错位问题入手进行兼容性检查：当发现网页在某些浏览器或设备上出现布局问题时，从宽度计算入手进行问题定位和解决，能够有效提高网页的兼容性。 在进行网页布局和设计时，通过正确地计算和设置元素的宽度，...
width减法css3,CSS WIDTH
weixin_29451671的博客
08-03 496
This property specifies the width of an element’s rendering box for block-level and replaced elements. Negative values are not allowed.In addition to the ‘width’ property, two other properties – ‘min-...
CSS基础（八）-- 边框及其他样式之增加宽度
08-29 251
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。 #------------------------------------------------我是可耻的分割线------------------------------------------- <!DOCTYPE html> <html lang="en"> <hea...
css 宽度 百分比与数值加减
Fly to sky
05-08 5472
width:calc(100%-8px);width:-webkit-calc(100% - 16px);width:-moz-calc(100% - 16px);注意减号 前后有空格
在css中实现width:100%-100px，即100%宽度减去100px
热门推荐
一只小辣鸡
04-30 2万+
尝试了很多，最简单的办法是加一个margin-left： .class-name{ width: 100%; margin-left: 100rpx; }
CSS实现在宽度906px的基础上减去同一行元素的max-content宽度
最新发布
03-18
好的，用户的问题是关于如何实现一个CSS布局，固定宽度906px的基础上动态减去同一行其他元素的最大内容（max-content）宽度。首先，我需要理解用户的需求。用户希望父容器总宽度为906px，其中某个子元素的宽度是父...
css实现右侧固定宽度 左侧宽度自适应
09-24
【CSS布局实现】在网页设计中，经常需要创建一种布局模式，使得页面右侧部分具有固定宽度，而左侧部分根据浏览器窗口大小自适应调整宽度。这种布局模式在许多网站，包括博客园的一些默认主题中非常常见。通常，固定...
页面宽度自适应 jquery动态设置css样式
09-25
具体操作是获取当前网页可见区域的宽度，并减去对话框的宽度，然后将减去后的宽度应用于页面的某个元素上。通过这种方式，页面会“右漂浮”，使得对话框能够正确地与页面并列显示。然而，这种方法会改变原来希望实现...
CSS设置HTML元素的高度与宽度的各种情况总结
12-11
1.元素不设宽度第一种情况：元素为文档流中元素<!– 父元素宽度为100px –> <div xss=removed>dd</div></div> <!– 父元素宽度为200px –> <div xss=removed>dd</div></div> <!– 父元素不设宽度，继承...
CSS3中使用calc()设置浏览器宽度和高度减去固定值的写法
元仙僧的博客
08-04 9177
设置宽度：width:calc(100vw - 123px); 说明：1、vw是width of view(port)的缩写； 2、100vw表示百分之百的视图宽度； 3、123px是需要减去的宽度； 4、减号的两边必须都有至少一个空格。 设置高度：height:calc(100vh-123px); 说明：1、vh是height of view(port)的缩写； 2、100vh表示百分之百的视图高度； 3、123px是需要减去的高度； 4、同理减号的两边必须都有至少一个空格。 注意：切勿写成 calc(1
css中width
wochuailimin的专栏
10-02 763
<br />在css中的width和height指的是内容区域的宽度和高度，增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<br />假设框的每个边上有10px的margin和5px的padding，如果希望这个元素框达到100px，就需要将内容的宽度设置为70px，如图所示：<br /> <br /><br /> <br /> <br /><br />此图说明，元素框和内容的width与padding和margin数值之间的关系。Padding和margin改变，如果元素框的w
css3中 百分比宽度减去固定宽度的写法
nobug12138的博客
04-13 9994
div{ /*实现了宽度为父容器宽度减去固定的300像素*/ width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); width:calc(100% - 300px); }
calc()函数 css中用100%的宽度/高度，减去px
slice_93的博客
05-14 3798
注意： 1. 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2. 任何长度值都可以使用calc()函数进行计算； 3. calc()函数使用标准的数学运算优先级规则； 4. 它支持 “+”, “-”, “”, “/” 运算* div{ height: calc(100% - 114px); } ...
css3中 百分比宽度减去固定宽度的写法.
King Saj
08-07 1473
工作中用到,百分比宽度减去固定宽度的写法记录一下: 使用场景:宽度100%-固定值布局.(高度设置同理) width:calc(100% - 300px);// height:calc(100% - 300px);
css3实现百分比宽度减固定宽度展现
Forrest_Chen的专栏
07-26 2112
使用css3的calc body { width: 100%; max-width: 500px; margin: 0 auto; } .content { background: yellow; /*实现了宽度为父容器宽度减去固定的300像素*/ width:-webkit-calc(100% - 300px); width:-moz-calc
css使用百分比(%)减去固定宽度的写法
美奇软件开发工作室
09-26 769
<style type="text/css"> .box{ /*实现了宽度为父容器宽度减去固定的100像素*/ width:-webkit-calc(100% - 100px); width:-moz-calc(100% - 100px); width:calc(100% - 100px); } </style> ...
html距边框位置为-1px,解决移动端1px边框的问题 border.css
weixin_34101914的博客
06-09 292
因为移动端一些设备物理像素和显示像素有区别，如果直接使用border:1px的话，在某些屏幕上变成了2px甚至3px。border.css就是为了解决这个问题诞生的。首先引入border.css在需要显示1像素border的区块上直接添加样式即可.border, //上下左右.border-top, //上.border-right,//右.border-bottom,//下.border-le...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值