Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >css中使用calc()计算宽高

css中使用calc()计算宽高

作者头像
用户1088318
发布于 2025-05-21 03:04:11
发布于 2025-05-21 03:04:11
19900
代码可运行
举报
运行总次数:0
代码可运行

calc()是什么? 简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等,

calc()语法 calc的语法就是简单的四则运算,

使用“+”、“-”、“*” 和 “/”四则运算; 可以使用百分比、px、em、rem等单位; 可以混合使用各种单位进行计算; 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的; 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。 浏览器兼容性: 浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持.

calc()的用途

主要用于计算不确定值,例如一个外边距为10px,宽度为100%的元素,这种情况我们怎么设置呢?如果设置了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
width: 100%;
margin: 10px;

你可以看出这个box已经溢出了,那么怎么解决呢?就可以用calc函数了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;

vw和vh是什么? vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下:

vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:取当前Vw和Vh中较小的那一个值 vmax:取当前Vw和Vh中较大的那一个值 PX、EM、REM、%、VW、VH单位之间的区别 1 、px

px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。

2、em

参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。

字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px

3、rem

rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

4、%

% 百分比,相对长度单位,相对于父元素的百分比值

元素宽高与字体大小使用区别:

(1)尽量使用相对尺寸单位

使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部DOM结构,重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置。

(2)字体尺寸尽量使用em、rem

为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层以上的字体相对尺寸的设置,可以考虑使用rem。

vh和vw vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。

calc + vm 计算宽度

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
width: 800px; /* fallback for b*/
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

来源:https://blog.csdn.net/aliujiujiang/article/details/85098423

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-04-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CSS:绝对单位、相对单位
我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。
Jean
2021/10/23
2.3K0
CSS:绝对单位、相对单位
CSS 中的各种单位
之前遇到 css 中需要使用单位的情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式的页面的时候,要重新补一下 css 单位的技术债。
李振
2021/11/26
8870
深度解析CSS中的单位以及区别
css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。
呆呆
2021/09/29
5240
css 文字自适应大小_div自适应窗口大小
css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。
全栈程序员站长
2022/09/20
3.8K0
IT课程 CSS基础 021_值类型、单位、大小、颜色
在CSS中,长度单位用于表示尺寸和距离,可以应用于各种属性,如宽度、高度、边距、填充等。
zhaoJian.Net
2024/04/03
2570
CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。
李洋博客
2021/06/15
2.3K0
我碰到的那些面试题html+css
http://www.sohu.com/a/330231789_120174705
李才哥
2019/09/08
1.4K0
CSS中常见的长度单位
注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。
恋喵大鲤鱼
2018/08/03
1.3K0
CSS常用单位
CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。
WindRunnerMax
2020/08/27
1.7K0
css中的单位
前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结
烟草的香味
2019/07/25
1.7K0
CSS样式中长度单位含义解析:rpx、px、vw、vh、em、rem、pt
在 CSS 样式中,有几种常见的长度单位,包括 rpx 、 px 、 vw 和 vh 等,含义解析如下:
小蓝枣
2024/05/26
7.9K0
【面试题】CSS知识点整理(附答案)
css引入伪类和伪元素概念是为了格式化文档树以外的信息。伪类和伪元素是用来修饰不在文档树中的部分。
木子星兮
2020/07/17
1.7K0
【面试题】CSS知识点整理(附答案)
前端工程师之移动端布局方案
百分比布局是一种等比例缩放的布局方式,也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
张哥编程
2024/12/13
3310
一文读懂 CSS 单位
说起CSS单位,我们最熟悉的可能就是像素单位(px),它是一个绝对单位,也就是说一个10px的文字,放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种,下面就分别来看看这些单位。
用户8921923
2022/10/24
1.3K0
一文读懂 CSS 单位
聊一聊CSS中的长度单位
CSS中有很多属性可以接受长度值,比如: width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多,因此CSS也提供了许多长度单位。有的是日常生活中使用的单位,比如:厘米(cm)和英寸(in);有的是印刷行业使用的单位,比如:point(pt)和pica(pc);有的是专门为CSS发明的单位,比如:px。
MudOnTire
2019/05/26
1.2K0
解密CSS单位:px、em、vh的区别与应用
在前端开发中,我们经常听到px、em、vh等单位的名词,但你是否真正理解它们的含义和用法呢?想象一下,如果你是一位魔术师,这些单位就是你的魔法道具,能够帮助你创造出精美的网页效果。但是,每个道具都有自己的特点和用途,只有深入了解它们,才能在实战中游刃有余地使用。现在,就让我们一起来揭开px、em、vh的神秘面纱,探索它们的魅力所在吧!
一只牛博
2025/05/30
1900
解密CSS单位:px、em、vh的区别与应用
rem适配移动端的原理及应用场景
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw、vh等。所以打算写博客总结一下,以加深理解。
前端老道
2022/03/29
1.8K0
rem适配移动端的原理及应用场景
响应式网站应该如何选择 CSS 单位?
在开发需要适配各种设备的响应式网站时,正确了解的 CSS 范围很重要。在做具体的决策之前,我们对它们先分个类:
ConardLi
2021/09/08
2.1K0
响应式网站应该如何选择 CSS 单位?
长度单位、calc() 表达式
(adsbygoogle = window.adsbygoogle || []).push({});
双面人
2019/07/15
8920
如何决定响应式网站的 CSS 单位?
我们可以将这个单位用于边距和填充,因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。元素 font-size 会根据设备大小而变化,因此元素周围的间距也将分别发生变化。
海拥
2021/08/23
1.3K0
如何决定响应式网站的 CSS 单位?
相关推荐
CSS:绝对单位、相对单位
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验