HTML

1、什么是HTML语义化？

在编程中，语义是指代码的含义HTML元素起什么作用，扮演什么角色。简单概括为:在适当的位置使用适当的标签，用正确的标签做正确的事情。

2、HTML五种新的语义元素？

Header nav article section aside footer main stong em small

为什么要语义化？

清晰的代码结构：使页面没有css在这种情况下，它可以呈现出良好的内容结构
有利于SEO: 爬虫依靠标签来确定关键字的权重，从而与搜索引擎建立良好的沟通，帮助爬虫获取更有效的信息
提升用户体验：例如title、alt可用于解释名称或图片信息label标签的灵活运用。
便于团队开发和维护：语义化使代码更可读，使其他开发人员更了解你html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

4、b和label的区别？

虽然两者在网页上显示效果相同，但实际目的不同。

<b> 这个标签对应bold ,也就是说，文本粗化的目的只是为了粗化显示文本，这是一种风格/风格需求

<label>这个标签意味着加强，这意味着文本更重要，提醒读者/终端注意。为了实现这一目标，浏览器和其他终端将其粗体显示；

<b>为加粗而加粗，<label> 加粗以标注重点。

最重要的区别是风格标签和语义标签的区别。最容易理解的场景是盲人朋友使用阅读设备阅读网页： <label> 会重读，<b> 不会

5、Iframe有哪些缺点？

iframe会阻塞主页Onload事件；搜索引擎的搜索程序不能解释这个页面，不利于SEO；

iframe与主页共享连接池，浏览器对同一域的连接有限制，会影响页面的并行加载；

使用iframe这两个缺点之前需要考虑。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值可以绕过以上两个问题。

6、说说减少DOM数量方法？

伪元素可以使用，阴影实现的内容不能使用DOM实现，如去除浮动、实现风格等；
按需加载，减少不必要的渲染；
合理的结构，语义标签，减少代码；

8、Html5有哪些新特性？

1.拖拽释放(Drag and drop) API

2.语义化更好的内容标签( header,nav,footer,aside,article,section，main )

3.音频、视频API(audio,video)

4.画布(Canvas) API

5.地理(Gealocation) API

6.本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;

7.sessionStorage的数据在浏览器关闭后自动删除

8.表单控件, calendar、date、 time、 email、url、search

9.新的技术webworker, websocket, Geolocation

9、如何区分html和html5?

1.文档类型声明

<!-- html声明 -->

<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN" "http://mw.w3.org/TR/xhtn11/DTD/xhtml transitional.dtd"> 

<!-- html5声明 -->

<!DOCTYPE html>

2.结构语义

Html:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div> , 这样表示网站的头部

Html5:在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、 footer、header、nav、 section , 这些通俗易懂

10、前端如何处理网站seo？

1.突出重要内容

合理的设计title 、description 和keywords

<title>标题:只强调重点即可,尽量做到每个页面的<title> 标题中不要设置相同的内容。

<meta keywords>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。

<meta description>标签:网页描述,需要高度概括网页内容,切记不能太长、过分堆砌关键词,每个页面也要有所不同。

2.语义化书写HTML代码,符合W3C标准

尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和”蜘蛛”都一目了然。比如: h1-h6是用于标题类的，<nav> 标签是用来设置页面主导航,列表形式的代码使用ul或ol ,重要的文字使用label等。

3.<a>链接

页内链接,要加title 属性加以说明,让访客和”蜘蛛”知道。而外部链接,链接到其他网站的,则需要加上rel=“nofollow” 属性,告诉"蜘蛛” 不要爬，因为一旦"蜘蛛”爬了外部链接之后,就不会再回来了。

4.正文标题要用h1标签

h1标签自带权重，"蜘蛛”认为它最重要,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo.上可以加H1标签。副标题用<h2> 标签,而其它地方不应该随便乱用h标题标签。

5.<img>应使用"alt"属性加以说明

当网络速度很慢,或者图片地址失效的时候,就可以体现出alt属性的作用,他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。

6.表格应该使用<caption> 表格标题标签

caption元素定义表格标题。caption 标签必须紧随table标签之后

7.<label> 、<em>标签

需要强调是使用<label>标签在搜索引擎中能够得到高度的重视，它能突出关键词,表现重要的内容，<em>标签强调效果仅次于<label> 标签; <b>、<i> 标签:只是用于显示效果时使用,在SEO中不会起任何效果。

8.重要内容不要用JS输出

因为”蜘蛛" 不会读取JS里的内容,所以重要内容必须放在HTML里。前端框架针对SEO的缺陷,可通过服务端渲染弥补

