Web前端面试题及答案——HTML&CSS、JS、DOM

2021年1月16日 7点热度 0条评论 来源: CongYao666

虽然个人认为有些知识不是必须记忆的,需要的时候可以查阅笔记,但是对于得到面试的机会还是很重要的。 

HTML&CSS

1、清除浮动的几种方式,各自的优缺点

清除浮动:使父元素围住浮动的子元素,避免对后续元素造成影响。

(1)给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化上下文(BFC),从正常文档流脱离,父元素本身实现独立布局,围住其中的浮动元素。但专门这样设置,可能会改变布局,对于后三者,使block变为inline-block,父元素宽度变化。

适用于父元素也需要浮动。

(2)在子元素后面添加空的block元素,并设置其样式为clear:both。添加了额外的元素,且block元素带有margin等。

(3)在父元素上加clearfix类名,在父元素的最后加块级元素.(伪元素选择器),通过clear:both使父元素括住浮动的元素来清除float的影响,使.不可见。常用这种方式,Bootstrap支持clearfix类名。

通常推荐这种方式。

<style>
  .clearfix::after{content:".";display:block;clear:both;height:0;visibility:hidden;} 
  .clearfix{zoom:1;} /*IE低版本不支持after*/ 
  div{background-color:red;}
  #p1{float:left;background-color:yellow;}
  #p2{float:right;background-color:green;}
</style>

<div class="clearfix">
  <p id="p1">p1</p> 
  <p id="p2">p2</p> 
  <!-- <p style="clear:both"></p> 添加空的p元素,使div可以围住p1p2,不推荐-->
</div>

2、块级元素水平垂直居中的方法

<style>
  .parent{background:#ddd;height:200px;width:300px;}
  .child{background:#666;color:#fff;font:30px/2 'microsoft yahei';}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

父元素和子元素的大小不确定。

(1)table-cell+inline-block

兼容IE6,7需要把结构换为<table>,通过display:inline; zoom:1;模拟inline-block。

.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}

(2) relative+absolute+transform

绝对定位脱离文档流,不会对其它元素产生影响。transform是CSS3新增内容,对IE6,7,8可能没法兼容,在高版本浏览器需要加前缀。

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

(3)flex

IE6,7,8可能没法兼容flex。

.parent{display:flex; justify-content:center; align-items:center;}

如果子元素大小确定。

.parent{position:relative;}
.child{
  width:100px; height:100px;
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}

3、CSS选择器有哪些?优先级如何计算

(1)普通选择器:通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:

(2)伪元素选择器::

(3)组合选择器:后代选择器 、子选择器、兄弟选择器+、只要前面有某种元素~

优先级:将权重相加。a=行内样式style,1000;b=id选择器,100;c=类、伪类和属性选择器,10;d=标签选择器和伪元素选择器,1。相同属性优先级高覆盖低、后面覆盖前面,不同属性合并。

超链元素伪类的设置顺序:link :visited :hover :active

4、px、em和rem的区别

px,像素,相对于显示器屏幕分辨率而言;

em,相对长度单位,相对于当前对象内文本的字体大小,若字体大小未显式设置,则相对于浏览器默认的字体大小;

rem,相对长度单位,相对于html根元素的字体大小。

5、display:none和visibility:hidden的区别

display:none设置元素不显示,是彻底消失,不在文档流中占位,浏览器也不会解析该元素。visibility:hidden是视觉上消失,可理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素。

使用visibility:hidden比display:none性能上要好。display:none切换显示时,页面产生回流reflow(页面中的部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建)。而visibility:hidden切换是否显示时则不会引起回流,只是元素的外观被改变,且在没有改变布局的情况下发生。

6、用一个div写出三条横线的小图标

div{
  height:5px;
  width:30px;
  background-color:#DD575C;
  background-clip:content-box;
  padding-top:5px;
  padding-bottom:5px;
  border-top:#DD575C solid 5px;
  border-bottom:#DD575C solid 5px;
}

7、用一个div实现倒三角

div{
  width:0;
  border-top:10px solid #DD575C;
  border-left:5.77px solid transparent;
  border-right:5.77px solid transparent;
}

其它方法仅供参考。ASCII码31是倒三角。 

/* 正方形旋转加截取 */
.parentDiv {
  height:50px;
  overflow:hidden;
}
.triangleDiv {
  position: relative;
  height:70.7px;
  width:70.7px;
  top:-35.4px;
  left:19.6px;
  background-color:#DD575C;
  transform:rotate(45deg);
}

8、盒模型

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content)、内边距(padding)、边框(border),外边距(margin)四个部分。

