当前位置: 首页 > news >正文

css动态设置div宽高,calc函数

在css中使用calc函数
calc() 是 CSS 中的一种函数,用于动态计算长度值。它允许你在 CSS 属性中进行数学运算,结合不同的单位(如 px、%、em 等),从而创建更加灵活和响应式的布局

表达式规则

  • 运算符:支持加法(+)、减法(-)、乘法(*)、除法(/)。
  • 操作数:可以是具体的数值(如 100)、带单位的数值(如 50px、10%)或 calc() 的嵌套。
  • 空格:运算符和操作数之间必须有空格,例如 calc(100% - 50px)

高度动态设置

.box {
    height: calc(50vh - 100px);
}

.Kox2 {
    height: calc(100vh - 50px);
}

宽度动态设置

.container {
    width: calc(100% - 20px);
}
http://www.dtcms.com/a/109167.html

相关文章:

  • Unity中的动态合批使用整理
  • Vue中虚拟DOM创建到挂载的过程
  • Milvus 向量数据库详解:从核心概念到 Docker 部署实践
  • redis 安装
  • windows批处理命令,执行一个python文件,将命令保存为xxxx.bat文件
  • angular+form实现2048小游戏
  • 41. 评论日记
  • 2025高频面试算法总结篇【二叉树】
  • GLTF(GL Transmission Format)详细介绍
  • 多线程基础
  • 多线程交替打印ABC方法整理
  • 前端入门之CSS
  • rknn_convert的使用方法
  • WebRTC源码解析:Android如何渲染画面
  • Redis是什么?架构是怎么样的?
  • MySQL客户端工具-图形化工具-DataGrip 安装与使用
  • 《AI大模型应知应会100篇》加餐篇:LlamaIndex 与 LangChain 的无缝集成
  • 3.9/Q2,Charls最新文章解读
  • 合并两个有序数组(Java实现)
  • Vue2 过滤器 Filters
  • Blender运行python脚本?
  • 42.评论日记
  • 2874. 有序三元组中的最大值 II
  • 全星 研发项目管理APQP 软件:驱动汽车及制造业研发升级的数字化引擎
  • 【笔记】如何使得docker desktop下载至D盘而不是C盘?
  • django REST framework(DRF)教程
  • 一文读懂数据仓库:从概念到技术落地
  • 蓝桥杯Java B组省赛真题题型近6年统计分类
  • 7-5 表格输出
  • 高速电路 PCB 设计要点一