9.尽少使用iframe框架

因为"蜘蛛”一般不会读取其中的内容。

10.搜索引擎会过滤掉display:none其中的内容

11.蜘蛛只能抓取a标签中href

<a href= "Default.aspx?id=1" >测试</a>最好后面不要带参数<a href= "Default.aspx" >测试</a>如果带上参数蜘蛛不会考虑的。这样的话,就需要用到URL写了。

12.蜘蛛不会执行JavaScript

换句话说如果在a标签中使用了onclick蜘蛛是不会抓到的。

13.蜘蛛只能抓到get请求的页面,不会抓到post请求的页面

14.我们希望网页的前台页面全部被蜘蛛抓到

但是不希望后台页面被蜘蛛抓到,蜘蛛可没有那么智能,知道你的网站哪个是前台页面,哪个是后台页面。这里就需要创建一个名为"robots.txt” (注意robots.txt是一个协议,不是命令, -般最好要遵守的robots.txt是搜索引擎搜索该网站时的第一个文件。

11、JavaScript标签的async和defer属性的区别？

两者共同点都是使脚本异步加载

defer 属性在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本是顺序执行的

async 属性当脚本加载完成后立即执行js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

当一个script标签内同时包含defer与async属性时，只会触发async ,不会触发defer ,除非浏览器不兼容async。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

13、Doctype的作用？严格模式和混杂模式的区别？

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。

严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面

混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

14、Meta有哪些属性，作用是什么?

meta标签用于描述网页的元信息，如网站作者、描述、关键词，meta通过name=xxx和content=xxx的形式来定义信息，常用设置如下：

meta元素包含四大属性

charset属性声明了页面的字符编码常用的值: UTF-8(Unicode字符编码)、 ISO-8859-1(拉J字母表的字符编码)

content属性通常配合name或http-equiv使用,能够给这两个属性提供一个值

http-equiv属性可用用做 HTTP头部的某些作用,通过定义该属性可以改变服务器和用户代理的行为。

name属性用于定义页面的元数据。他不能与http-equiv、charset共存。通常是content配合使用。

15、前端性能优化

内容优化

