首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS calc: DIV,从其他类给出的任意宽度,减去px

CSS calc是一种CSS函数,用于在CSS中进行数学计算。它可以在CSS属性中使用,以便根据给定的表达式计算出最终的值。

在这个问答内容中,我们需要使用CSS calc来计算一个DIV的宽度,该宽度是从其他类给出的任意宽度减去一定的像素(px)。

首先,我们需要了解calc函数的语法。calc函数接受一个表达式作为参数,该表达式可以包含加法、减法、乘法和除法运算符。在我们的情况下,我们需要使用减法运算符。

下面是一个示例的CSS代码,演示如何使用calc函数来计算DIV的宽度:

代码语言:txt
复制
.div-class {
  width: calc(100% - 20px);
}

在上面的代码中,我们使用calc函数将DIV的宽度设置为其他类给出的任意宽度减去20像素(px)。这样,DIV的宽度将根据其他类的宽度动态计算。

对于这个问题,我们可以推荐腾讯云的云计算产品CDN加速服务。CDN加速服务可以帮助提高网站的访问速度和稳定性,通过将静态资源缓存到全球分布的CDN节点上,减少了用户请求的响应时间。您可以通过以下链接了解更多关于腾讯云CDN加速服务的信息:腾讯云CDN加速服务

希望以上信息能够帮助到您!如果您有任何其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS3 calc()详细介绍及使用

calc()字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)缩写,是css3一个新增功能,用来指定元素长度。...calc()能让你给元素做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV宽度值到底是多少...第三步,calc()运用 为了解决撑破容器问题,以前我们只能去计算div.box宽度,用容器宽度减去padding和border值,但有时候,我们苦于不知道元素宽度,比如说是自适应布局,只知道一个百分值...,但其他值又是px之类值,这就是难点,死卡住了。...知道总宽度是100%,在这个基础上减去boder宽度(5px * 2 = 10px),在减去padding宽度(10px * 2 = 20px),即"100% - (10px + 5px) * 2

1.5K10

5分钟实现漂亮CSS加载动画,纯CSS实现加载动画

video/BV1D5411H7Tc 2 知识点 2.1 CSS calc() 函数 CSS calc() 函数用于动态计算长度值。...外层阴影(开始时)改变阴影内侧阴影 2.4 CSS3 box-sizing 属性 Box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。...|border-box|inherit: 值 说明 content-box 这是 CSS2.1 指定宽度和高度行为。...也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定宽度和高度分别减去边框和内边距才能得到内容宽度和高度。...,可以改变任意样式任意次数 用百分比来规定变化发生时间,或用 from 和 to,等同于 0% 和 100% 动画常见属性 下面的表格列出了 @keyframes 规则和所有动画属性: ?

