前端面试题

HTML CSS

锚点的作用什么？如何创建锚点？

锚点是文档中某行的一个记号。类似于书签，用于链接到文档中的某个位置，当定义锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。

在使用元素创建锚点时，需要使用name属性为其命名，代码如下

锚点1

<a href='#anchorname1'>回到锚点</a>

超级链接有哪些常见的变现形式？

元素用于创建超链接，常见的表现形式有：

普通超链接，语法

<a href='' target=''>文本</a>

下载链接，及目标文档为下载资源。语法

<a href='day.zip'>下载</a>

电子邮件链接，用于链接到email。语法

<a href='mail:12345@qq.com'></a>

联系我们

空链接，用于返回页面顶部。语法

<a href='#'></a>

GET和POST两种基本请求方法的区别

（1）GET比POST更不安全，因为参数直接暴露在地址栏上，所以不能用来传递敏感信息

（2）GET请求在地址栏中传递的参数是有长度限制的，POST没有

那些css属性是可以继承的属性

主要有：

字体相关：line-height、font-family、font-size、font-style、font-variant、font-weight、font

文本相关：letter-spacing、‘text-align、text-indext、text-tranform、word-spacing

列表相关：list-style-image、list-style-position、list-style-type、list-style

还有一个比较重要的：color

选择器优先级如何计算？

行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

同一级别中后写的会覆盖先写的样式

当不同类别的多个选择器混合使用怎么计算优先级

有一个简单的算法，设：

a.内联样式表的权值为1000

b.ID选择器的权值为100

c.class类选择器的权值为10

d.html标签选择器的权值为1

简述css盒模型

css盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(margin)、边界(border)这些属性。在css中，每一元素都被视为一个框，而每个框都有三个属性：

1. border：元素的边框(可能看不见)/用于将框的边缘与其他框分开
2. margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白
3. padding：内边距，表示框内容和边框之间的空白

width和height指的是内容区域的宽高，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸

因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起，因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局，但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积

margin外边距常见问题及解决办法？

解决方法：

1. 为父元素设置border，为外层添加border后父盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）
2. 为父盒子添加overflow：hidden
3. 为父盒子设置padding值
4. 为父盒子设置position：fixed
5. 为父盒子添加display：table

外盒模型：盒模型宽=有效内容width+内边距padding+外边距margin+border

内盒模型：盒模型宽=有效内容宽width+内边距+边框

注意：优先考虑内边距 然后是外边距

内边距设置的是边框和内容之间的距离

外边距调整的是盒子的位置

背景属性：

background：颜色 地址 是否平铺 位置 是否滚动

background：#000 url() no-repeat x,y(px % center center，top left，right left、left bottom，right bottom) scroll/fixed

行内元素和块级元素的区别和他们的特点是什么？

块级元素会独占一行，默认情况下，其宽度自动填满父元素宽度，

行内元素不对独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的变化而变化，另外：

1. 块级元素可以设置width、height属性
2. 行内元素设置width、height属性无效，它的长度高度主要根据内容决定。
3. 块级元素即使设置了宽度，仍然独占一行
4. 块级元素可以设置margin和padding属性
5. 行内元素的margin和padding属性，水平方向的padding-left padding-right，margin-left、margin-right都产生边距效果，但是竖直方向的padding-top、padding-bottom，margin-top、margin-bottom却不会产生边距效果
6. 块级元素对应于display:block
7. 行内元素对应于：display：

浮动产生的问题及解决办法？

浮动产生的影响，怎么解决浮动产生的问题

问题：浮动元素会导致父元素高度坍塌，浮动元素会脱离正常的文档流，这个问题对页面的不布局有很大的影响

解决方法：

1. 给浮动元素的父元素固定高度

2. 在浮动元素最后添加一个空的div，标签本省不浮动，且添加样式clear：both；

3. 给父标签加overflow属性，overflow为visible以外的其他值时可以帮住实现

4. 推荐方法：给浮动元素的父标签添加.clearfix（不会在结构上产生冗余代码）

   .clearfix{
        
       *zoom:1;//处理ie7以下兼容
   }
   .clearfix::after{
        
       content:'';
       clear:both;
       display:block;
   }
   

图片间隙问题如何解决？

1. display:block
2. 不要让它以基线对其—>底线 顶线 中线 随意一个就可以解决vertical-align:top/middle/bottom
3. 文字行高为0、文字大小为0 -->装图片的盒子设置font-szie:0,line-height:0;

说一说常见的浏览器兼容问题？

1. ie8图片边框问题

2. ie6浮动双边距问题

3. ie6下小高度问题、图片下间隙问题

   解决方法

   font-size: 0;
   line-height: 0;
   overflow: hidden;
   

登高布局，双飞翼布局，以及圣杯布局的实现原理

圣杯布局和双飞翼布局基本上一致，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放在文档流的最前面，保证先行渲染。解决方案大致相同，都是三栏全部float：left浮动，区别在于解决中间栏div的内容不会被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

