JZTXT

常见面试题汇总

发布时间 2023-09-22 11:05:20作者: 好色的菜狗
现在到处都能搜到面试题，也说的很全，可有时候发现，刷的有时候面试官也不问，就跟考试一样，复习的都是被面试官跳过的，这样就很被动，要是问到知识盲区了，还有可能直接社死。
请教了一些我认为很强的大佬们，收集了一些问的我或者会被常问到的问题，目的就是面试前能临阵磨磨枪，笔记记一堆，那时候找起来就很麻烦。秉着便于查看维护，分享精神，就把这个放开，希望大佬们看到后，帮我补全
本狗只是个资料的搬运工，只接受纠错和补全问题，不喜勿喷，谢谢
一、html,css部分
0、说一说HTML语义化？

①代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
②有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
③提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
④便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
⑤方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

常见的语义化标签有header footer main article section aside nav等

1、在HTML中，行级元素和块级元素。

  1. 块级元素（Block-level Elements）：

    • 块级元素以块的形式显示，占据一整行或多整行的空间。
    • 块级元素可以设置宽度、高度、内外边距等样式属性。
    • 常见的块级元素有<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。

  2. 行级元素（Inline Elements）：

    • 行级元素以行内的形式显示，只占据自身内容所需的空间，不会独占一行。
    • 行级元素的宽度和高度通常由其内容决定，不能设置宽度、高度和上下内外边距。
    • 常见的行级元素有<span>、<a>、<strong>、<em>、<img>、<input>等。

需要注意的是，HTML5中还引入了一种混合型元素，可以同时具有块级元素和行级元素的特性。这些元素被称为“块级行内元素”（Block-level Inline Elements），例如<button>、<select>和<textarea>。这些元素在显示上类似于行级元素，但是可以设置宽度、高度和上下内外边距。

2、说一说盒模型？

