calc()

最新推荐文章于 2024-10-17 09:40:47 发布
最新推荐文章于 2024-10-17 09:40:47 发布
阅读量378 收藏 8
点赞数 11
分类专栏： css 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014378108/article/details/135224919
版权
本文介绍了CSScalc()函数如何用于计算元素宽度（如`width:calc(100%-10px)`）和高度（如`height:calc(100vh-70px)`），强调了运算符前后需保持空格以及calc()遵循的标准数学运算优先级规则。同时指出，`height:calc(100vh-70px)`中负号两侧应有空格以确保正确计算。
摘要由CSDN通过智能技术生成

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；
  height: calc(100vh -70px); 不起作用 负号的左右没有空格

  height: calc(100vh - 70px);

u014378108
关注
专栏目录
calc
03-06
calc
CSS3 calc() 函数，height: calc(100% - 70px)；
jingjing的博客
08-12 9165
今天做练习的时候遇到了这样一行代码：height: calc(100% - 70px);，100%的高度减去70px？？？这是什么函数？竟然支持不同单位之间的运算？！ 通过查阅资料，我终于认识了这个函数——calc()函数。 calc()函数是CSS3 提出的，目的是动态改变宽度/高度的变化，适配问题。 <div> <div class=“head”>标题</div> <div class=“contain”>内容</div> </div
用calc()函数使页面高度在不同分辨率下自适应
chenlim87的博客
04-15 2363
市面上电脑种类很多，每个人的电脑屏幕分辨率又不一样，这就造成了同一个页面在不同的电脑上显示的不一样。这对前端来说是比较头疼的。那怎么让页面根据屏幕分辨率自适应呢？首先我们不能给要处理的容器设置固定高度，其次借助视口（viewport）和calc()函数来设置高度。 视口通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。 整个视口的高和宽是 100vh、100vw 1vh = 1% * 视口高度，1vw = 1% * 视口宽度 vh、vw就是相对视口的长度单位，它是相对
百分比单位始终根据父元素相应值来计算_CSS Viewport 单位，很多人还不知道使用它来快速布局...
weixin_39932762的博客
11-29 689
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常见问题及其解决方案和用例，让我们开始吧。...
css3中calc的用法及单位
qq_39594951的博客
11-02 1112
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中较大的一个值 ...
Calc
03-10
"Calc"通常指的是开源办公软件LibreOffice或Apache OpenOffice中的电子表格组件。这两个软件都是Microsoft Excel的替代品，提供类似的功能，但免费且开源。本文将深入探讨Calc的主要功能、特点及其在日常办公中的...
CSS五种方式实现 Footer 置底
高先生的猫
06-28 1873
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 1、将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。 <body> <div class="wrapper"&gt..
CSS3使用calc() 计算高度和宽度 vh px
陆柏熺
05-17 8506
Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能： Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%...
【译】CSS五种方式实现Footer置底
qq_36309066的博客
02-20 1399
【译】CSS五种方式实现Footer置底 页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 实现方法 1. 将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设为100%，再利用
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
calc(100vh - 10px) calc(100vw - 10px) calc(100% - 10px) 简单说明
Asa的专栏
12-05 3万+
在讲calc之前先说一下 vh  vw：         vw              相对于视口的宽度。视口被均分为100单位的vw      vh        相对于视口的高度。视口被均分为100单位的vh      vmax    相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax      vmin     相对于视口的宽度或高度中较小的那个。其
css3新发现height:100vh;
weixin_45734493的博客
10-12 1018
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWidth/wi...
calc()函数 css中用100%的宽度/高度，减去50px？？
GoodIdea
12-23 1万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
css3中的width:100vh以及calc(100vh + 10px)
qq_24581629的博客
05-17 4万+
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
前端 js 处理一个数组 展示成层级下拉样式
最新发布
lzfengquan的博客
10-17 84
前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 247
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 311
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 771
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值