网页中图片常见格式及其特点？

1.jpg:有损压缩格式
靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像（像素点组成的，像素越多会越清晰）
2.gif：无损压缩格式
靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画’使用与颜色数量较少的图像
3.png：无损压缩格式
损失图片的色彩数量来减小图片的体积，支持透明，不支持动画；适用于颜色较少的图像
4.svg：可缩放矢量图形
svg图像再放大或改变尺寸的情况下其图形质量不会有所损失；与其他图像格式相比，使用svg的优势在于：
svg可被非常多的工具读取和修改
svg与jpg和gif图像比起来。尺寸更小，且可压缩性更强
svg图像可在任何的分辨率下被高质量的打印
svg可在图像质量不下降的情况下被放大
svg图像中对的文本是可选的，同时也是可搜索的（很适合制作地图）
svg格式的图片可以通过阿里的iconfont图标库进行生成，或者使用在线工具将其格式转svg格式

用边框实现小箭头的原理

使用伪元素

你能想出的方法让亚元素在界面消失

1.position:absolute;
top:-9999px;
left:-9999px;
2.display:none;
3.visibility:hidden;
4.width:0,height:0 font-size:0 line-height:0;/* 前提是没有border*/
5.opacity:0;

如何让盒子水平居中垂直居中

方法1

position:absolute;
left:50%;
top:50%;
margin-left:自身宽度一半
marrgin-top:自身高度一半

方法2

position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

简述BFC规则，及解决问题

##BFC规则
1.内部的box会在垂直方向，一个接一个的放置
2.box垂直方向的距离有margin决定，属于同一个BFC的两个相邻BOX的margin会发生重叠
3.每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
4.BFC区域不会与float box重叠
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
6.计算BFC的高度时，浮动元素也参与计算

##BFC应用
清除浮动影响
反之margin塌陷
图文环绕
两列自适应

前端的优化方式

1. 减少重复的代码，压缩css，js代码大小
2. 背景图片大小及数量，使用雪碧图
3. 减少http请求，合理设置缓存
4. js减少dom操作，避免使用functio，减少作用域查找
5. cdn加速
6. 反向代理

为什么要初始化css样式

1. 因为浏览器的兼容问题，不同的浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异，统一浏览器的表现形式。
2. 初始化css样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的css样式很多，去掉标签的默认样式如：margin padding，其他浏览器默认解析字体大小，字体设置

display:none和visibility:hidden的区别？

display:none使元素隐藏并且不占位置，而visibility使元素隐藏但是还占据界面位置

单行文本溢出和多行文本溢出怎么实现？

1. 单行文本溢出显示省略号

   text-overflow:ellipsis属性来实现单行文本的溢出显示省略号…。当然部分浏览器还需要加宽度width属性

   p{
        
       overflow:hidden;
       white-space:nowrap;
    	text-overflow:ellipsis;
   }
   

2. 多行文本溢出显示省略号…

   设置相对定位的容器高度（高度必须是行高的整数倍），用包含省略号(…)的伪元素元素通过设置绝对定位模拟实现

如何显示小于12px的字体？

利用css3的缩放属性实现

常见的移动端布局方案有哪些、具体原理有哪些

布局方案：
1.固定布局，采用固定像素。
原理：设置好视口，跟pc端的写法一样，版心320px即可，
缺点：界面左右两侧留白，而且元素略小、用户体验差
2.流失布局：原理采用%替代固定像素，限制布局盒子的最大宽度和最小宽度
有点：实现自适应。缺点：只做宽度适配，高度会被拉伸
3.响应式布局：rem+js/媒体查询 bootstrap
原理：设置跟标签html的字体大小，利用媒体查询换算不同屏幕下对应字体大小，利用相对单位rem取代固定像素px
优点：宽高字体大小都能自适应，显示效果好
4.媒体查询
原理：利用媒体查询查询不同屏幕的屏幕宽度，给每个不同设备都写一套样式文件
缺点：复杂、工作量大、后期难维护

请解释CSS3的弹性盒布局，以及使用场景？

1. 背景介绍：

   网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒模型。依赖display属性+position属性+float属性。他对于那些特殊布局非常不方便，2009年W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，他已经得到了所有浏览器的支持，这意味着，现在就能很安全的使用这项功能