2.2K10
  • CSS calc() 使用指南

    然后我们用它来得到一个新宽度值,用一个单位乘以 1px 变成 3px。 3. 使用 calc() 转换字体大小 假设有这样一个场景,我们希望段落字体在桌面屏幕上很大,但在移动屏幕上很小。...嵌套 CSS 函数用于将屏幕宽度(100%)除以 5,然后将结果减去 20px,以得到我们最小宽度最终值。...对于我们高度,我们 100% 高度减去顶部和底部 margin 总值(20px),结果是一个完美对齐方框。...假设我们有两个按钮,每个按钮都有自己,像这样: button 1 <button...它们包括: 当我们处理 CSS 变量时 为了得到一个新值 用于不同单元之间计算,这是预处理器无法做到 定位 调整我们网站结构和其他元素 当我们想避免重复做相同计算时 我们在本文中介绍大多数示例都属于上述类别

    1.7K40

    css视口单位vw,vh妙用(embed篇)

    只需级行css就解决了 核心css代码,锁死视频比例16:9 embed { height: calc(9 * 100vw/ 16);width: 100%; } 宽度设置为100%,宽度铺满父级div...【假设父级div就是真个屏幕】,高度设置为屏幕宽度乘以9/16。...这里我得电脑端测栏加边距宽度大约是330px,手机端边距太小就忽略不算了 对应css就是这样 @media only screen and (min-width:768px){ embed{height...: calc(9 * 100vw/ 16);width: 100%;} } 其实就是对于电脑端设备,在宽度设置上,提前减去330px,然后在乘9/16。...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度

    1.1K30

    前端开发知识汇总--HTML、CSS

    A标签伪LVHA顺序来源: 根据元素CSS权重、特殊性分析,因为link、visited、hover、active权重特殊性均相同,所以根据使用习惯,要想让active始终有作用,需要让后者覆盖前者...选择当前元素下一个相邻元素(必须拥有相同父元素)。 less 编译calc计算属性发生错误,解决办法: 使用~符号标记计算属性,例如,计算宽度为100%减去定长,并平分7份值。...代码为: div{ @wid: calc(~"100% - 115px"); width: calc(~"@{wid} / 7"); } 消除table 中th,td空隙 border-collapse..."> // 本例中,box1为box22倍 flex中 子项设置了宽度后,优先以2个item宽度比例去显示。...移动端字体px=>rem px=>rem rem 参考html font-size 默认16px 假设设计图宽度750px , html{ font-size:calc(100vw/75) /

    71961

    CSS实现水平垂直居中1010种方式(史上最全)

    ,父元素和子元素 123123 复制代码 wp是父元素名,box是子元素名,因为有定宽和不定宽区别...,size用来表示指定宽度,下面是所有效果都要用到公共代码,主要是设置颜色和宽高 注意:后面不在重复这段公共代码,只会给出相应提示 /* 公共代码 */ .wp { border: 1px solid...点击查看完整DEMO absolute + calc 这种方式也要求居中元素宽高必须固定,所以我们为box增加size,HTML代码如下 123123 复制代码 感谢css3带来了计算属性,既然top百分比是基于元素左上角,那么在减去宽度一半就好了,代码如下 /* 此处引用上面的公共代码...(50% - 50px); left: calc(50% - 50px); } 复制代码 这种方法兼容性依赖calc兼容性,缺点是需要知道子元素宽高 点击查看完整DEMO absolute

    94320

    🎉中秋佳节:简单实现月饼雨

    ; left: calc(50% - 50px); width: 100px; height: auto; animation-name: redpacket-fall...这个div元素是相对定位,并且它宽度是100%,高度是视口100%,超过视口部分会被隐藏(由于overflow: hidden)。...CSS样式CSS部分定义了一个名为redpacket,这个元素是绝对定位,初始时在顶部(-100px),在页面中心(通过left: calc(50% - 50px)计算得出),宽100px,高自动...它有一个名为redpacket-fall关键帧动画,这个动画会让元素顶部落到底部,同时逐渐旋转和变透明。...createRedPacket函数:这个函数创建一个新元素(一个图像元素),名为“redpacket”,然后随机设置它在页面上位置(在窗口宽度减去100px和元素宽度中间位置),并给它一个随机阴影效果

    21220

    CSS 也能实现 if 判断?实现动态高度下不同样式展现

    简单而言,容器查询它给予了 CSS,在不改变浏览器视口宽度前提下,只是根据容器宽度或者高度变化,对布局做调整能力。...基于这个场景,我们假设我们有如下 HTML/CSS 结构: Lorem ipsum... .g-container { position: relative; width: 300px; height: 300px; resize:...方法二:clamp + calc 大显神威 上面效果核心在于: 如果容器高度大于某个值,显示样式 A 如果容器高度小于等于某个值,显示样式 B 那么想想看,如果拿容器高度减去一个固定高度值,会发生什么...,在元素 bottom 属性中,100% 表示是容器当前高度,因此 calc(100% - 200px) 含义就代表,容器当前高度减去一个固定高度 200px

    38350

    现代 CSS 解决方案:CSS 原生支持三角函数

    CSS 中,存在许多数学函数,这些函数能够通过简单计算操作来生成某些属性值,例如 calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。...设置元素宽度为 sin(30deg) 值 */ width: calc(sin(30deg) * 100px); /* 设置元素高度为 cos(45deg) 值 */ height...首先,我们实现一个黑色圆球: .g-single { width: 20px; height: 20px; background...conX),其中 X 为角度变化 如此,我们只需要动态设置 X 0deg 到 360deg 变化即可,就可以得到一个圆形动画效果: 完整代码,你可以戳这里:CodePen Demo -- CSS...其中利弊,可能不同的人会有不一样看法。至于好坏,交给时间给出答案吧。 好了,本文到此结束,希望对你有帮助

    45120

    使用这种技巧,可以大大地提高前端布局效率

    CSS中实现 wrapper 目前我们已经了解了wrapper基础知识和优点,接下来我们来具体看看在 CSS 如何使用它。 设置宽度 ? 实现wrapper第一件事就是要确认它宽度。...; padding-right: 16px; } 通过添加padding,我们可以确保左右两边得到一个16px偏移量,即使视口大小小于最大宽度。...important; } 这样,wrapper CSS保持原样,并且使用附加 CSS 添加了间距。 现在,你可能会问,为什么可以在一个页面上添加多个wrapper?... 如果你不使用 CSS 变量方式,也可以通过多加一个来解决: <div class...padding-right: 16px; } margin-left: auto和margin-right: auto工作方式是计算视口宽度一半减去内容宽度

    3.9K20

    如何提升CSS技术?8个硬核技巧带你迅速提升CSS技术

    神器选择器 很多CSS编码习惯都是清一色而无相应选择器,层层嵌套标签都包含至少一个。...选择器和对比起来性能上确实没后者那么好,但如今浏览器对于CSS解析速度已得到大大提升,完全可忽略选择器那丁点性能问题。 可是CSS模块众多,依次推出选择器也很多。...清晰易读:对于那些结构与行为分离写法,使用sass/less编写属性时结构会更清晰易读,减少很多无用或少用,保持css文件整洁性和观赏性 确保一致:减少修改而有可能导致样式失效问题,有时修改但未确保...正是伪元素能解决一些可不添加其他标签而起到占位作用,笔者才称伪元素为“添油加醋”。 上述选择器分类有提及伪元素,狭义上来说选择器除了伪元素,其他都是伪。...声明从上到下(实际效果是右上角到左下角)渐变着色 由于::before旋转后X轴往左平移过去,所以其着色效果与一致 由于::after旋转后Y轴往上平移过去

    2.2K40

    8则未必知道且超级实用CSS布局排版技巧 | 网易4年实践

    HTML/CSS/JS前端三剑客定位来看,HTML映射网页「结构」,CSS映射网页「表现」,JS映射网页「行为」。...布局排版特征可知它属于表现范畴,因此笔者认为大部分布局排版都能使用纯CSS完成,无需JS介入。...基础选择器 选择器 别名 说明 版本 常用 tag 标签选择器 指定类型标签 1 √ #id ID选择器 指定身份标签 1 √ .class 选择器 指定标签 1 √ * 通配选择器 所有类型标签....elem { padding-right: calc(100vw - 100%); } 不直接声明padding-right为滚动条宽度是因为每个浏览器默认滚动条宽度都可能不一致。...有了calc()做保障就可迅速实现一些与视窗尺寸相关布局了。例如实现一个视窗宽度都为50%弹窗。

    3.3K20
    领券