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

前言

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

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

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

已知父子容器宽高:

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

html 复制代码
<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(父容器 - 子容器)

html 复制代码
margin-left: calc(50% - 子容器宽度/2) 

2. position + margin负值

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

未知父子容器宽高

1. position + transform

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

2. flex + align-items + justify-content

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

3. grid + align-items + justify-content

html 复制代码
.parent{
    display: grid;
    justify-content: center;
    align-items: center;
}

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

html 复制代码
.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() 函数来定义三角形的顶点坐标。
html 复制代码
.box{
    width: 100px;
    height: 100px;
    background-color: #333131;
    clip-path: polygon(0 0, 100px 0, 0 100px);
}
  1. 通过设置三个边为透明而剩下的一个边为可见颜色来实现
html 复制代码
.box {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent transparent #6faf1c;
}
  1. 画梯形也可以用边框透明来实现。
html 复制代码
.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: 这个数值是缩放因子,意味着元素将在垂直方向上缩小至原来的一半大小。

相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
PAK向日葵4 小时前
【算法导论】XM 0823 笔试题解
算法·面试
Liu.7745 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT6 小时前
js基础重点复习
javascript
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋8 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js