css calc函数应用(笔记)

于 2022-01-10 11:33:50 发布
阅读量374 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64970126/article/details/122406825
版权

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

注意

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)(子元素宽度为父元素的100%-10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；
&Mark&
关注
【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 980
【z-index】属性取值是数字，数字越大，优先级越高，元素就会位于最上层。CSS通过【百分比%】的形式来设置宽度、高度，从而实现宽度、高度的自适应，即：当浏览器窗口大小发生变化时候，元素的宽度、高度会自动变化。CSS可以通过【z-index】属性，设置元素的堆叠顺序，【z-index】属性值是一个数字，可以是负数、整数、0，数字越大优先级越高，也就是位于最上层。CSS默认情况下，定位元素的堆叠顺序是按照元素定义的先后顺序来确定的，也就是说，后面定义的元素会覆盖前面定义的元素，如下所示。...
calc()函数
m0_72630538的博客
08-14 1万+
视口简单来说就是浏览器显示页面内容的区域。视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；...
CSS3: calc计算属性
CRPER
04-30 2万+
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法： .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论 cal
html页面在线画,html画页面几个技巧
weixin_36027195的博客
05-31 726
最近好长时间都在画页面，来总结几个值得分享的内容：1.inline-block默认间距display: inline-block 存在默认默认间距，就算是使用 padding: 0; margin: 0; 也是清除不了，所以经常当你算好了元素的宽度但是还是会出现有元素被挤下去。* {margin: 0;padding: 0;}.list {width: 100%;}.list .item {hei...
css3 宽度百分比减去固定宽度 无效问题
weixin_30315723的博客
08-13 206
一定要注意中间横线的间距才有效果 正确 width: calc(50% - 10px); 错误 width:calc(50%-10px); 转载于:https://www.cnblogs.com/ybixian/p/9469612.html
CSS3中width属性的calc()使用
Zhangxi
04-11 2万+
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元 素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这 些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将 会把元素盒子撑破（标准模式下，除I
calc怎么用？css3 calc()函数的使用总结
lin123_00的博客
05-05 2987
calc是什么意思？怎么使用？本篇文章给大家带来的内容是介绍css3中的calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以...
获取计算机显示屏高度,CSS 使用calc()获取当前可视屏幕高度
weixin_36026440的博客
07-26 2049
先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；ex依赖于英文字母小 x 的高度ch数字 0 的宽度rem根元素(html)的 font-sizevwviewpoint width，视窗...
css样式 的笔记AAAAAAAAAAAA
11-18
- `width`和`height`定义元素的尺寸，`calc()`函数可用于动态计算尺寸。 3. 对齐与定位 - `justify-content`和`align-items`在弹性布局中用于设置元素的水平和垂直对齐。 - `text-align`控制文本的水平对齐，`...
height:calc(100% - 10px)的用法(垂直居中) - 布局篇
热门推荐
草巾冒小子的博客
03-02 3万+
如何让一个 height:calc(100% - 10px)的用法 - 布局篇
calc()函数 css中用100%的宽度/高度，减去50px？？
GoodIdea
12-23 1万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
css3高度计算函数cal_CSS3 calc()会计算属性详解
weixin_30682905的博客
02-15 1885
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。怎么使用calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题，而且还可...
calc(100% - 72px);
weixin_39621570的博客
11-13 1386
width: calc(100% - 72px);,calc减号”-“前后一定要加空格；
css3新发现height:100vh;
weixin_45734493的博客
10-12 999
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWidth/wi...
height:calc(100% - 10px)的用法 - 布局篇
悦涵仙子的技术笔记本
07-22 9029
下图demo所示，如何让一个侧边栏垂直方向全尺寸拉伸？ 代码如下： height:calc(100% - 10px)
calc()使用
l630053133的博客
03-28 272
什么是calc()? 学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。 calc() 从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元 素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font...
css中的calc函数如何使用
最新发布
06-07
CSS中的`calc()`函数可以用于计算CSS属性值，它支持加、减、乘、除四则运算。使用`calc()`函数的语法格式为： ``` calc(expression) ``` 其中，`expression`是要计算的表达式，可以包含长度、百分比、数值和其它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值