标准盒子模型 = margin + border + padding + content (content =  width | height)

IE盒子模型 = margin + content (content = border + padding + width | height)

box-sizing:content-box|border-box  切换标准模型和IE模型

9、position的absolute和fixed的共同点与不同点

共同点:脱离文档流,文档流中没有它的空间,未设置偏移时在原位置。默认宽度为内容宽度。

absolute:绝对定位。参照物为第一个定位元素(非static)/根元素html(与浏览器窗口同等大小的首屏区域)。元素随页面的滚动而滚动。

fixed:固定定位。参照物是视窗。不随页面的滚动而滚动。

10、sprite精灵图

把设计稿上的小图标拼合到同一张图片中,减少网络请求,提升网页加载速度。

①排列常用横向排列和纵向排列。 ②图片之间必须保留孔隙,小图标20像素。如果更改按钮大小,CSS里背景图位置属性不须改变;容错,如果CSS设置错误,不会导致下面图片露出来。③合并原则:同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用,有状态的图标合并。④IE6不支持PNG24半透明,存两份:高级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。

background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;

11、HTML5

表现页面中的章节结构:<header><footer><nav><aside><article><section>

嵌入资源:<video><audio><canvas><svg>

新的<input>类型:email、url、number、tel、search、range、color、date

新的表单元素(datalist、keygen、output)和属性

getCurrentPosition()、web存储(localStorage、sessionStorage)、拖放

12、CSS3

选择器:属性选择器、伪类选择器

盒模型:box-shadow、box-sizing

边框:border-radius、border-image

背景:background-image、background-size、background-origin、background-clip、渐变

文字特效:text-shadow、text-overflow、word-wrap、word-break、字体@font-face

2D/3D转换:transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility

过渡和动画:transition、animation、@keyframes

多列布局:column-count、column-width、column-fill、column-gap、column-rule、column-span

用户界面:resize、outline-offset

弹性盒子:flex

13、<img>的alt和title

alt:描述图片含义。地址写错或网络状况不好,无法查看图像时,显示该说明。可用于屏幕阅读软件和搜索引擎。

title:光标悬浮在图像上时以提示的方式显示该特性内容。

14、href和src的区别

href标识超文本引用,在当前元素和引用资源之间建立联系。<link><a>。当浏览器解析到css文件时会下载,但不会停止对当前文档的处理。

src引用资源,指向外部资源的位置,将外部资源下载并替换当前元素。用在<img><script><iframe>。当浏览器解析到含src的标签时,会暂停其它资源的下载和处理,直至将该资源加载、编译、执行完毕,将该元素所指向的资源嵌套至当前标签内。

15、盒子内阴影和外阴影

box-shadow: inset? 水平偏移 垂直偏移 模糊半径? 阴影大小? 颜色?(?表示可选;水平、垂直偏移可正可负;颜色默认为文字颜色;这些参数可有多组,用,隔开)

外阴影box-shadow:3px 3px 5px 2px;      内阴影box-shadow:inset 0 0 5px red;

16、块级格式化上下文(BFC)

块级格式化上下文(BFC,Block formatting context),是一个独立的渲染区域,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。下列方式会创建块级格式化上下文:

根元素

浮动元素,即float不为none

绝对定位元素,即position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible(hidden, scroll, auto)

17、input输入类型并简述其用途

text:默认,单行文本框,默认宽度为20字符。

radio:单选按钮。

checkbox:复选框。

file:输入字段和“浏览”按钮,供文件上传。

button:可点击按钮。

reset:重置按钮。

submit:提交按钮。

image:图像形式的提交按钮。

password:密码字段,该字段中字符被掩码。

hidden:隐藏的输入字段。

email:email地址。

tel:电话号码。

url:url地址。

number:数值。

range:滑动条,包含一定范围内的数值。

color:选择颜色。

Date pickers(date, month, week, time, datetime, datetime-local)。

search:搜索字段。

18、Cookie、sessionStorage和localStorage的区别

Cookie是客户端的会话跟踪技术,用来记录信息确定用户身份。通过document.cookie可以获取或设置Cookie值。

