高频前端面试题——css篇(二)

613 阅读4分钟

前言

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

高频前端面试题——css篇(一) - 掘金 (juejin.cn)

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>

image.png

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

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-directionflex-wrap 的简写形式。

项目(子元素)的属性

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

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

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

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

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

  5. flex: 这是 flex-growflex-shrinkflex-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);
}
  1. 通过设置三个边为透明而剩下的一个边为可见颜色来实现
.box {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent transparent #6faf1c;
}

image.png

  1. 画梯形也可以用边框透明来实现。
.box {
    width: 100px;
    height: 100px;
    border: 100px solid;
    border-color: transparent transparent #6faf1c transparent;
}

image.png

10. 画一条0.5px的线

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

transform: scaleY(0.5);

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