(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。

(2)减少DNS查找

(3)避免重定向（302.303）

(4)使用Ajax缓存

(5)延迟加载组件,预加载组件

(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。

(7)最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

Cookie优化

(1)减小Cookie大小

(2)针对Web组件使用域名无关的Cookie

css优化

(1)将CSS代码放在HTML页面的顶部（在文档内加载你的样式表，这样做的好处是：提高网页渲染性能，避免网页出现白屏或者是没有样式的内容）

(2)避免使用CSS表达式

(3)使用<link>来代替@import

(4)避免使用Filters

js优化

(1)将JavaScript脚本放在页面的底部。

(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

(3)缩小JavaScript和CSS

(4)删除重复的脚本

(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。

(6)减少作用域链查找

(7)在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。

图片优化

(1)合理控制图片大小

(2)通过CSS Sprites优化图片（这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销）

(3)不要在HTML中使用缩放图片

(4)图标尽量使用矢量图标

16、优雅降级和渐进增强？

渐进增强：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

1.优雅降级是从复杂的现状开始，并试图减少用户体验的供给

2.渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

3.降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

CSS

1、让一个div水平垂直居中

   div {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -250px;
      width: 500px;
      height: 500px;
      background: yellow;
      z-index: 1;
    }

   div {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 500px;
      background: yellow;
      z-index: 1;
      transform: translate3d(-50%, -50%, 0);
    }

.parent {
  display: flex;
}
.child {
  margin: auto;
}

2、介绍一下BFC 以及如何触发BFC

什么是BFC？

BFC全称 Block Formatting Context 即块级格式上下文，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

BFC的渲染规则是什么？

BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）

BFC的区域不会与float的元素区域重叠

BFC内部的元素会在垂直方向上放置

BFC内部两个相邻元素的margin会发生重叠

如何触发BFC？

根元素，即HTML元素

float不为 none

overflow的值不为 visible

position 为 absolute 或 fixed

display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC在布局中的应用？

防止margin重叠（塌陷）

自适应多栏布局

清除内部浮动

3、display:none和visibility：hidden的区别

display:none

隐藏后的元素不占据任何空间

给子元素设置display：none 不会显示出来

修改后会引起回流

会影响计数器的计数(ol)

visibility：hidden

隐藏后的元素空间依旧保留

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来

修改后不会引起回流

不会影响计数器的计数(ol)

4、清除浮动的方法

设置父元素高度

设置父元素的高度解决的是元素浮动产生的父元素高度塌陷问题,其内部元素浮动影响并未彻底清除,且需要进行计算然后再设置, 比较固定，一旦元素的高度发生改变,父元素的高度也需要再次计算设置,不够灵活。除非内容高度固定一成不变,否则不推荐使用。

clear +空元素

在浮动元素下方添加空div，并给该元素写css样式:

{clear:both;height:0;veflow.hidden;}

伪元素+clear

使用自带的属性可以非常好的解决浮动影响。该方法直观有效,哪里需要清除就在哪里添加一个兄弟元素,设置clear属性即可,一般属性值都设置为both清除两侧的浮动,也可以根据实际需要清除左侧或右侧,灵活方便直观。在bootstrap 4.0框架中的clearfix应用了该访法，其是在父元素中设置了伪元素,并设置了伪元素隐藏。

.cearfix:after {
  display: block;
  clear: both;
  content: "";
}

利用BFC

根据BFC的规则,计算BFC的高度时,浮动元素也参与计算。因此清除浮动,只需要触发一个BFC即可

5、Css盒模型

盒模型是css中的一种基础设计模式, web页面中的所有元素都可以当做一个盒模型,每一个盒模型都是由content, margin , padding和border等属性组合所构成的

CSS中的盒模型有两种: W3C标准模型和IE的传统模型。不同之处在于两者的计算方式不同。给元素设置宽度width和高度height，在w3c盒子模型中，width和height只是content部分，在IE盒模型中，这个width和height包括了 content、padding和border三个部分

6、Css选择器有哪些？哪些属性可以继承？

选择器

标签名选择器

类选择器

ID选择器

相邻选择器(h1+p )

子选择器(ul> li)

后代选择器(li a)

通配符选择器(* )

属性选择器( a[rel=" external"] )

伪类选择器( a:hover, li:nth-child )

群组选择器( div,p )

继承属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

font-variant:偏大或偏小的字体

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白

letter-spacing：增加或减少字符间的空白

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

visibility: 隐藏元素

caption-side：定位表格标题位置

border-collapse：合并表格边框

border-spacing：设置相邻单元格的边框间的距离

empty-cells：单元格的边框的出现与消失

table-layout：表格的宽度由什么决定

quotes：设置嵌套引用的引号类型

cursor：箭头可以变成需要的形状

非继承属性

display

文本属性：vertical-align、text-decoration

盒子模型的属性：宽度、高度、内外边距、边框等

背景属性：背景图片、颜色、位置等

定位属性：浮动、清除浮动、定位position等

生成内容属性：content、counter-reset、counter-increment

轮廓样式属性：outline-style、outline-width、outline-color、outline

页面样式属性：size、page-break-before、page-break-after

7、flex:1的完整写法是？

flex属性是flex-grow、 flex-shrink、 flex-basis 的简写

flex-grow：定义项目的放大比例,默认为0 ,即如果存在剩余空间，也不放大

flex-shrink:定义了项目的缩小比例,默认为1 ,即如果空间不足,该项目将缩小

flex-basis:定义的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小

flex:1的完整写法是

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

8、行内元素和块级元素什么区别

行内元素会在一条直线上排列(默认宽度只与内容有关) , 都是同一行的,水平方向排列。

块级元素各占据一行(默认宽度是它本身父容器的100% (和父元素的宽度一致 , 与内容无关) ,垂直方向排列。块级元素从新行开始,结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。

行内元素与块级元素属性的不同,主要是盒模型属性上，行内元素设置width无效, height无效(可以设置line-height) , margin上下无效，padding上下无效

9、Link和@important的区别

link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务; @import属于CSS范畴,只能加载CSS。

link引用CSS时,在页面载入时同时加载; @import需要页面网页完全载入以后加载。所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)

link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式;而@import不支持。

10、响应式和自适应的区别

响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；

自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

11、响应式布局实现方案

媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

百分比布局

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

缺点：计算困难。可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

rem布局

REM是CSS3新增的单位，rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位

从对比中我们可以发现，vw单位与百分比类似，但确有区别，前面我们介绍了百分比单位的换算困难，这里的vw更像"理想的百分比单位"。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

Flex弹性布局，兼容性较差

Grid网格布局，兼容性较差

Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

12、重排和重绘？如何避免？

什么是重绘重排

当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算(computedstyle)布局(layout)绘制( paint )以及后面的所有流程,这种行为称为重排。

当改变了某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制这就是重绘。

我们可以发现重排和重绘都会占用主线程,还有JS也会运行在主线程,所以就会出现抢占执行时间的问题,如果你写了一个不断导致重排重绘的动画,浏览器则需要在每一帧都运行样式计算布局和绘制的操作。

触发的一些因素

1.页面首次进入的渲染。

2.浏览器resize

3.元素位置和尺寸发生改变的时候

4.可见元素的增删

5.内容发生改变

6.字体的font的改变

7.CSS伪类激活

css避免

使用transform替代top等位移;

使用visibility替换display: none

避免使用table布局

尽可能在DOM树的最末端改变class

避免设置多层内联样式,尽量层级扁平

将动画效果应用到position属性为absolute或fixed的元素上

避免使用CSS表达式

将频繁重绘或者回流的节点设置为图层,比如video , iframe

CSS3硬件加速( GPU加速) , 可以是transform:translateZ(0)、opacity、 filters、 will-change,Will-change提前告诉浏览器元素会发生什么变化;

Javascript避免

避免频繁操作样式，合并操作

避免频繁操作DOM ,合并操作;

防抖节流控制频率;

避免频繁读取会引发回流/重绘的属性

对具有复杂动画的元素使用绝对定位

13、Css预处理器

CSS预处理器

为CSS增加编程特性的拓展语言，可以使用变量、简单逻辑判断、函数等基本编程技巧;CSS预处理器编译输出还是标准的CSS样式

Less、 Sass都是是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。less变量符号是@ , Sass变量符号是$;

解决的问题

CSS语法不够强大,因为无法嵌套导致有很多重复的选择器

没有变量和合理的样式复用机制,导致逻辑上相关的属性值只能以字面量的形式重复输出,难以维护

常用规范

变量、嵌套语法、混入、@import. 运算、函数、继承

CSS预处理器带来的好处

CSS代码更加整洁,更易维护,代码量更少

修改更快,基础颜色使用变量,一处动处处动.

常用代码使用代码块,节省大量代码

CSS嵌套减少了大量的重复选择器,避免一些低级错误

变量、混入大大提升了样式的复用性

额外的工具类似颜色函数( lighten，darken ,transparentize等等) , mixins , loops ,这些方法使css更像一个真正的编程语言,让开发者能够有能力生成更加复杂的css样式。

14、em px rem vh vw的区别

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

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

rem：相对单位，相对的只是HTML根元素font-size的值。同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

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

15、三栏布局（左右固定100px,中间自适应）

浮动+margin

左float:left; width:100px

右float:right; width:100px

中margin: 0 100px

绝对定位+margin

左top:0; left:0; width:100px

右top:0; right:0; width:100px

中margin: 0 100px

flex布局

左 width:100px;

右 width: 100px;

中 flex：1；

float + calc计算

左 width:100px; float: left;

右 width: 100px; float: right;

中 width: calc(100%-200px)

table布局

父 display:table table-layout: fixed;

左中右 display: table-cell;

左右 width:100px;

中 width: 100%

grid布局

父 display:grid grid-template-columns: 100px auto 100px;

16、弹性盒模型flexbox

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。采用flex布局的元素称为容器，容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列

容器属性：

flex-direction：：决定主轴的方向(即项目的排列方向)

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

flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content：定义了项目在主轴上的对齐方式

align-items：定义项目在交叉轴上如何对齐

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

容器成员属性：

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow: 定义项目的放大比例（容器宽度>元素总宽度时如何伸展）默认为0，即如果存在剩余空间，也不放大

flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

17、Grid网格布局

Grid 布局即网格布局，是一个二维的网格布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

18、单行溢出、多行溢出

单行溢出

p {
  overflow: hidden;
  line-height: 40px;
  width: 400px;
  height: 40px;
  border: 1px solid red;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行溢出

p {
  width: 400px;
  border-radius: 1px solid red;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

19、如何让浏览器支持一个小于12px的字体

zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

zoom:50%，表示缩小到原来的一半

zoom:0.5，表示缩小到原来的一半

.span1 {
  font-size: 12px;
  display: inline-block;
  zoom: 0.8;
}

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行缩放

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

.span1 {
  font-size: 12px;
  display: inline-block;
 -webkit-transform: scale(0.8);
}

20、display有哪些值及作用

block：块对象的默认值。用该值为对象之后添加新行

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：内联对象的默认值。用该值将从对象中删除行

compact：分配对象为块对象或基于内容之上的内联对象

marker：指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table：将表格显示为无前后换行的内联对象或内联容器

list-item：将块对象指定为列表项目。并可以添加可选项目标志

run-in：分配对象为块对象或基于内容之上的内联对象

table：将对象作为块元素级的表格显示

21、position的值

static（默认）：在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

relative（相对定位）：相对定位是相对于元素默认的位置的定位，它偏移的top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。

absolute(绝对定位)：设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

fixed(固定定位)：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。

22、css3有哪些新特性

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media（max-width: 480px）{.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale（.5）；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

JavaScript

1、javascript数据类型？存储差别？

基本数据类型：js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型。Symbol 代表创建后独一无二且不可变的数据类型，它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

复杂数据类型：指的是 Object 类型，所有其他的如 Array、Date 等数据类型都可以理解为 Object 类型的子类。

存储差别

原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

2、Javascript的原生对象、内置对象、宿主对象？

原生对象：独立于宿主环境的 ECMAScript 实现提供的对象

avaScript中的原生对象有Object、Function、Array、String、Boolean、Math、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError和Global。

内置对象：由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现

目前定义的内置对象只有两个：Global 和 Math

宿主对象：由 ECMAScript 实现的宿主环境提供的对象

所有的 BOM 和 DOM 对象都是宿主对象

3、数组常用的方法？

增：push()、unshift()、splice()、concat()

删：pop()、shift()、splice()、slice()

改：splice()

查：includes()、indexOf()、find()

排序：reverse()、sort()

转换：join()

迭代：some() every() forEach() filter() map()

4、字符串常用方法？

增： +、${}、concat

删： slice()、substr()、substring()

改：trim()、trimLeft()、trimRight()、repeat()

查：chatAt()、indexOf()、includes()、startWith()

转换：toLowerCase()、toUpperCase()、split()

迭代：some()、every()、forEach()、filter()、map()

5、==和===的区别

等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true

在JavaScript中存在隐式转换。等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等

全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同

6、深拷贝和浅拷贝的区别？

浅拷贝—浅拷贝是指复制对象的时候，只对第一层键值对进行独立的复制，如果对象内还有对象，则只能复制嵌套对象的地址

深拷贝—深拷贝是指复制对象的时候完全的拷贝一份对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。其实只要递归下去，把那些属性的值仍然是对象的再次进入对象内部一一进行复制即可。

浅拷贝

1.Object.assign()

2.slice()

3.concat()

4.扩展运算符

深拷贝

1.JSON.stringify(JSON.parse())

对象上的 value 值为 undefined 、 symbol和函数的键值对会被忽略，

NaN、无穷大、无穷小会被转为 null

2.递归深拷贝函数

// 深拷贝函数封装
function deepCopy(obj) { 
        
  // 根据obj的类型判断是新建一个数组还是对象
  let newObj = Array.isArray(obj)? [] : { 
        };
  // 判断传入的obj存在，且类型为对象
  if (obj && typeof obj === 'object') { 
        
    for(key in obj) { 
        
      // 如果obj的子元素是对象，则进行递归操作
      if(obj[key] && typeof obj[key] ==='object') { 
        
        newObj[key] = deepCopy(obj[key])
      } else { 
        
      // // 如果obj的子元素不是对象，则直接赋值
        newObj[key] = obj[key]
      }
    }
  }
  return newObj // 返回新对象
}
 
// 对象的深拷贝案例
let obj1 = { 
        
  a: '1',
  b: '2',
  c: { 
        
    name: 'Demi'
  }
}
let obj2 = deepCopy(obj1) //将obj1的数据拷贝到obj2
obj2.c.name = 'dingFY'
console.log(obj1) // {a: "1", b: "2", c: {name: 'Demi'}}
console.log(obj2) // {a: "1", b: "2", c: {name: 'dingFY'}}

7、什么是闭包？闭包的作用是什么？

定义：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

三个特性：

函数嵌套函数函数内部可以引用外部的参数和变量参数和变量不会被垃圾回收机制回收

作用：使用闭包主要是为了设计私有的方法和变量，闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

8、原型和原型链

在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对象，这个对象包含了可以由该构造函数所有实例共享的属性和方法。当我们使用构造函数新建一个实例后，在这个实例的内部将包含一个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的终点是null

获取原型的方法

p._proto_

p.constructor.prototype

Object.getPrototypeOf§

9、作用域和作用域链

作用域，即变量和函数生效（也就是能被访问）的区域或集合

作用域分类

全局作用域：任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问

函数作用域：函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问

块级作用域：ES6引入了let和const关键字,和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

作用域链

当在Javascript中使用一个变量的时候，首先Javascript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量或是直接报错

10、ES5实现继承的几种方法

原型链继承

原型链继承的原理很简单，直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和

标签：易组装的连接器 2p3p间距连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造电子元器件IC百科大全！

前端面试题汇总

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录