Cookie由”; ”隔开的键值对构成,作用是将网页中的数据保存到浏览器中。Cookie必须从服务器访问,直接打开html文件则设置Cookie无效。

Cookie有个数(20~50)和大小(4KB左右)的限制。默认情况下,Cookie的生命周期是一次会话,如果通过expires设置了过期时间,过期立即删除保存的数据。Cookie由每个对服务器的请求来传递,使得Cookie速度很慢且效率也不高。安全性问题,明文传递。

WebStorage克服了Cookie的一些限制,有两种API:localStorage(本地存储,没有时间限制)和sessionStorage(会话存储,在浏览器关闭后消失)。通过setItem(key, value)、getItem(key)、removeItem(key)、clear()操作数据。要访问同一个WebStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。

WebStorage只能存储字符串类型,可使用JSON对象的stringify和parse来处理。保存在客户端,不与服务器进行交互通信。

WebStorage存储大小一般是5MB。不会传送到服务器,存储在本地的数据可以直接获取,节省了网络流量,且速度更快。安全性相对Cookie较高。

19、响应式设计的基本技巧和好处

响应式设计以媒体查询为基础,通过统一的设计和代码实现让一套Web系统能适配所有可能的终端。不必去为不同设备定制不同的网站,开发成本降低;资源冗余,即有些信息被加载,但是不显示。

(1)布局技巧及meta标签

丢弃:无关紧要的div、内联元素(inline)、少用js或flash、没用的绝对定位和浮动样式、不使用100%设置。

使用:HTML5 Doctype和相关指南、重置样式reset.css、一个简单的有语义的核心布局、给重要的网页元素使用简单的技巧(如导航菜单)。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

(2)媒体查询Medial Queries:根据屏幕大小展示适配的样式。

(3)字体设置:单位使用rem,相对于根元素的字体大小。

(4)宽度:使用百分比且box-sizing:border-box;,或flex布局。

(5)图片:将图片的最大宽度设置为100%,背景图片大小设置为contain。根据不同屏幕展示不同大小的图片,将图片地址保存至data-属性中。使用精灵图

img{max-width:100%;height:auto;}
a{
  background-image:url('logo.png');
  background-repeat:no-repeat;
  background-size:contain;
}

20、优雅降级和渐进增强

优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    从复杂的现状开始,试图减少用户体验的供给。

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

    从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。

21、label、单选框、单选按钮的应用场景

在scss中,使用@mixin命令

@mixin left{float:left;margin-left:10px;} 如何调用@mixin

 

Javascript

1、var变量声明

变量声明语句会被“提前”至脚本或函数的顶部,但初始化的操作还在原来var语句的位置执行,在声明语句之前变量的值是undefined。

<script>
  var a=100;
  function test(){
    alert(a); // undefined
    var a=10;
    alert(a); // 10
  }
  test();
