浅聊一下
书接上文，我们聊过了css盒模型、css选择器和隐藏页面元素的方式，本篇将继续总结面试遇到的其他css问题…
css面试系列
面试了这么多天，觉得一个人的力量还是太过薄弱，如果你和我一样有向前冲的勇气，欢迎掘友们私聊我交流面经（wechat: LongLBond）
说说水平垂直居中的方式有哪些
有这么一段html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 300px;
background-color: rgb(169, 222, 116);
}
.child {
width: 200px;
height: 200px;
background-color: rgb(79, 79, 207);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果为：
- position + translate
对style做以下操作
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: rgb(169, 222, 116);
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: rgb(79, 79, 207);
}
这里注意，在让child离左边和上面都为50%以后，还要移回自身的50%
- flex
flex是我使用的最多的水平垂直方法，只需要给父容器添加样式
.parent {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background-color: rgb(169, 222, 116);
}
- grid
设置父容器为网格布局，子容器设置align-self和justify-self为center
.parent {
display: grid;
width: 300px;
height: 300px;
background-color: rgb(169, 222, 116);
}
.child {
align-self: center;
justify-self: center;
width: 200px;
height: 200px;
background-color: rgb(79, 79, 207);
}
- table: text-align + vertical-align
- display: table-cell; 表示将元素设置为表格单元格的样式，可以用来实现类似于表格的效果。
- text-align: center; 表示将元素的文本居中对齐。
- vertical-align: middle; 表示将元素的垂直方向居中对齐。
需要注意的是子容器不能是块级元素
.parent {
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: rgb(169, 222, 116);
}
.child {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgb(79, 79, 207);
}
视差滚动效果实现
- 什么是视差滚动效果？
多层背景以不同的速度进行移动，实现视觉上的落差
-
实现视差滚动
<1> background-attachment: fixed;
background-attachment: fixed;：将背景图像固定在屏幕上，无论页面滚动还是缩放，背景图像都不会移动。background-size: cover;：将背景图像的大小调整为覆盖整个容器，同时保持图像的宽高比。background-position: center;：将背景图像的中心位置设置为容器的中心位置
<2> perspective + translateZ
perspective: 是一个CSS属性，用于设置元素的透视效果。它定义了元素的深度和距离，使得元素在3D空间中看起来有立体感。transform-style: preserve-3d;用于定义元素的3D转换样式。transform: translateZ(-1px);它将元素沿着Z轴移动-1像素
如何显示一个小于10px的文字
在有些浏览器上，当你的字体大小小于10px的时候，页面上的文字就不会显现出来
如何让小于10px的文字显示呢？
- zoom
该函数用于缩放图像，参数为缩放比例。例如，zoom:0.25表示将图像缩小到原始大小的25%。
- transform: scale(2)
用于缩放元素的大小。
结尾
css系列到这里还没有结束，请看下一篇…
原文链接：https://juejin.cn/post/7339810287749365797 作者：滚去睡觉
