2019-09-06发表2024-04-15更新面经32 分钟读完 (大约4796个字)0次访问

面试知识css篇

盒模型

标准盒模型：width 和 height 属性只包含 content 内容区
IE 盒模型：width 和 height 包含了 border、padding 和 content

flex 常用属性，grid 布局

flex 属性：
1.flex-direction 属性，决定主轴方向
2.flex-wrap 属性，控制换行
3.flex-flow 属性，flex-direction 和 flex-wrap 的简写形式，默认值 flex-flow: row nowrap;
4.justify-content 属性，项目主轴上的对齐方式
5.align-item 属性，项目在交叉轴上的对齐方式
6.align-content 属性，多个轴线的时候在元素交叉轴的对齐方式，只有一根轴线时不起作用
flex（子元素的属性）：
1.order 属性,定义项目的排列顺序，数值越小，排列越靠前，默认为 0.
2.align-self 属性，允许单个项目与其他项目不一样的对齐方式，会覆盖 align-items 属性.
3.flex 属性，flex-grow、flex-shrink、flex-basis 简写，默认为 0 1 auto
auto(1 1 auto) none(0 0 auto)
4.flex-grow 属性，定义项目的放大比例，默认为 0，即如果存在剩余空间也不放大，1 等分，一个项目为 2，其他为 1，则前者占据空间是其他的两倍。
5.flex-shrink 属性，定义项目的缩小比例，默认为 1，空间不足则缩小，如果所有项目都为 1，则等比例缩小，如果有的项目为 0，则空间不足时为 0 的不缩小，负值无效
6.flex-basis 属性，项目占据的固定空间

calc, support, media 各自的含义及用法？

@support 主要用于检测浏览器是否支持css的某个属性，相当于条件语句，支持的话写一套样式，
不支持写另外一套样式，例如:

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

calc(): 用于动态计算值，支持 + - * / 运算
  @media查询：可以针对不同的媒体类型定义不同的样式;

img 标签 title 和 alt 属性

alt: 图片加载失败时，显示在网页上的替代文字
title: 鼠标放在图片上的提示文字

SVG 和 Canvas 的区别？

svg:表示以 XML 格式定义图像的可伸缩矢量图形。
canvas：通过 js 来绘制 2D 图形
Canvas 不支持事件处理器，SVG 支持事件处理器
canvas适合频繁更新、实时数据可视化、需要大量交互和动态变化的场景，如游戏。
svg适合静态和少量交互的场景，如地图。

JS 如何设置获取盒子模型对应的宽和高？

dom.style.width/height
dom.currentStyle.width/height (ie 支持)
window.getComputedStyle(dom).width/height
dom.getBoundingClientRect().width/height

CSS 权重（256 进制）

1. ！import  权值：infinite 无穷大

2. 内联样式， 权值1000

3. ID选择器， 权值： 100

4. 类、伪类、属性选择器， 权值： 10

5.标签、伪元素选择器， 权值： 1

6.通配符选择器 *，子选择器 >,相邻选择器 +，权值： 0

权值相等，后来居上

html5 的新特性

1. 添加了article、aside、audio、video、footer、header、nav、section标签
2. 添加了canvas画布和svg渲染矢量图片
3. 添加了一些语义化的标签 header、footer、main、section...
4. input的type值新添加了很多属性（email，search，color，number...）
5. 添加了地理位置定位功能 Geolocation API
6. 添加了web Storage存储功能，localStorage和sessionStorage
7. 使用html5，通过创建cache manifest文件，可以轻松地创建web应用的离线版本
8. web worker创造多线程环境，是运行在后台的javaScript。
9。 服务端推送（EventSource用于接受服务端发送事件通知）

CSS3 新添加的特性？

1. 媒体查询
2. transform，transition，translate，scale，rotate等相关动画效果
3. box-shadow，text-shadow等特效
4. CSS3 @font-face规则，可以引入任意字体
5. CSS3 @keyframes规则，创建动画(配合animation使用)
6. 2D、3D转化
7. 添加了border-radius、border-image、column-count、resize、box-sizing
、outline-offset等属性

样式导入方式及优先级？

