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”。