2. 知识解析

   1. 什么是flex

      flex是flexible Box的缩写，意为”弹性布局“，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，块级元素只需要display属性为flex即可，行内元素也可以使用flex布局，display：inline-flex

      webkit内核的浏览器，必须加上-webkit前缀

   2. 基本概念

      采用flex布局的元素，称为flex容器（flex container），简称容器。他的所有子元素自动成为容器成员，称为flex项目（flex item），简称项目，容器默认存在两根轴：水平的主轴（main asis）和垂直的交叉轴（cross asis）。项目默认沿主轴排列

   3. 容器属性

      /**
      flex-direction属性决定主轴的方向（即项目的排列方向）
      flex-wrap属性定义，如果一条轴线上排列不下，如何换行。默认情况下，项目都排列子啊一条线（又称’轴线‘）上
      flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
      justify-content属性定义了项目在主轴上的对齐方式
      align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
      **/
      

   4. 项目属性

      order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0
      flex-grow属性定义了项目的缩小比例，默认为1，即如果存在剩余空间，也不放大
      flex-shrin属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 
      flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小
      flex属性是以上三个属性的简写，而不是单独写三个分离的属性，因为浏览器会推算相关值。
      align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
      

3. 使用场景多列盒子浮动是可以采用弹性盒

什么是less？less有什么好处？

less是动态的样式表语言，通过简洁明了的语法定义，使编写css的工作变得非常简单，在实际项目开发中，可以大大提升前端工程师的效率
css（层叠样式表）是一门历史悠久的标记性语言，同html一道，被广泛应用于万维网中，HTML主要负责文档结构的定义，css负责文档表现形式或样式的定义
作为一门标记性语言，css的语法相对简单，对使用者的要求较低，但同时也带来一些问题，css需要书写大量看似没有逻辑的代码，不方便维护和扩展，不利于复用，尤其对于前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码，造成这些困难的很大原因源于css是一门非程序式语言，没有变量，函数、SCOPE（作用域）等概念。less为web开发者带来了福音，他在css的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，就像它的名称所说的那样，less可以以让我们更少的代码做更多的事情

CSS3有哪些新特性，新增选择器有哪些？

新特性：圆角边框、盒子阴影、弹性盒、2D、3D变形、新盒模型等
新的选择器有结构类型、属性选择器、表单选择器、双伪元素::after ::before

简述rem布局

设置跟标签html的字体大小，领用媒体查询换算不同屏幕下对应的字体大小，领用相对单位rem取代固定px，

优点：盒子的宽高大小都能自适应，可以达到自适应需求

缺点：字体大小如果也设置了rem单位的话，会出现字体变化呈现线性的变大变小，其实字体的变化应该是非线性的取值，所以字体需要单独利用媒体查询设置

$route和$router的区别？

$route是路由的信息对象包含：path 、query、name、hash、fullpath、metched等路由信息

$router是路由的实例化对象，包含路由的跳转方法

javascript+jQuery

什么是JavaScript

基于对象和事件驱动的可解释性脚本语言

JavaScript和ECMAscript

JavaScript是ECMAscript的表现，ECMAscript是JavaScript的规范

变量的命名规则

1.名字见名知意、遵循驼峰命名标识。
2.变量名只能以字母、下划线_，$开头
3.不能使用关键字保留字
4.变量名不要相同（后面的会覆盖前面）

window.onload的作用

window.onload是等资源和文档都加载完毕后调用的事件，保证js获取元素的时候，已经加载。

JS的数据类型

六大数据类型 es6 其中
基本数据类型 Number、String、Boolean、undefined、null
复杂数据类型：Object（function、Array、object）
es6新增数据类型：symbol

null和undefined的区别

null访问一个不存在的对象返回值，表示空对象
undefined访问一个未初始化变量的值（声明了但是没有赋值的变量），表示空变量

……

运算符的种类

算数运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符

var a=10; var b =a++ ；a, b最后的结果是？

a=11 b=10

==与===的区别？

==,判断相等，判断的过程中会隐式转换number类型进行比较‘10’==10 true 
=== 恒等，严格相等， ‘10’===10 false

console.log(0.1+0.2==0.3)

false,有些小数在运算过程中会出现偏差，因此最好不要用小数作为判断条件

NAN会在什么样的情况下出现呢？列举出现这种情况的代码。

NAN：not a number
自己定义
运算过程中出现错误，原本应该是数字的地方出现一些不能转换为数字得值
‘10’+s Number('s')

列举三种强制类型转换和2中隐式转换

Number('10')；强制转换Number
parseInt('10.5')；强制转化Number 取整
parseFloat('10.5')；强制转换Number，保留小数、
String(10)；强制转换字符串
10.toString()；强制转换为字符串

10+'10' 1010 +号遇到字符串就变成了连接符，10隐式转换成字符串
1+true 2 true隐式转换1
10=='10' '10'隐式转换成10

document.write()与innerHTML的区别

document.write：操作body的内容，会覆盖之前已经存在body中的内容，document.writer添加的内容会叠加
innerHTML：操作所有的闭合标签，会覆盖之前的所有内容

谈谈你对this的理解

this存在任何地方，不同的环境代表不同的含义，取决于被调用是的环境
A.事件处理函数中的this——触发事件的对象
document.onclick = function(){}
B.普通函数中的this——window
function sum(){
	return 1
}
sum()

写一个获取非行间样式的函数

function getStyle(elem,attr){
   
    //elem 元素 attr属性
    if(elem