css3中使用calc()计算宽高

本文详细介绍了CSS3中的calc()函数及其用法,包括如何动态计算元素的宽高和其他属性值。同时,深入探讨了视窗单位vw、vh、vmin和vmax的特性及应用场景,对比了px、em、rem、%等单位的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

calc()是什么?

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

calc()的语法:

  • 使用“+”、“-”、“*” 和 “/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算;
  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器兼容性:

在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器仅支持“firefox for android 14.0”

示例如下:

// 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 计算宽度

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)

 

### CSS `calc()` 函数概述 `calc()` 函数是 CSS 中用于动态计算数值的强大工具,允许在属性值中执行基本的数学运算,包括加法、减法、乘法和除法,并支持多种 CSS 单位之间的混合计算[^1]。 #### 基本语法结构 该函数接受一个表达式作为参数,此表达式的求值结果即为最终应用到样式的具体数值。其通用形式如下所示: ```css property: calc(expression); ``` 其中 `expression` 可由操作数(可以是长度、百分比或其他类型的数值)、算术运算符组成[^4]。 #### 实际应用场景举例 ##### 动态度设定 当希望某个容器占据剩余空间的一部分时,比如左侧固定度栏加上右侧自适应的内容区,则可以通过下面的方式定义右边部分的度: ```css .right-panel { width: calc(100% - 200px); /* 总度减去左边固定的像素 */ } ``` 此处表示 `.right-panel` 的度等于父级元素总度减去给定的具体像素值[^5]。 ##### 复杂间距调整 对于内边距或外边距等需要基于不同单位组合来精确控制的情况也十分有用。例如创建上下各占屏幕高度一定比例而左右留有一定空白区域的效果: ```css .container { padding: calc(5vh + 1rem) calc(2vw + .5em); } ``` 这里设置了顶部和底部填充为视窗高度的百分之五再加上相对字体大小的一倍行;左部和右部则分别为视窗度的百分之二加上半个当前字体尺寸[^3]。 #### 组合其他特性增强灵活性 除了简单的四则运算之外,还可以与其他 CSS 特性相结合进一步提升布局设计的可能性。如配合媒体查询根据不同设备条件改变计算逻辑,或是联合变量简化维护工作量等等[^2]。 通过上述说明可以看出,`calc()` 不仅简单易用而且非常实用,在日常开发过程中合理运用能极大提工作效率并创造出更富创意的设计方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值