周帅帅

# 前端面试集合

# HTML面试题

# HTML语义化标签

  1. 让人更容易读懂(增加代码的可读性)

  2. 让搜索引擎更容易读懂(SEO)

# HTML标签块级元素和内联元素

提示

块级元素：会独占一行。内联元素：不会独占一行，会挨着排列

块级元素：div、h1、h2、h3、h4、h5、h6、p、ul、ol、table、dl、dt、address、form等

内联元素：span、img、input、button、a、i、strong、code、sub、sup、em等

# CSS面试题

# 盒模型的宽度计算

区别

标准盒模型和IE盒模型

标准盒模型：属性width和height只包含content，不包括border和padding。

width = content

height = content

标准盒模型

IE盒模型：属性width和height除了包含content外，也包含border和padding。

注意

IE盒模型宽度和高度要想和标准盒模型一样，可以通过box-sizing: border-box代码来实现

width = content + padding(左右) + border(左右)（就是说width已经包含了padding和border值）

height = content + padding(上下) + border(上下)（就是说width已经包含了padding和border值）

IE盒模型

# margin纵向重叠的问题

解答

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 中间空白内容的<p></p>也会重叠
  • 所以下面代码的结果就是30px

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  p {
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: red;
  }
</style>
<body>
  <p>11111111111</p>
  <p></p>
  <p></p>
  <p>2222222</p>
</body>
</html>

# margin负值的问题

解答

  • margin-top和margin-left负值，自身元素向上、向左移动
  • margin-right负值，右侧元素左移，自身元素不受影响
  • margin-bottom负值，下方元素上移，自身不受影响
  • 下面代码想看哪个效果放开哪个注释的代码即可

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    margin: 30px;
  }

  .list {
    width: 500px;
    margin-bottom: 30px;
    border: 1px solid blue;
    padding: 10px 10px;
  }

  .clearfix {
    content: "";
    clear: both;
    display: table;
  }

  .box, .box1 {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }

  .box1 {
    float: left;
  }

  /* 当margin-top为负值时，自身元素向上 */

  /* .item1 {
    margin-top: -20px;
  } */

  /* 当margin-bottom为负值时，下方元素上移，自身不受影响 */

  /* .item1 {
    margin-bottom: -20px;
  } */

  /* 当margin-left为负值时，自身向左移动 */

  /* .item3 {
    margin-left: -20px;
  } */

  /* 当margin-right为负值时，右侧元素左移，自身元素不受影响 */

  /* .item3 {
    margin-right: -20px;
  } */
  
</style>
<body>
  <p>测试margin top和bottom 的负值情况</p>
  <div class="list">
    <div class="box item1">1</div>
    <div class="box item2">2</div>
  </div>

  <p>测试margin left和right 的负值情况</p>
  <div class="list clearfix">
    <div class="box1 item3">3</div>
    <div class="box1 item4">4</div>
  </div>
</body>
</html>

# BFC理解和应用

解释

  • Block format context 块级格式化上下文
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的条件

  1. float不是none
  2. position是absolute或fixed
  3. overflow不是visible
  4. display是flex或inline-block等
  5. html根元素

BFC主要的作用

  1. 清除浮动
  2. 防止同一BFC容器中的相邻元素间的外边距重叠问题

BFC 特性

  1. 内部box会在垂直方向，一个接一个地放置

  2. box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。(完整的说法是：属于同一个BFC的两个相邻box的margin会发生重叠(塌陷)，与方向无关)

  3. 在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)，即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界)

  4. 形成了BFC的区域不会与float box重叠

  5. 计算BFC高度时，浮动元素也参与计算

  6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  img {
      float:left
  }
  /* 我们可以通过注释overflow:hidden查看不同效果 */
  .bfc {
      overflow:hidden;  /* 触发元素BFC */
  }
</style>
<body>
  <div class="box bfc">
    <img src='../images/interview/1.png'>
    <p class="bfc">我是超长的文字<p>
  </div>
</body>
</html>

# float布局和clearfix

# 圣杯布局和双飞翼布局

目的

  • 三栏布局，中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC网页

技术总结

  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖，一个用padding一个用margin

# JavaScript基础知识题

# 值类型和引用类型

值类型

提示

值类型是存储在栈中的，栈是从上往下的

常见的值类型有number、string、Boolean、undefined、Symbol 代码分析

// 值类型
let x = 66;
let y = x;
x = 44;
console.log(y); // 66

值类型的占用空间少，复制对性能造成的影响很小

值类型

引用类型

提示

引用类型是存储在堆中的，堆是从下往上的

常见的引用类型有Object、array、function、null，其中null是特殊引用类型，指针指向为空地址。function函数不用于存储数据，一般不说复制函数和拷贝函数。

引用类型有可能是一个很大的json，第一会导致存储地址太大，第二个在复制值过程中导致很慢，所以放在内存地址中

代码分析

// 引用类型
let x = { age: 24 };
let y = x;
y.age = 30;
console.log(x.age); // 30

引用类型

# typeof 运算符

用处

  • 识别所有值类型
  • 识别函数
  • 判断是否是引用类型(但不能进行细分)

代码分析

let x; console.log(typeof x);                 // 'undefined'
const str = 'zss'; console.log(typeof str);   // 'string'
const n = 88; console.log(typeof n);          // 'number'
const y = true; console.log(typeof y);        // 'boolean'
const s = Symbol('s'); console.log(typeof s); // 'symbol'
console.log(typeof console.log);              // 'function'
console.log(typeof function () {});           // 'function'

// 能识别引用类型(但不能进行细分)
console.log(typeof null);       // 'object'
console.log(typeof ['x', 'y']); // 'object'
console.log(typeof { x: 66 });  // 'object'

# 深拷贝111

# ES6

# var和let和const

let和var区别

  • var声明的变量会挂载到window上，let不会
  • var可以重复声明，let不能重复声明
  • var没有块级作用域，let有块级作用域
  • var可以进行变量提升，let不能变量提升
  • var没有暂时性死区，let有暂时性死区

const具备上面let的所有特性

let和const区别

  • const不能重新赋值，let可以重新赋值
  • const声明时必须初始化默认值，let可以没有默认值
  • const一般声明的变量大写
更新时间: 1 天