引入方式
- 行内样式
- 内联式
- 外链式
- 导入式: @import url(reset.css)
各种方式的优先级
- 行内样式 > 外链式 > 内联式 > @import 导入式
选择器优先原则：!important > 行间样式 > ID 选择器 >class 选择器｜伪类选择器｜属性选择器 >元素选择器｜伪元素选择器 > 通配符选择器｜子选择器选择器｜相邻兄弟选择器

BFC

BFC(block formatting context)翻译为“块级格式化上下文”，它会生成独立的渲染区域
(不影响外面的元素，同时也不受外部元素的影响)，它有一下规则：

内部的 box 会在垂直方向上一个接一个的放置。
内部 box 在垂直方向上的距离由 margin 决定，同属一个 BFC 内的相邻 box 会发生 margin 重叠。
BFC 的区域不会与 float box 发生重叠。
计算 BFC 的高度时，浮动元素也参与计算(清除浮动)

触发 BFC 的条件：

float 属性不为 none
position 为 absolute 或者 fixed
display 为 inline-block、table-cell、table-caption、flex、inline-flex
overflow 不为 visible

有哪些常见的 meta 标签？

指定文档编码
- <meta charset = "UTF-8">
name 属性
- 1.<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>：在移动设备浏览器上，禁用缩放（zooming）功能，用户只能滚动屏幕。
- 2.<meta name=”description” content=””>：告诉搜索引擎，当前页面的主要内容是xxx。
- 3.<meta name=”keywords” content=””>：告诉搜索引擎，当前页面的关键字。
- 4.<meta name=”author” content=””>：告诉搜索引擎，标注网站作者是谁。
- 5.<meta name=”copyright” content=””>：标注网站的版权信息。
http-equiv 属性(http 协议的响应头报文)
- 1.<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
- 2.<meta http-equiv='expires' content='时间' >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
- 3.<meta http-equiv=”Refresh” content=”5;URL”>：告诉浏览器在【数字】秒后跳转到【一个网址】
- 4.<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>：设定页面使用的字符集。
-5.<meta http-equiv=”Pragma” content=”no-cache”>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
- 6.<meta http-equiv=”Window-target” content=”_top”>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。
- 7.<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是 ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。

一、为什么会有白屏和 FOUC 呢？

浏览器再渲染的时候没有请求到或请求时间过长造成的，那么浏览器怎么应对的呢？

白屏：CSS 全部载入解析完成后渲染展示页面，如果没有加载完，就会出现白屏。

FOUC(Flash of Unstyled Content)无样式内容闪烁：用户定义样式表加载之前浏览器
使用默认样式显示文档，用户样式表加载渲染之后，再重新显示文档，造成页面闪烁。

使用 link 标签将样式表放在顶部标签中，防止白屏问题出现。

将 JS 放在标签底部，原因如下：

脚本会阻塞后面内容的呈现

脚本会阻塞其后组件的下载

什么是 DOCTYPE 及其作用？

DOCTYPE 是 document type（文档类型）的缩写。
写法：(声明了浏览器就会进入标准模式，按照 W3C 标准渲染页面)
DOCTYPE 的作用：
- DOCTYPE 是用来声明文档类型和 DTD 规范的，校验文件和代码的合法性。
- 告诉浏览器通过哪种规范（文档类型，DTD）来解析文档。
DTD（document type definition）文档类型定义是一系列的语法规则，用来定义 XML
或 HTML 的文件类型。浏览器会根据它来判断文档类型，决定使用哪种协议来解析，以及切换
浏览器的模式。
浏览器模式

为了能够很好的显示满足标准的页面，又能最大程度兼容不合法的 HTML，浏览器厂商会提供两种
浏览器模式。
- 标准模式：根据 W3C 标准来渲染页面。
- 混杂模式（兼容模式、怪异模式）：浏览器采用更加宽松、向后兼容的方式来渲染页面。

CSS-清除浮动

原文链接

什么是 CSS 清除浮动?

在非 IE 浏览器（如 Firefox）下，当容器的高度为 auto，且容器的内容中有浮动（float 为 left 或 right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的 CSS 处理，就叫 CSS 清除浮动。

清除浮动的方法

方法一：使用带 clear 属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予
.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />
来进行清理。
优点：简单，代码少，浏览器兼容好。
缺点：需要添加大量的无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用 CSS 的 overflow 属性

1	给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动。

方法三：给浮动的元素的容器添加浮动（不太推荐）

1 2	给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

1	什么都不做，给浮动元素后面的元素添加clear:both属性。

