高频前端面试题——css篇（二）

前言

最近这段时间是秋招提前批，这里整理出来了比较常考的css面试题分享给大家，后续也会更新js常考的面试题，欢迎大家关注点赞收藏。

6. 元素水平垂直居中的方法有哪些？

水平垂直居中的方法可以分为三种情况：已知父子容器宽高；未知父容器，已知子容器；未知父子容器宽高，只要你分类去说明就不会遗漏方法，这题可以拿100分。

已知父子容器宽高:

margin (不优雅)，就是算子容器要向右向下移动多少px，这个方法不推荐。

<style>
    .parent {
        width: 200px;
        height: 200px;
        border: 1px solid #000; 
        background-color: #c34444;
    }
    .child {
        width: 50px;
        height: 20px;
        background-color: #78be5f;
        margin-left: 75px;
        margin-top: 90px;
    }
</style>

未知父容器，已知子容器:

1. margin + calc(父容器 - 子容器)

margin-left: calc(50% - 子容器宽度/2) 

2. position + margin负值

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(子容器宽度/2)px;
    margin-top: -(子容器高度/2)px;
}

未知父子容器宽高

1. position + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. flex + align-items + justify-content

/* 给父容器设置弹性布局 */
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

3. grid + align-items + justify-content

.parent{
    display: grid;
    justify-content: center;
    align-items: center;
}

4. table-cell + vertical-align: middle; + text-align: center;

.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center; 
}
.child{
    display: inline-block;
}

块级元素水平居中： margin: 0 auto;

非块级元素水平居中，子容器要为行内块：text-align: center;

7. 说说flexbox

是什么

弹性布局是css中一种简便高效的布局方式，弹性布局中有主轴（默认为x轴）和交叉轴（Y轴）的概念，主轴的方向也可以修改，子容器默认在主轴上排列。

属性

在CSS Flexbox布局模型中，容器（父元素）和项目（子元素）各自有一组特定的属性来控制布局行为。下面我将这些属性分为两部分来解释。

容器（父元素）的属性

容器上的Flexbox属性主要用来定义项目的排列方式、对齐方式等。

1. display： 将一个元素设置为Flex容器。可以使用 display: flex; 或 display: inline-flex;。

2. flex-direction： 决定主轴的方向（即项目的排列方向）。

3. flex-wrap： 规定项目是否允许换行。可能值有 nowrap (默认，不允许换行)、wrap (允许换行) 和 wrap-reverse (允许换行且反转顺序)。

4. justify-content： 在主轴上对齐项目。

5. align-items： 在交叉轴上对齐项目。

6. align-content： 当项目有多行时，在交叉轴上对齐行。

7. align-self： 该属性应用于单个项目，允许其覆盖容器的 align-items 属性。

8. flex-flow： 这是 flex-direction 和 flex-wrap 的简写形式。

项目（子元素）的属性

项目上的Flexbox属性主要用于控制单个项目的大小和位置。

1. order： 定义项目的排序顺序。默认值为 0，数值越大则项目越靠后。

2. flex-grow： 指定项目如何分配剩余空间。默认值为 0，表示不分配额外空间。

3. flex-shrink： 指定项目如何缩小以适应可用空间。默认值为 1，表示可以按比例缩小。

4. flex-basis： 定义项目的初始大小。可以是一个长度值（如 200px）、百分比或关键字 auto (默认) 或 content。

5. flex： 这是 flex-grow、flex-shrink 和 flex-basis 的简写形式。默认值为 0 1 auto。

应用场景

1. 三栏布局
2. 水平垂直居中

8. 如何实现三栏布局

1. 弹性布局
2. 浮动布局 （圣杯、双飞翼）
3. grid
4. table
5. position

这个我在另一篇文章中有详细说明：(三栏布局：圣杯、双飞翼与Flex布局详解 - 掘金 (juejin.cn))

9. css 画三角形,梯形

1. 用clip-path，使用 polygon() 函数来定义三角形的顶点坐标。

.box{
    width: 100px;
    height: 100px;
    background-color: #333131;
    clip-path: polygon(0 0, 100px 0, 0 100px);
}

2. 通过设置三个边为透明而剩下的一个边为可见颜色来实现

.box {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent transparent #6faf1c;
}

3. 画梯形也可以用边框透明来实现。

.box {
    width: 100px;
    height: 100px;
    border: 100px solid;
    border-color: transparent transparent #6faf1c transparent;
}

10. 画一条0.5px的线

在CSS中，要绘制一条非常细的线（例如0.5px），通常的方法可能无法直接实现，因为大多数浏览器渲染时会对小于1px的值进行舍入处理。可以用transform方法。

transform: scaleY(0.5);

transform: scaleY(0.5); 是一个CSS属性，用于改变元素在垂直方向上的尺寸。这里的 scaleY() 函数是一个缩放函数，它接受一个数值参数，表示垂直方向上的缩放比例。0.5: 这个数值是缩放因子，意味着元素将在垂直方向上缩小至原来的一半大小。