</script>
(function() {
  var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined

2、操作符

使用加法操作符+时,如果其中一个操作数是字符串,则把另一个操作数也转换为字符串,并将两字符串拼接。
var foo=10+'20'; // '1020'

x||y如果x表达式运行结果转换为Boolean值为false,则返回表达式y的运行结果
(window.foo||(window.foo='bar'));
console.log(window.foo); // 'bar'

指针和赋值运算符的执行顺序
var foo={n:1};
var bar=foo; // {n: 1}
foo.x=foo={n:2};
foo.x // undefined
foo // {n: 2}
bar // {n: 1, x: {n: 2}}

3、==和===的区别

===判断左右两边对象或值是否类型相同且值相等。==判断操作符两边对象或值是否相等,类型不同时,使用Number()转换。例外规则,null==undefined,null/undefined进行==运算时不进行隐式类型转换。通常把值转为Boolean值,进行条件判断。

[1]==[1] false

var a="123";
var b="123";
var c="4";
var oa=new String("123");
var ob=new String("123"); var oc=oa; a===oa; //false,a为值类型,oa为对象类型 oa===ob; //false,不是同一个引用 oa===oc; //true,同一个引用 a===b; //true,值相等,且都是值类型 a===c; //false "99"==99; //true new String("99")==99; //true false=="0"; //true 0==null; //false "undefined"==undefined; //false

4、js各类型在转换为Boolean时的规则

 

5、数值

Number()函数,用于任何数据类型。对于字符串向数值型转换,数字、浮点数、十六进制数->十进制数,前导0被忽略;””->0;除此之外(包含非数字等)转换为NaN。

Number(undefined) // NaN
Number(null) // 0
Number(false) // 0
Number('11') // 11
Number('11.2') // 11.2
Number('011') // 11
Number('0x13') // 19
Number('11a') // NaN

parseInt(),忽略空格,找到第一个非空格字符,直到遇到无效字符。第二个参数为转换进制。前导0被忽略。

parseFloat(),前导0被忽略,只解析十进制。如果没有小数点或小数点后都是0则返回整数。 

parseInt('10/01') // 10
parseInt('011') // 11
parseInt('x08') // NaN
parseInt('0x08') // 8
parseInt('11.12a') // 11
parseFloat('11.12a') // 11.12

4、字符串

字符串replace查找字符串替换成目标字符。
第一个参数是RegExp对象或字符串,第二个参数是字符串或函数。要想替换所有字符串,提供正则表达式,指定g标志,否则只替换第一个满足要求的字符串。

split(separator,howmany)方法,按分割符将字符串分割成字符串数组。
第一个参数分隔符是字符串或RegExp对象,第二个参数用于指定数组大小,返回数组不会超过既定大小。

"I have a cat".split("").reverse().join("-") // 't-a-c- -a- -e-v-a-h- -I'

5、正则表达式 

\d:数字[0-9]    \D:[^0-9]
\s:空白字符[\t\n\x0B\f\r]    \S
\w:单词字符[a-zA-Z_0-9]    \W

^ 以...开始    $ 以...结束

*:0到多
+:1到多
?:0或1
{n}:匹配确定的n次
{n,}:至少匹配n次
{n,m}:最少匹配n次且最多匹配m次

var reg=/^w+[^d]+$/;
console.log(reg.test('ww_32r')); // true
console.log(reg.test('123_dskr')); // false
console.log(reg.test('w7_d2')); // false

6、比较typeof和instanceof

(1)typeof运算符 typeof 变量名; //返回字符串 可以识别标准类型(Null除外),不能识别具体的对象类型(Function除外)。 (2)instanceof 变量名 instanceof 类型; 判别内置对象类型、自定义对象类型,不能判别标准类型。给定引用类型的实例则返回true,检测基本类型值返回false。

 

7、包装类类型识别

包装类Boolean、Number、String。所有基本包装类型的对象(new创建)都会被转换为布尔值true,typeof均得到object。

var strObj=new String('abc');
console.log(strObj instanceof String); // true
console.log(typeof strObj=='string'); // false

8、对象的深克隆

function deepClone(obj){}

9、数组

数组的sort(),默认按升序排列,返回排序后的数组。 sort()方法调用每个数组项的toString()方法,比较得到的字符串,即使是数值。sort()方法可以接收一个比较函数作为参数,指定排序方法。比较函数接收两个参数,如果第一个参数位于第二个参数之前则返回一个负数,两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。

colors.slice(1,4); 截取,取1-3,返回新数组 返回从起始位置到结束位置-1的项;只有一个参数,则至数组末尾;有负数,则与length相加;结束位置小于起始位置则返回空数组。 splice(start, deleteCount[, item1[, item2[, …]]]),从数组中删除或添加元素,并更改数组内容,返回一个数组,该数组包含从原始数组中删除的项。

var foo=[];foo[2]=1;foo.push(2);alert(foo.length); // 4

10、数组去重并排序,打印重复字符及次数

10、函数

var m=1; 
function add(n){ 
  return n=n+1; 
} 
y=add(m); // 4
function add(n) { 
  return n=n+3; 
} 
z=add(m); // 4
a(); // '函数声明'
function a(){
  console.log("函数声明");
}
b(); // Uncaught TypeError: b is not a function
var b=function(){
  console.log('函数表达式');
}

一个函数实现add(1)(2)(3)和add(1,2)不同的调用方式。

function add(...a){
  let sum=0;
  for(let num of a){
    sum+=num;
  }
  function s(...b){
    for(let num of b){
      sum+=num;
    }
    return s;
  }
  s.toString=function(){return sum;}
  return s;
}
console.log(add(2,3)); // 5
console.log(add(2)(3)); // 5
console.log(add(1)(2,3)(4,5,6)); // 21

11、闭包

闭包是指有权访问另一个函数作用域中的变量的函数,由函数和与其相关的引用环境组成。闭包允许函数访问其引用环境中的变量,有可能是外部环境变量,该变量称为自由变量。创建闭包的常见方式,在一个函数内部创建另一个函数。

闭包的应用,保存变量现场。闭包只能取得包含函数中任何变量的最后一个值,但可以强制创建另一个匿名函数强制让闭包的行为符合预期。

闭包的应用,私有作用域的匿名函数。临时需要一些变量,就可以使用私有作用域,限制向全局作用域中添加过多的变量和函数。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

for(var i=0;i<6;i++){
  setTimeout(function(){
    console.log(i); // 打印6个6
  },1000);      
}

// ES6语法可以实现打印1 2 3 4吗?
var numbers=[0,1,2,3];
var functions=[];
for(var i=0;num=numbers[i],i<numbers.length;i++){
  functions.push(function(){
    console.log(num); // 打印四个undefined
  })
}
for(var j=0;j<functions.length;j++){
  functions[j]();
}

// 如何理解?
var funcs=[],
object={a:true,b:true,c:true}
for(let key in object){
  funcs.push(function(){
    console.log(key)
  })
}
funcs.forEach(function(func){
  func(); // a b c
})

12、call、apply和bind的区别

函数调用时绑定this值:call()、apply()让函数在特定的作用域下进行调用,即设置函数体内this对象的值。扩充函数运行的作用域,对象不需要与方法有任何耦合关系。区别仅在于接受参数的方式不同, call()方法传递的参数逐个列举,第一个参数是作用域;apply()方法接收两个参数,作用域和参数数组。

为函数绑定this值但并不调用:bind()传入新作用域,返回新函数,该函数在bind作用域执行。第二个参数是参数列表,与call一致。

var scope='window';
env={
  scope:'inner',
  getscope:function(){
    console.log(this.scope);
  }
}
env.getscope(); // 'inner'
env.getscope.apply(window); // 'window'
env.getscope.call(window); // 'window'
env.getscope.bind(window)(); // 'window'

var f=env.getscope;
f(); // 'window'

13、垃圾回收机制和内存管理

js具有自动垃圾回收机制,找出不再使用的变量,垃圾收集器按一定时间间隔(影响性能)释放其占用的内存。“标记清除”是目前主流的垃圾回收算法,给当前不使用的值加上标记,再回收内存。另一种算法是“引用计数”,跟踪记录所有值被引用的次数,当代码中存在循环引用现象时会导致问题。及时解除不再使用的全局对象、全局对象属性及循环引用变量的引用,确保有效回收内存。

14、异步加载JS的方式

使用defer属性让脚本在文档完全呈现之后再顺序执行,async属性同样让脚本立即下载延迟执行,但不保证顺序。

动态生成<script>标签

a.XHR注入(通过XMLHttpRequest对象来获取JS,然后创建一个script元素插入到DOM结构中);
b.ajax eval(使用ajax得到脚本内容,然后通过eval(xmlhttp.responseText)来运行脚本);
c.iframe等

 

DOM

1、节点操作

(1)获取节点    getElementById    getElementsByTagName    getElementsByClassName

querySelector/querySelectorAll  获取指定元素的后代元素中符合选择器的节点,第一个符合条件的元素或所有元素的列表

(2)创建节点    createElement    createDocumentFragment

(3)修改节点内容    textContent    innerText

(4)插入节点    appendChild    insertBefore

(5)删除节点    removeChild     replaceChild

2、样式操作

(1)增加内联样式    element.style.color='red';    element.style.cssText='border-color:red;color:red;';

(2)更新class    element.className+='invalid';

(3)更换样式表

3、offsetWidth/clientWidth/scrollWidth的区别

offsetWidth:元素在水平方向上占用的空间大小。

clientWidth:元素内容区的宽度加左右内边距的宽度。

scrollWidth:在没有滚动条的情况下,元素内容的总宽度。

console.log('one');
setTimeout(function(){
  console.log('two');
},0);
console.log('three');
// one three two

对于事件委托,如何为不同子元素绑定特定的功能

event.target

 

12、判断一个字符串中出现次数最多的字符/单词,统计这个次数

 

13、去掉一个数组的重复元素

求一个字符串的字节长度

    原文作者:CongYao666
    原文地址: https://blog.csdn.net/yaocong1993/article/details/84259682
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。