方法五：使用 CSS 的：after 伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现
元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix::after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

getomputedstyle 和 style 的区别？

getComputedStyle 方法是只读的，只能获取样式，不能设置；而 element.style 能读写。
getComputedStyle 方法获取的是最终应用在元素上的所有 Css 属性样式(即使没有 css 代码)，
而 element.style 只能获取元素 style 属性中的 css 样式。
getComputedStyle 可以获取伪元素的样式。
兼容性：getComputedStyle 方法在 IE6~IE8 是不支持的。

为什么要语义化？

根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时利于 SEO 的优化。

为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如 title、alt 用于解释名词或解释图片信息、label 标签的活用；
有利于 SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

在 less 中如何将 px 转换为 vw？

.pxToVW (@px, @attr: width) {
  @vw: (@px / 750) * 100;
  @{attr}:~"@{vw}vw";
}

.title{
	.pxToVW(300,width)
	.pxToVW(32,font-size)
}

这里是指，设计图是按照750px的宽度进行设计的,
title 中所有的值都是直接取的设计图的值，通过函数进行统一换算

px % em rem vw/vh有什么区别？

px 基本单位，是绝对单位（其他的都是相对单位）
% 是相对于父元素的宽度比例
em 相对于当前元素或与之最近的设置了 font-size 的父元素的 font-size
rem 相对于根元素的 font-size
vw 屏幕宽度的 1%
vh 屏幕高度的 1%
vmin 取 vw、vh 两者中的最小值
vmax 取 vw、vh 两者中的最大值

offsetHeight、scrollHeight、clientHeight 区别？

offsetHeight、offsetWidth: border + padding + content
clientHeight、clientWidth: padding + content
scrollHeight、scrollWidth: padding + 实际内容尺寸，包括溢出的不可见部分

HTMLCollection 和 NodeList 区别？

Node 和 Element
1. DOM 是一棵树，所有节点都是 Node
2. Node 是 Element 的基类
3. Element 是其他 HTML 元素的基类，如 HTMLDivElement
HTMLCollection 和 NodeList
1. HTMLCollection 是 Element 的集合（elem.children）
2. NodeList 是 Node 集合（elem.childNodes）
3. HTMLCollection 不会包含 Text 和 Comment 节点，NodeList 则会包含

HTMLCollection 和 NodeList 都不是数组，而是“累数组”

// 转换
const arr1 = Array.from(list);
const arr2 = Array.prototype.slice.call(list);
const arr3 = [...list];

如何理解 HTML 语义化？

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

块状元素 & 内联元素？

块级元素
- display: block/table;
- div、h1、h2、table、ul、ol、p 等
内联元素
- display: inline/inline-block;
- span、img、input、button 等；

如下代码，请问 div 的 offsetWidth 是多大？

<style>
  #div {
    width: 100px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
  }
</style>

<div id="div"></div>

offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
答案： 100 + 10 + 1 * 2 = 122px
可以通过：box-sizing: border-box; 使得 offsetWidth=100

margin 纵向重叠问题

如下代码，A 和 B 之间的距离是多少？