盒模型：分为两种
①标准盒模型：【`box-sizing:content-box` 】
`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。
②怪异盒模型：【`box-sizing:border-box`】
包含了`padding`和`border `，设置width和height时设置的是盒子的大小，会压缩content区域。

3、说一下浮动？

1.浮动的作用：常用于图片，可以实现文字环绕图片
2.浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列
3.解决塌陷问题：①父元素中添加overflow：hidden;
②给父元素添加高度。
③建立空白div，添加clear
④在父级添加伪元素::after{ content : ' ', clear : both , display : table}

4、说一说样式优先级的规则是什么？

样式优先级的规则如下（按从高到低的顺序）：

  1. !important：具有!important声明的样式具有最高优先级，会覆盖其他所有样式规则。但是滥用!important会导致样式管理困难，请谨慎使用。

  2. 内联样式：直接在HTML元素的style属性中定义的样式具有较高的优先级。例如，<div style="color: red;">Hello</div>。

  3. ID选择器：通过元素的ID选择器指定的样式具有较高的优先级。例如，#myDiv { color: blue; }。

  4. 类选择器、伪类选择器和属性选择器：通过类选择器（如.myClass）、伪类选择器（如:hover）或属性选择器（如[type="text"]）指定的样式优先级较低于ID选择器。如果存在多个具有相同优先级的样式规则，则后面定义的规则会覆盖先前定义的规则。

  5. 元素选择器和伪元素选择器：通过元素选择器（如div）或伪元素选择器（如::before）指定的样式优先级最低。如果存在多个具有相同优先级的样式规则，则后面定义的规则会覆盖先前定义的规则。

需要注意的是，当多个规则具有相同的优先级时，后面定义的规则会覆盖先前定义的规则。此外，样式优先级还与选择器的特异性（Specificity）相关，即选择器中标签名、类、ID和内联样式的数量和顺序。具有更高特异性的选择器将具有更高的优先级。

5、说一说CSS尺寸设置的单位

  1. 像素（px）：最常用的单位之一，表示固定的像素值。例如：width: 200px;

  2. 百分比（%）：相对于父元素的尺寸进行计算。例如：width: 50%; 表示宽度为父元素宽度的50%。

  3. 视窗单位（vw、vh、vmin、vmax）：相对于视口（浏览器窗口）的尺寸进行计算。

    • vw（viewport width）：视口宽度的百分比。例如：width: 50vw; 表示宽度为视口宽度的50%。
    • vh（viewport height）：视口高度的百分比。例如：height: 100vh; 表示高度等于视口高度。
    • vmin（viewport minimum）：视口宽度和高度中较小的那个。例如：padding: 5vmin; 表示内边距为视口宽度和高度中较小值的5%。
    • vmax（viewport maximum）：视口宽度和高度中较大的那个。例如：font-size: 4vmax; 表示字体大小为视口宽度和高度中较大值的4%。

  4. 相对单位：

    • em：相对于当前元素的字体大小。例如：padding: 1em; 表示内边距为当前元素字体大小的1倍。
    • rem：相对于根元素（通常是<html>）的字体大小。例如：font-size: 1rem; 表示字体大小为根元素字体大小的1倍。

  5. 无单位或自动（auto）：默认情况下，某些属性（如margin、padding、width和height）可以设置为无单位或自动，表示由浏览器自动计算尺寸。

除了以上列出的单位之外，还有一些其他的单位，如英寸（in）、厘米（cm）、毫米（mm）、点（pt）和派卡（pc）。这些单位通常用于打印样式表和特定设备上，而在网页设计中较少使用。

6、CSS之BFC理解
BFC的介绍
BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精就不能伤害师父和师弟。
BFC的作用就是一种隔离和保护。

比如说很多页面都有广告的部分，也提供用户点击关闭的按钮，
这样子的广告一般都是用BFC创建的，因为用户点击关闭以后不能影响整个页面的布局，

创建BFC的几种常见方式
​​position:absolute​​​或​​position:fixed​​
​​float:left​​​或​​float:right​​​，只要不是​​float:none​​就可以
​​overflow:auto​​​或​​overflow:hidden​​​或​​overflow:scroll​​​，只要不是​​visible​​均可
​​display:inline-block​​​或​​display:flex​​

7、说几个未知宽高元素水平垂直居中方法
1. 设置元素相对父级定位`position:absolute;left:50%;top:50%`，
让自身平移自身高度50%`transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式
2. 设置元素的父级为弹性盒子`display:flex`，
设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center`

正常会问，宽高元素水平垂直居中方法

1).flex布局设置居中

  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
View Code

2).flex-给子项设置

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}
View Code

3).绝对定位

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
View Code

4).tabel-cell实现垂直居中

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}
View Code

5).grid设置居中

width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
  align-items: center;
  justify-content: center;
View Code

6).grid给子项设置

.box {
 width: 200px;
 height: 200px;
 border: 1px solid;
 display: grid;
}
.child {
 margin: auto;
}
View Code

7).给容器加给伪元素

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
View Code

8).还有一种奇葩的方法，但是也能解决居中

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  background: red;
  width: 100px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
View Code

8、说一说三栏布局的实现方案

1.圣杯布局、双飞翼布局
2.父元素设置flex，左右宽度固定，中间flex：1(剩余部分空间)
示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style media="screen">
        html *{
          padding: 0;
          margin: 0;
        }
        .layout {
            margin-bottom: 20px;
        }
        .layout article div{
          min-height: 100px;
        }
      </style>
</head>
<body>
    <!-- 需求： 实现一个三栏布局，左边200px，右边300px，中间自适应-->
    <!-- 方式一：浮动布局 -->
    <section class="layout float">
        <style media="screen">
            .layout.float .left{
                float:left;
                width:200px;
                background: red;
            }
            .layout.float .center{
                background: yellow;
            }
            .layout.float .right{
                float:right;
                width:300px;
                background: blue;
            }
        </style>
        <h1>三栏布局-浮动解决方案</h1>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </article>
    </section>

    <!-- 方式二：绝对定位  -->
    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right>div{
              position: absolute;
            }
            .layout.absolute .left{
              left:0;
              width: 300px;
              background: red;
            }
            .layout.absolute .center{
              left: 300px;
              right: 300px;
              background: yellow;
            }
            .layout.absolute .right{
              right:0;
              width: 300px;
              background: blue;
            }
        </style>
        <h1>三栏布局-绝对定位解决方案</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

    <!-- 方式三： flex布局 -->
    <section class="layout flexbox">
        <style>
            .flexbox {
                margin-top: 110px;
            }
            .flexbox .left-center-right{
                display: flex;
            }
            .flexbox .left-center-right .left{
                width: 200px;
                background: red;
            }
            .flexbox .left-center-right .center {
                flex: 1;
                background: yellow;
            }
            .flexbox .left-center-right .right {
                width: 300px;
                background: blue;
            }
        </style>
        <h1>三栏布局-弹性布局解决方案</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

    <!-- 方式四： table布局 -->
    <section class="layout table">
        <style>
            .table .left-center-right{
                width: 100%;
                height: 100px;
                display: table;
            }
            .table .left-center-right div{
                display: table-cell;
            }
            .table .left {
                width: 200px;
                background: red;
            }
            .table .center {
                background: yellow;
            }
            .table .right {
                width: 300px;
                background: blue;
            }
        </style>
        <h1>三栏布局-表格布局解决方案</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

    <!-- 方式五：网格布局 -->
    <section class="layout grid">
        <style>
            .grid .left-center-right{
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 200px auto 300px;
            }
            .grid .left {
                background:red;
            }       
            .grid .center {
                background: yellow;
            }
            .grid .right {

                background: blue;
            }
        </style>
        <h1>三栏布局-网格布局解决方案</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>
View Code