前端高频面试题-HTML和CSS篇（二）

💻 前端高频面试题-HTML和CSS篇（二） 🏠专栏：前端面试题
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

前端高频面试题-HTML和CSS篇（二）

本文主要讲述的前端高频面试题知识有：

1. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
2. 怎么触发BFC，BFC有什么应用场景？
3. flexbox(弹性盒布局模型)是什么，适用什么场景？
4. rem em px vw vh 百分比区别

一. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

(1) 背景

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类：

• 居中元素（子元素）的宽高已知
• 居中元素宽高未知

(2) 实现水平垂直居中方式

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

1. 利用定位+margin:auto

先上代码：

<style>    .father {        position: relative;        width: 500px;        height: 300px;        border: 1px solid #0a3b98;   }    .son {        position: absolute;        top: 0;        left: 0;        right: 0;        bottom: 0; margin: auto;width: 100px;        height: 40px;        background: #f0a238;    }
</style>
<div class="father">    <div class="son"></div>
</div>

父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

2. 利用定位+margin:负值

绝大多数情况下，设置父元素为相对定位， 子元素移动自身50%实现水平垂直居中

<style>    .father {        position: relative;        width: 200px;        height: 200px;        background: skyblue;    }    .son {        position: absolute;        top: 50%;        left: 50%;        margin-left:-50px;        margin-top:-50px;        width: 100px;        height: 100px;        background: red;    }
</style>
<div class="father">    <div class="son"></div>
</div>

3. 利用定位+transform

实现代码如下：

<style>    .father {        position: relative;        width: 200px;        height: 200px;        background: skyblue;    }    .son {        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%,-50%); width: 100px;        height: 100px;        background: red;    }
</style>
<div class="father">    <div class="son"></div>
</div>

translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%
这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高

4. table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

<style>    .father {        display: table-cell;        width: 200px;        height: 200px;        background: skyblue;        vertical-align: middle;        text-align: center;    }    .son {        display: inline-block;        width: 100px;        height: 100px;        background: red;    }
</style>
<div class="father">    <div class="son"></div>
</div>

5. flex 弹性布局

还是看看实现的整体代码：

<style>    .father {        display: flex;        justify-content: center;        align-items: center;        width: 200px;        height: 200px;        background: skyblue;    }    .son {        width: 100px;        height: 100px;        background: red;    }
</style>
<div class="father">    <div class="son"></div>
</div>

css3中了flex布局，可以非常简单实现垂直水平居中
这里可以简单看看flex布局的关键属性作用：

• display: flex时，表示该容器内部的元素将按照flex进行布局
• align-items: center表示这些元素将相对于本容器水平居中
• justify-content: center也是同样的道理垂直居中

6. grid 网格布局

<style>    .father {            display: grid;            align-items:center;            justify-content: center;            width: 200px;            height: 200px;            background: skyblue;         }        .son {            width: 10px;            height: 10px;            border: 1px solid red        }
</style>
<div class="father">    <div class="son"></div>
</div>

这里看到，gird网格布局和flex弹性布局都简单粗暴

margin自我计算

小结

上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有：

• 利用定位+margin:auto
• 利用定位+transform
• 利用定位+margin:负值
• flex布局
• grid布局

(3) 总结

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

水平居中

• 行内元素可设置：text-align: center
• flex布局设置父元素：display: flex; justify-content: center

垂直居中

• 单行文本父元素确认高度：height === line-height
• 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle

块级元素居中布局

水平居中

• 定宽: margin: 0 auto
• 绝对定位+left:50%+margin:负自身一半

垂直居中

• position: absolute设置left、top、margin-left、margin-top(定高)
• display: table-cell
• transform: translate(x, y)
• flex(不定高，不定宽)
• grid(不定高，不定宽)，兼容性相对比较差

(4) 参考文献

https://juejin.cn/post/6844903982960214029#heading-10

二. 怎么触发BFC，BFC有什么应用场景？

(1) BFC概念

先看下MDN上关于BFC的定义:

块格式化上下文( Block Formatting Context ，
BFC) 是Web页面的可视CSS渲染的一部分， 是块盒子的布局过程发生的区域，也是浮动元素与其他元交互的区域。

具有BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素,并诅BFC 具有普通容器所没有的一些特性。

通俗一点来讲, 可以把BFC理解为一个封闭的大箱子,箱子内
部的元素无论如何翻江倒海，都不会影响到外部。

除了BFC，还有:

• IFC (行级格式化上下文) - inline 内联
• GFC (网格布局格式化上下文) - display: grid
• FFC (自适应格式化上下文) - display: flex 或display: inline-flex

注意:同一个元素不能同时存在于两个BFC 中。

(2) BFC的触发方式

MDN_上对于BFC的触发条件写的很多，总结一下常见的触发方式有(只需要满足-一个条件即可触发BFC的特性) :

• 根元素，即<html>
• 浮动元素: float 值为left 、right
• overflow 值不为visible ，即为auto、scroll、hidden
• display 值为inline-block、table-cell 、table-caption、table、inline-table、f1ex 、inline-flex、grid 、inline-grid
• 绝对定位元素: position 值为absolute 、fixed

(3) BFC的特性

• BFC题面上的一个独立容器，容器里面的子元素不会影
  响外面的元素。