<style>
  p {
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>

<p>A</p>
<p></p>
<p></p>
<p></p>
<p>B</p>

相邻元素的 margin-top 和 margin-bottom 会发生重叠
空白内容 p 标签也会重叠
答案：15px

margin 负值问题

margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响

BFC 理解与应用

block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成 BFC 的常见条件
- float 不是 none
- position 是 absolute 或 fixed
- overflow 不是 visible(hidden、auto、scroll)
- display 是 flex、inline-block 等
常见应用：
- 清除浮动
- 阻止 margin 重叠

float 布局

实现圣杯布局和双飞翼布局
- 目的
  - 三栏布局，中间一栏最先加载和渲染
  - 两侧内容固定，中间内容随着宽度自适应
  - 一般用于 PC 网页
- 实现
  - 使用 float 布局
  - 两侧使用 margin 负值，以便和中间内容横向重叠
  - 防止中间内容被两侧覆盖，一个用 padding，一个用 margin

css 定位

absolute 和 relative 定位
- relative 依据自身定位
- absolute 依据最近一层的定位元素定位
  - 定位元素：absolute、relative、fied、body
居中对齐
- 水平居中
  - inline 元素：text-align: center
  - block 元素：margin: auto
  - absolute 元素：left:50% + margin-left 负值
- 垂直居中
  - inline 元素：line-height 的值等于 height 的值
  - absolute 元素：top: 50% + margin-top 负值
  - absolute 元素：transform(-50%, -50%)
  - absolute 元素：top,left,bottom,right=0 + margin: auto

css-图文样式

line-height 如何继承

如下代码，p 标签的行高是多少？

<style>
  body {
    font-size: 20px;
    line-height: 200%; /* 40px */
    line-height: 1.5; /* 16 * 1.5 = 24 */
    line-height: 30px; /* 30px */
  }
  p {
    font-size: 16px;
  }
</style>
<body>
  <p>AAA</p>
</body>

答案： 40px

具体数值，如 30px，则继承该值
写比例，如 2/1.5，则继承当前元素 font-size 的比例
写百分比，如 200%，则继承计算出来的值

css-响应式

常见长度单位
- px，绝对长度单位
- em，相对长度单位，相对于父元素
- rem，相对长度单位，相对于根元素，常用与响应式布局

响应式布局常用方案

media-query，根据不同屏幕宽度设置根元素 font-size
rem，基于根元素的相对单位
rem 的弊端：“阶梯”性

<style>
  @media only screen and (max-width: 374px) {
    html {
      font-size: 86px;
    }
  }
  @media only scrren and (min-width: 375px) and (max-width: 413px) {
    html {
      font-size: 100px;
    }
  }
  @media only scrren and (min-width: 414px) {
    html {
      font-size: 110px;
    }
  }

  body {
    font-size: 0.16rem;
  }

  #div {
    width: 1rem; /* 100px */
  }
</style>

<body>
  <div id="div">div</div>
</body>

网页视口尺寸
- window.screen.height // 屏幕高度
- window.innerHeight // 网页视口高度
  - vh 网页视口高度的 1/100
  - vw 网页视口宽度的 1/100
  - vmax 取两者最大值；vmin 取两者最小值
- document.body.clientHeight // body 高度

inline、block 和 inline-block 的区别？

block 块级元素
- 单独占一行，宽度自动填充父元素宽度
- 可以设置 width、height
- 可以设置 padding、margin
- 块级元素可以包含行内元素和其他块级元素
inline 内联元素（行内元素）
- 不会单独占一行，多个元素并排一行，宽度随内容变化
- 设置 width、height 无效
- 可以设置水平方向的 padding、margin，但是垂直方向设置无效（如 padding-top）无效
- 行内元素只能包含数据和其他行内元素
inline-block 行内块元素
- 不会单独占一行
- 可以设置 width、height
- 可以设置 padding、margin，垂直方向也可以设置生效

css 穿参给 js 的方法

@media (any-hover: none) {
    body::before {
        content: 'hoverNone';
        display: none;
    }
}

// js获取
const hover = getComputedStyle(document.body, '::before').content;
hover就是content对应的值

判断元素是否在可视窗口内

// 方法一：offsetTop - scrollTop <= 视口高度
function isInViewPortOfOne(element) {
  // 获取可视窗口的高度。兼容所有浏览器
  const screenHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  // 获取滚动条滚动的高度
  const scrollTop = document.documentElement.scrollTop;
  // 获取元素偏移的高度。就是距离可视窗口的偏移量。
  const offsetTop = element.offsetTop;
  // 加100是为了提前加载
  return offsetTop - scrollTop <= screenHeight + 100;
}
// 方法二：getBoundingClientRect().top <= 视口高度
function isInViewPortOfTwo(el) {
  const screenHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  return el.getBoundingClientRect()?.top <= screenHeight + 100;
}
// 方法三：IntersectionObserver
// io 为 IntersectionObserver对象 - 由IntersectionObserver()构造器创建
var io = new IntersectionObserver((entries) => {
  // entries 为 IntersectionObserverEntry对象数组
  entries.forEach((item) => {
    // item 为 IntersectionObserverEntry对像
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      // div 可见时 进行相关操作
      console.log(item.target.innerText);
      io.unobserve(item.target); //停止监听该div DOM节点
    }
  });
}); // 不传options参数，默认根元素为浏览器视口
const divArr = [...document.querySelectorAll('.item')];
divArr.forEach((div) => io.observe(div)); // 遍历监听所有div DOM节点

#面经