结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
// Value specified in CSS
.foo {
width: calc(100% - 50px);
}
// Computed value in browser
.foo {
width: calc(100% - 50px);
}
这意味着浏览器中的值可以更加灵活,能够响应视口的改变。我们能够给元素设定一个高度为视口的高度减去一个绝对值,它将随视口的改变进行调节。
三、使用 calc()
calc()
函数可以用来对数值属性执行四则运算。比如,<length>
,<frequency>
,<angle>
,<time>
,<number>
或者 <integer>
数据类型 这里有一些示例:
.foo {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate( calc(1turn + 28deg) );
background: hsl(100, calc(3 \* 20%), 40%);
font-size: calc(50vw / 3);
}
3.1 calc() 数学运算符
calc()
可以使用+
、-
、*
和/
数学运算符,但它们在使用方法上有所不同。 加法(+
)和减法(-
)要求这两个数都是长度。
.el {
/\* 有效 \*/
margin: calc(10px + 10px);
/\* 无效 \*/
margin: calc(10px + 5);
}
无效的值会使整个单项声明无效。 除法(/
)要求第二个数字是无单位的,且不能为0。
.el {
/\* 有效 \*/
margin: calc(30px / 3);
/\* 无效 \*/
margin: calc(30px / 10px);
/\* 无效 (不能除以0) \*/
margin: calc(30px / 0);
}
乘法(*
)要求其中一个数是无单位的。
.el {
/\* 有效\*/
margin: calc(10px \* 3);
/\* 有效\*/
margin: calc(3 \* 10px);
/\* 无效 \*/
margin: calc(30px \* 3px);
}
3.2 clac() 嵌套
calc()
函数可以嵌套。在函数里边,会被视为简单的括号表达式,如下例所示。
.foo {
width: calc( 100% / calc(100px \* 2) );
}
函数的计算值如下所示:
.foo {
width: calc( 100% / (100px \* 2) );
}
3.3 垫片
clac()
已经得到普遍支持。
对于不支持 calc()
的浏览器,整个属性值表达式将被忽略。不过我们可以对那些不支持 calc()
的浏览器,使用一个固定值作为回退。
.foo {
width: 90%; /\* Fallback for older browsers \*/
width: calc(100% - 50px);
}
3.4 calc()使用场景
3.4.1 元素居中
使用 calc()
给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸,一个典型的解决方案是使用负外边距移动自身距离高与宽的一半,如下所示:
// Assuming .foo is 300px height and 300px width
.foo {
position: absolute
top: 50%;
left: 50%;
marging-top: -150px;
margin-left: -150px;
}
使用 calc()
函数,我们仅仅通过 top
与 left
属性便能实现相同的效果:
.foo {
position: absolute
top: calc(50% - 150px);
left: calc(50% - 150px);
}
3.4.2 创建根栅格尺寸
使用 rem
,calc()
函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。
html {
font-size: calc(100vw / 30);
}
现在,1rem
为视口宽度的 1/30
。在页面上的任何文本,将会根据你的视口自动缩放。更进一步,相同比例的视口总会显示相同的文本数量,不管视口的真实尺寸是多少。
如果我们对非文本使用 rem
设置大小,它们同样遵守这个行为。一个 1rem
宽度的元素总是视口元素宽度的 1/30
。
3.4.3 元素属性计算清晰
calc()
使计算更加清晰。如果使一组项目为它们父元素容器宽度的 1/6
,你可能值么写:
.foo {
width: 16.666666667%;
}
然而,它能够更加清晰并具有可读性:
.foo {
width: calc(100% / 6);
}
使用 calc()
,我们还能做更多的事情,比如创建一个栅格系统。它是 CSS
最有用的新特性之一。
四、注意事项
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
calc()
,我们还能做更多的事情,比如创建一个栅格系统。它是 CSS
最有用的新特性之一。
四、注意事项
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- [外链图片转存中…(img-t6qRkfY1-1715214010129)]