面了这么多天,该做总结了-CSS篇(三)

浅聊一下

书接上文,我们聊过了css盒模型、css选择器和隐藏页面元素的方式,本篇将继续总结面试遇到的其他css问题…

css面试系列

面了这么多天,该做总结了-CSS篇(一) – 掘金 (juejin.cn)

面了这么多天,该做总结了-CSS篇(二) – 掘金 (juejin.cn)

面试了这么多天,觉得一个人的力量还是太过薄弱,如果你和我一样有向前冲的勇气,欢迎掘友们私聊我交流面经(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>

效果为:

面了这么多天,该做总结了-CSS篇(三)

  1. 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%

面了这么多天,该做总结了-CSS篇(三)

  1. flex

flex是我使用的最多的水平垂直方法,只需要给父容器添加样式

        .parent {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 300px;
            background-color: rgb(169, 222, 116);
        }
  1. 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);
        }
  1. 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. 什么是视差滚动效果?

多层背景以不同的速度进行移动,实现视觉上的落差

  1. 实现视差滚动

    <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的文字显示呢?

  1. zoom

该函数用于缩放图像,参数为缩放比例。例如,zoom:0.25表示将图像缩小到原始大小的25%。

  1. transform: scale(2)

用于缩放元素的大小。

结尾

css系列到这里还没有结束,请看下一篇…

原文链接:https://juejin.cn/post/7339810287749365797 作者:滚去睡觉

(0)
上一篇 2024年2月27日 上午10:16
下一篇 2024年2月27日 上午10:26

相关推荐

发表评论

登录后才能评论