css计算属性calc() calc() 只作用于属性值

CSS有很多长度，它们都可以与calc() 一起使用：

px % em rem in mm cm pt pc ex ch vh vw vmin vmax 不能在媒体查询中使用 @media (max-width: 40rem) { /* Narrower or exactly 40rem */ } /* 无效 */ @media (min-width: calc(40rem + 1px)) { /* Wider than 40rem */ } 与预处理器数学比较 .foot { width: calc(10px + 50px); } //组合不同单元; .foot元素总是小于它父元素宽度 50px; //使用 calc()，计算值是表达式它自己，而非表达式的结果 .foot { width: calc(100% - 50px); } // SCSS 等同于 width: 150px; //当使用 CSS 预处理器做数学运算时，给定值为表达式的结果。 .foot { width: 100px + 50px; }

1.支持"+", “-”, “*”, "/"四则运算，又有区别

//(+、-)要求这两个数都是长度 .foot { /* 有效 */ margin: calc(100px + 100px); /* 无效 */ margin: calc(10px + 5); } //除法(/)要求第二个数字是无单位的 .foot { /* 有效的? */ margin: calc(30px / 3); /* 无效的? */ margin: calc(30px / 10px); /* 无效的? (不能除以0) */ margin: calc(30px / 0); } //乘法(*)要求其中一个数是无单位的。 .foot { /* 有效的 ? */ margin: calc(10px * 3); /* 有效的 ? */ margin: calc(3 * 10px); /* 无效的 ? */ margin: calc(30px * 3px); } //加法和减法要加前后空格 //负数是可以的(例如 calc(5vw - -5px) )，但这是一个例子，说明空格不仅是必需的，而且是有用的 .foot { /* 有效的 ? */ font-size: calc(3vw + 2px); /* 无效的 ? */ font-size: calc(3vw+2px); /* 有效的 ? */ font-size: calc(3vw - 2px); /* 无效的 ? */ font-size: calc(3vw-2px); } //calc() 与开头括号之间没有空格。 .foot { /* 无效的 ? */ width: calc (100% / 3); }

2.可以嵌套

.foot { width: calc( 100% / calc(100px * 2) ); }

3.支持大多数浏览器，对于不支持的可以写后补；

.foo { width: 90%; /* 浏览器不支持是启用*/ width: calc(100% - 50px); }

使用例子： 1.元素垂直居中（已知元素尺寸）

// foot的元素宽高均为300px .foot { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; } //calc()写法 .foot { position: absolute top: calc(50% - 150px); left: calc(50% - 150px); }

2.创建根栅格尺寸（ 1rem 宽度的元素总是视口元素宽度的 1/30）

html { font-size: calc(100vw / 30); }

3.清晰可读

//更加清晰可读 .foot { width: 16.666666667%; } .foot { width: calc(100% / 6); }

4.CSS自定义属性和calc()

html { --spacing: 10px; --spacing-L: var(--spacing) * 2; --spacing-XL: var(--spacing) * 3; } .module[data-spacing="XL"] { padding: calc(var(--spacing-XL)); } <div style="--index: 1;"> ... </div> <div style="--index: 2;"> ... </div> <div style="--index: 3;"> ... </div> div { /* Index value comes from the HTML (with a fallback) */ animation-delay: calc(var(--index, 1) * 0.2s); }

5.渐变色

.foot { background: #1E88E5 linear-gradient( to bottom, #1E88E5, #1E88E5 calc(50% - 10px), #3949AB calc(50% + 10px), #3949AB ); }

其他

用它创建了一个.full-bleed 实用工具类：.full-bleed{width:100vw；margin left:calc（50%-50vw）；}我想calc（）在我的前3个CSS中。用它来为粘性页脚腾出空间。用它来设置一些流体字体/动态排版…根据最小值、最大值和视口单位的变化率来计算字体大小。不仅仅是字体大小，还有行高。如果你使用calc()作为流体字体情况的一部分，涉及到视口单位等，确保你包含一个使用rem或em的单位，这样用户仍然有一些控制权，通过放大或缩小他们需要的字体。"内容宽度 "的自定义属性，然后用它来创建我需要的间距，比如 margins: .margin { width: calc( (100vw - var(–content-width)) / 2); }用它创建了一个跨浏览器的drop-cap组件。下面是它的一部分。.drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(-drop-cap-lines) * var(-body-line-height)); }。用它来使文章页面上的一些图片溢出其容器。用它与padding和vw/vh单位相结合，在页面上正确地放置了一个可视化。用它来克服背景-位置的限制，但特别是在渐变中定位颜色停止的限制。比如 “在底部少停0.75em”。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。