css 让 width = (100% - 30px)

在 HTML 和 CSS 中,无法直接在 CSS 中使用数学表达式,
但是,
可以使用 CSS 变量(Custom Properties)来模拟这种行为,如下:

<div class="customDiv">
  <span style="color: red;">*</span>
  <span>商品标题:</span>
</div>
.customDiv {
   
  margin-top: 10px;
  background: pink;
  height: 30px;
  float: left;
  --width-calc: calc(100% - 30px);
  width: var(--width-calc);
  margin-left: 30px;
}

在这里,使用了 CSS 变量 --width-calc 来存储 calc(100% - 30px) 的值,并将其应用到 width 属性中,

这样就 让 width = (100% - 30px)了

相关推荐

  1. css width = (100% - 30px

    2024-01-30 14:54:03       41 阅读
  2. CSS:min-width作用

    2024-01-30 14:54:03       11 阅读
  3. 使用css图片无限循环旋转360

    2024-01-30 14:54:03       38 阅读
  4. width:100%与width:auto区别

    2024-01-30 14:54:03       15 阅读
  5. csspx和em的区别

    2024-01-30 14:54:03       36 阅读
  6. CSS 1PX Border问题解决

    2024-01-30 14:54:03       15 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-30 14:54:03       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-30 14:54:03       20 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-30 14:54:03       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-30 14:54:03       20 阅读

热门阅读

  1. udp(无连接)客户端和服务端代码

    2024-01-30 14:54:03       48 阅读
  2. 快捷键:IDEA 清理无效导入依赖

    2024-01-30 14:54:03       35 阅读
  3. STL之stack 【栈】

    2024-01-30 14:54:03       30 阅读
  4. VA_LIST可变参数列表使用学习

    2024-01-30 14:54:03       34 阅读
  5. 正则表达式 grep

    2024-01-30 14:54:03       32 阅读
  6. STM32 1-5

    STM32 1-5

    2024-01-30 14:54:03      34 阅读
  7. 【iOS ARKit】光照效果--光源

    2024-01-30 14:54:03       38 阅读
  8. C. Did We Get Everything Covered?

    2024-01-30 14:54:03       32 阅读
  9. k8s默认seccomp禁用研究

    2024-01-30 14:54:03       36 阅读