CSS面试题（1）｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天 CSS相关面试题汇总(1)(最后

这是我参与「第四届青训营」笔记创作活动的的第2天

CSS相关面试题汇总(1)(最后公布答案)

[元素水平垂直居中的几种方式？典中典]
[写CSS时用过的长度单位有哪些？并简单介绍]
[如何实现左边宽度固定，右侧响应式的布局？]
[用CSS实现元素隐藏的几种方式]
[谈谈对常见选择器的权重与理解]
[CSS 如何设置一行和多行超出显示省略号]
[简述CSS中position的常见值及应用场景]
[简述一下伪类与伪元素的区别，以及如何使用]
[简单讲一下CSS中的层叠上下文和层叠顺序]
[CSS 如何实现固定长宽比的元素]

列举了10道相关的面试题，请先思考几分钟是否有一个合理的回答之后，再看下面的答案解释

（部分答案是自己从网上搜素资料后总结，不一定完全正确，仅供参考）

元素水平垂直居中的几种方式.

1）在将元素绝对定位为 top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负 margin 实现垂直水平居中。跨浏览器支持比较好，不过都2022年了，IE应该都灭绝了

.parent { 
    position: relative; 
} 
.child { 
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%; 
    left: 50%;
    margin: -70px 0 0 -170px; 
}

2）如果宽高未知，在将元素绝对定位为 top: 50%; left: 50%;后，可以使用 transform 属性来做负的 50%移动（基于当前元素宽高）。

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

3）对 flexbox 进行垂直水平居中，只需设置两个属性为 center: align-items、justify-content。

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

4）父容器设置为 grid 布局后，子元素直接 margin: auto;即可实现垂直水平居中

body, html { 
    height: 100%;
    display: grid;
} 
span {
    /* thing to center */ 
    margin: auto;
}

写CSS时用过的长度单位有哪些？

长度单位	描述
px	设备上的像素点
%	相对于父元素的百分比
em	相对于当前元素的字体大小
rem	相对于根元素的字体大小
vw	相对于视窗宽度的百分比
vh	相对于视窗高度的百分比

如何实现左边宽度固定，右侧响应式的布局？

1）使用flex布局实现

.container {
  display: flex;
}

.left {
 /* 长度未知 */
  flex-basis: ***px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
}

2）使用grid布局实现

.container {
  display: grid;
  grid-template-columns: ***px 1fr;
}

用CSS实现元素隐藏的几种方式？

1）.使用overflow: hidden 实现元素的溢出隐藏，占据空间，无法响应事件

2）.opacity：0 把透明度调为0，当元素设置为透明的时候，就可以实现隐藏的效果，占据空间，可以实现响应事件

3）.visibility： hidden 和opacity 差不多道理，但是占据空间，无法响应事件

4）. display: none 最经典的隐藏元素的方式，既不占据空间，也不响应任何事件。

学过vue，应该了解的一点冷知识 v-if 和 v-show 实现隐藏元素的区别：

v-show 的隐藏原理，渲染dom之后经过设置display的属性进行切换，来实现相应的效果，适用于频繁切换显示的元素渲染

v-if 的隐藏原理，渲染dom前经过判断条件，不渲染不需要的dom元素，适用于不需要切换显示的元素或者只显示一次的元素渲染

5）.position 设置absolute，top和left为一个特别大或特别小的数，不占据空间，无法点击；设置成relative，占据空间，无法点击

6）.z-index 设置为一个负数，不占据空间，无法点击

7）.transform: scale(0,0) 占据空间，无法点击

谈谈对常见选择器的权重与理解？

!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器

CSS 如何设置一行和多行超出显示省略号

一行超出显示省略号：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行超出显示省略号：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

简述CSS中position的常见值及应用场景？

static: 默认值，无定位，top、right、bottom、left 不起任何作用
relative: 相对定位
absolute: 绝对定位，脱离文档流，上下左右以最近的定位父元素为参照系，常用于在相对定位的盒子中调整具体位置
fixed: 脱离文档流，上下左右以浏览器视口为参照系。常用于 页面的右下角的返回置顶的按钮
sticky: relative 与 fixed 的结合体

简述一下伪类与伪元素的区别，以及如何使用

伪元素

::before
::after
::selection
::placeholder
::marker

伪类

:hover
:first-child
:last-child
:nth-child

简单讲一下CSS中的层叠上下文和层叠顺序？

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就 更容易显示在我们面前。 “层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里的层叠顺序是规则。

Background, border < 负z-index < block < float < inline, inline-block < z-index:auto/ z-index:0 < 正z-index

CSS 如何实现固定长宽比的元素

使用padding-top 维持宽高比

.container {
  width: 100%;
  padding-top: 56.25%;
}

使用css3 新特性 aspect-ratio

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

CSS面试题（1） ｜ 青训营笔记

CSS相关面试题汇总(1)(最后公布答案)

CSS面试题（1）｜青训营笔记