• BFC内部的块级盒会在垂直方向上一一个接一个排列
• 同一BFC下的相邻块级元素可能发生外边距折叠， 创建
  新的BFC可以避免外边距折叠
• 每个元素的外边距盒( margin box )的左边与包含块边框
  盒( border box )的左边相接触(从右向左的格式的话,
  则相反) , 即使存在浮动
• 浮动盒的区域不会和BFC重璽
• 计算BFC的高度时，浮动元素也会参与计算

(4) 应用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

• 自适应两栏布局
• 防止外边距重叠

三. flexbox(弹性盒布局模型)是什么，适用什么场景？

(1) 认识flex布局

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。
采用Flex布局的元素，称为flex容器container。
它的所有子元素自动成为容器成员，称为flex项目item。

当我们为盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效。

flex布局（其他叫法：伸缩布局、弹性布局、伸缩盒布局、弹性盒布局）

给一个元素设置了display: flex/inline-flex（块级元素/行内元素转为弹性盒子），那么这个元素就变成了弹性容器，这个元素的儿子们就变成了弹性项目，不会影响到孙子（但可以嵌套使用）

总结：flex布局原理就是：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。（父盒子：弹性容器，子元素：弹性项目）

flex 布局父项常见的属性

属性	描述
flex-direction	设置主轴的方向**(默认x轴或叫行、row)**
flex-wrap	设置子元素是否换行（默认不换行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap
justify-content	设置主轴上的子元素排列方式
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）

flex-direction 属性

决定主轴的方向(即项目的排列方向)

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端

以下两个了解就行：

• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿

flex-wrap 属性（重要）

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

默认不换行，子元素宽度超过父元素宽度时，自动压缩子元素宽度

属性值	描述
nowrap	不换行**（默认）**
wrap	换行
wrap-reverse	换行，第一行在下方

flex-flow 属性

复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow:row wrap;

justify-content 属性

定义了项目在主轴上的对齐方式

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

• flex-start：默认，顶端对齐（从头部开始，如果主轴是x轴，则从左到右）
• flex-end：末端对齐
• center：居中对齐
• space-between：两端对齐，中间自动分配（先两边贴边，在平分剩余空间）（重要）
• space-around：自动分配距离（平均分配剩余空间）

align-content 属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

属性值	描述
flex-start	没有行间距
flex-end	底对齐没有行间距
center	居中没有行间距
space-between	两端对齐，中间自动分配
space-around	自动分配距离
stretch	设置子项元素高度平分父元素高度**（默认值）**

align-items 属性

定义项目在交叉轴上如何对齐

属性值	描述
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch	拉伸**（默认值）**

flex 布局子项常见属性

属性	描述
align-self	控制子项自己在侧轴的排列方式
flex-grow	控制某一个弹性项目如何增长
flex-shrink	控制某一个弹性项目如何收缩
flex-basis	元素在主轴的基准值（尺寸）
flex	子项目占的份数
order	定义子项的配列顺序（前后顺序）

align-self 属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

注意：align-self 属性可重写灵活容器的 align-items 属性

属性值	描述
auto	**默认值。**元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch	元素被拉伸以适应容器。
Center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	项目内部文本基线对齐

flex-grow 属性

如果主轴方向空间盈余，控制每个项目如何变大父元素的盈余的尺寸，项目按照取值的占比，各自增长各自的尺寸。

flex-grow: 默认值（0）

不分配空间 不扩展

支持：数值（1 2 3 4 …）

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

flex-shrink 属性

如果主轴方向空间不足，控制每个项目如何变小父元素收缩的尺寸，项目按照取值的占地，自动分配各自收缩的尺寸

flex-shrink:

• 1 默认值 收缩
• 0 不收缩

支持：数值 1 2 3 4 …

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

在容器宽度有剩余时，flex-shrink也是不会生效的

flex-basis 属性

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

支持：

• auto 默认
• 数值
• 百分比

当设置为0的是，会根据内容撑开

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex 属性

flex: 增长 收缩 尺寸;

注：顺序不能换

• flex: 1：平分空间
• flex: auto 等比例缩放

order 属性

说明：

number排序优先级，数字越大越往后排，默认为0，支持负数。

flex 布局的应用场景

1. 实现元素水平垂直方向的居中

2. 两栏三栏自适应布局中

四. rem em px vw vh 百分比区别

(1) 介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性

从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位

利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等

(2) 单位

在css单位中，可以分为长度单位、绝对单位，如下表所指示

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

这里我们主要讲述px、em、rem、vh、vw

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

特点：

• em 的值并不是固定的
• em 会继承父级元素的字体大小
• em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
• 任意浏览器的默认字体高都是 16px

举个例子

<div class="big">我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

样式为

<style>html {font-size: 10px;  } /*  公式16px*62.5%=10px  */ .big{font-size: 1.4rem}.small{font-size: 1.2rem}
</style>

这时候.big元素的font-size为14px，而.small元素的font-size为12px

rem

rem，相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点：

• rem单位可谓集相对大小和绝对大小的优点于一身
• 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

• 在桌面端，指的是浏览器的可视区域
• 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

• 对于普通定位元素就是我们理解的父元素
• 对于position: absolute;的元素是相对于已定位的父元素
• 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

(3) 总结

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