css3中calc的用法及单位

最新推荐文章于 2023-07-09 20:03:36 发布
最新推荐文章于 2023-07-09 20:03:36 发布
阅读量1.1k 收藏
点赞数
分类专栏： css 文章标签： css3 calc vm vh 尺寸计算 响应视口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39594951/article/details/109447317
版权

1.css3中calc()函数可以进行尺寸计算，这样可以使样式在浏览器中更加的灵活，能够响应视口的改变
示例:

.aside{
Height:calc(100vh - 78px); //以视框百分百的高度减去78px的大小
}

2.其中vw,vh,vmin,vmax的含义
Vw:视窗宽度的百分比(1vw代表视窗的宽度为1%)
Vh:视窗高度的百分比(1vh代表视窗的高度为1%)
Vmin:当前vw和vh中较小的一个值
Vmax:当前vw和vh中较大的一个值

小程序大梦想
关注
专栏目录
css单位计算方法,CSS中的calc()计算和vw/vh长度单位
weixin_28691003的博客
08-04 2350
calc()CSS中除了使用具体的值，还可以使用calc()方法来执行一些计算。语法/* property: calc(expression) */width: calc(100% - 60px);calc()函数用一个表达式作为参数，用表达式的结果作为值。表达式的运算对象可以使用任意长度值，并且可以混用(px/em)，也可以通过小括号()来调整计算顺序。表达式中可以使用+|-|*|/操作符来操作...
CSS3中的calc( )属性
xm1037782843的博客
03-03 2353
calc()函数简单讲解
CSS中calc()方法以及vh、vw单位
m0_56063262的博客
02-23 1982
使用“+”、“-”、“*” 和 “/”四则运算；也可以混合使用各种单位进行计算，如“height: calc(100vh - 44px - 49px)”错误写法： "height: calc(12%+5em)"“ * ”和 “ / ”可以没有空格。举个直观的例子，让大家感受说人话。+”和“-”计算的时候要加空格。expression是表达式。
CSS中calc单位vw和%的区别
m0_47883103的博客
08-14 999
直接上代码 先看单位为%百分号的时候 .box{ float: left; } .a{ overflow: hidden; width: calc(100% - 100px); height:500px; } <div class="box" style="width: 100px; height:100px; background-color:red;"></div> <div class="a" style="background-
css中的单位取值,calc计算
qq_42238554的博客
04-28 538
CSS 有几个不同的单位用于表示长度，一般分为两种类型的长度单位：相对和绝对；长度是由一个数字和单位组成如 10px, 2em, 等。 文本相对长度单位 （1）em相对于当前对象内文本的字体尺寸 （2）ex相对于字符“x”的高度。通常为字体高度的一半 （3）ch数字“0”的宽度 （4）rem相对于根元素(即html元素)font-size计算值的倍数 视口相对长度单位 （1）vw相对于视口的宽度。...
网站开发进阶（六十三）详解CSS3中的calc()
IT全栈 华强工作室
04-13 2816
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过 .foo { width: 100px + 50px; } // Or using SASS variables $width-one: 100px; $width-two: 50px; .bar {
CSS3的calc()做响应模式布局的实现方法
09-24
CSS3中的calc()函数是一个非常强大的工具，用于执行元素宽度、高度等属性值的计算。它允许在CSS样式表中使用数学表达式，将不同类型的单位值（如百分比、em、px、rem等）结合起来进行加、减、乘、除运算，从而得到一...
css3中的width:100vh以及calc(100vh - 10px)，calc() 用法案例
m0_49714202的博客
10-21 6187
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; **vmax**: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; **vmin**: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即**window.innerWidth/window.innerHeight**大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗
tangjie109411的博客
09-25 4832
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗 1. css3中的calc()函数 最近做项目，看到别人的css中出现的，发现此函数是用于动态计算长度值。 1.1 calc()使用注意点 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 在less预编译语言中
reduce-css-calc:最大程度地减少CSS calc（）函数
05-17
reduce-css-calc 最大程度地减少CSS calc（）函数。 对于或类的软件包尤其有用。 安装 npm install reduce-css-calc 用法 var reducedString = reduceCSSCalc(string, precision) var reduceCSSCalc = require ...
calc的使用
yhbsww0523的博客
11-30 1248
最近在网上的一个例子中，发现运用了此属性。之前一直没有用过，也不知道是用来做什么。网上搜索，原来calc是css3的一个新增的功能。而且，这个属性4年前就在使用了。真是学海无涯呀。 calc是英文单词calculate的缩写，有计算功能，可以动态设置元素的宽高。这里的计算跟我们以往的计算不同，它不能得出具体的值，而是一个表达式。 例如：width:calc(100% - 10px)
calc()函数
想去旅行的静静的博客
05-22 974
div的高度height为calc(100vh)即可,100vh= 视窗高度的100% div { width: 100%; height: calc(100vh); } 需要注意的是，该方法适合于网页高度等于当前屏幕视窗高度，按实际需求可能还是需要JS的。 ...
css计算-----calc踩坑指南
qq_45141916的博客
12-28 488
css计算，calc函数书写问题造成的报错。
calc()函数 css中用100%的宽度/高度，减去50px？？
GoodIdea
12-23 1万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
CSS3中使用calc()设置浏览器宽度和高度减去固定值的写法
元仙僧的博客
08-04 8800
设置宽度：width:calc(100vw - 123px); 说明：1、vw是width of view(port)的缩写； 2、100vw表示百分之百的视图宽度； 3、123px是需要减去的宽度； 4、减号的两边必须都有至少一个空格。 设置高度：height:calc(100vh-123px); 说明：1、vh是height of view(port)的缩写； 2、100vh表示百分之百的视图高度； 3、123px是需要减去的高度； 4、同理减号的两边必须都有至少一个空格。 注意：切勿写成 calc(1
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
ruoyi-vue项目 上下白框解决方案
最新发布
Gblfy_Blog
07-09 269
ruoyiv-vue项目 上下白框解决方案
css中100vh 加减运算
寬真
06-11 6805
vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 calc ca...
calc()方法
dingsongtuo4851的博客
10-31 520
calc()= calc(四则运算) 用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 转载于:https://www.cn...
expo 中 calc()的用法
06-06
在 Expo 中，`calc()` 函数可以用于指定组件的宽度或高度。它可以帮助你实现响应式设计，让你的组件在不同设备上具有不同的尺寸。 `calc()` 函数的语法与 CSS 中的一致，可以使用加减乘除等运算符。例如，你可以使用以下代码指定一个宽度为屏幕宽度的一半： ```jsx import React from 'react'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={[styles.box, { width: 'calc(50% - 10px)' }]} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', }, box: { height: 100, backgroundColor: '#f00', }, }); ``` 在这个例子中，我们使用 `calc()` 函数来计算一个宽度值，该值为屏幕宽度的一半减去 10 个像素。这样，我们就可以在不同大小的设备上使盒子的宽度保持一致。 需要注意的是，`calc()` 函数目前只支持在 `style` 属性中使用，不能在样式表中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值