前端面试题整理汇总二

2019年11月10日 阅读数:150
这篇文章主要向大家介绍前端面试题整理汇总二,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

XMLJSON的区别?

(1).数据体积方面。javascript

 
JSON相对于XML来说,数据的体积小,传递的速度更快些。
 
(2).数据交互方面。
 
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
 
(3).数据描述方面。
 
JSON对数据的描述性比XML较差。
 
(4).传输速度方面。
 
JSON的速度要远远快于XML。

谈谈性能优化问题

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。css

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减小DNS查找等html

请求数量:合并样式和脚本,使用css图片精灵,初始首屏以外的图片资源按需加载,静态资源延迟加载。前端

请求带宽:压缩文件,开启GZIP,html5

代码层面的优化java

  • hash-table来优化查找
  • 少用全局变量
  • innerHTML代替DOM操做,减小DOM操做次数,优化javascript性能
  • setTimeout来避免页面失去响应
  • 缓存DOM节点查找的结果
  • 避免使用CSS Expression
  • 避免全局查询
  • 避免使用with(with会建立本身的做用域,会增长做用域链长度)
  • 多个变量声明合并
  • 避免图片和iFrame等的空Src。空Src会从新加载当前页面,影响速度和效率
  • 尽可能避免写在HTML标签中写Style属性

移动端性能优化

  • 尽可能使用css3动画,开启硬件加速。
  • 适当使用touch事件代替click事件。
  • 避免使用css3渐变阴影效果。
  • 能够用transform: translateZ(0)来开启硬件加速。
  • 不滥用Float。Float在渲染时计算量比较大,尽可能减小使用
  • 不滥用Web字体。Web字体须要下载,解析,重绘当前页面,尽可能减小使用。
  • 合理使用requestAnimationFrame动画代替setTimeout
  • CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引起手机过耗电增长
  • PC端的在移动端一样适用
  • 说说你对语义化的理解?

  • 1,去掉或者丢失样式的时候可以让页面呈现出清晰的结构
     
    2,有利于SEO:和搜索引擎创建良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来肯定上下文和各个关键字的权重;
     
    3,方便其余设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
     
    4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,能够减小差别化。
  • html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?


  • 2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
      HTML5 如今已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增长。
     
      拖拽释放(Drag and drop) API
     
      语义化更好的内容标签(header,nav,footer,aside,article,section)
     
      音频、视频API(audio,video)
     
      画布(Canvas) API
     
      地理(Geolocation) API
     
      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
     
      sessionStorage 的数据在浏览器关闭后自动删除
     
     
      表单控件,calendar、date、time、email、url、search
     
      新的技术webworker, websocket, Geolocation

前端面试题整理汇总

本文旨在加深对前端知识点的理解,资料来源于网络,由 trigkit4 收集整理。jquery

一些开放性题目

 

 

position的值, relative和absolute分别是相对于谁进行定位的?

  • absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
  • fixed (老IE不支持)生成绝对定位的元素,一般相对于浏览器窗口或 frame 进行定位。
  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
  • static 默认值。没有定位,元素出如今正常的流中
  • sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

如何解决跨域问题

JSONP:android

原理是:动态插入script标签,经过script标签引入一个js文件,这个js文件载入成功后会执行咱们在url参数中指定的函数,而且会把咱们须要的json数据做为参数传入。webpack

因为同源策略的限制,XmlHttpRequest只容许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,能够经过script标签实现跨域请求,而后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

优势是兼容性好,简单易用,支持浏览器与服务器双向通讯。缺点是只支持GET请求。

JSONPjson+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

 

CORS

服务器端对于CORS的支持,主要就是经过设置Access-Control-Allow-Origin来进行的。若是浏览器检测到相应的设置,就能够容许Ajax进行跨域的访问。

经过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!并且所用的协议,端口都要一致,不然没法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的全部页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。我的认为window.name的方法既不复杂,也能兼容到几乎全部浏览器,这真是极好的一种跨域方法。

XMLJSON的区别?

 

 

谈谈你对webpack的见解

WebPack 是一个模块打包工具,你可使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它可以很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各类静态文件(图片、字体等),让开发过程更加高效。对于不一样类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。

webpack的两大特点:

webpack 是以commonJS的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

webpack具备requireJsbrowserify的功能,但仍有不少本身的新特性:

 

说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的状况置之不理,它必定会向对方确认是否成功送达。握手过程当中使用了TCP的标志:SYNACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK标志的数据包,表明“握手”结束。 若在握手过程当中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP链接则须要“四次握手”:

  • 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(固然,在fin包以前发送出去的数据,若是没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),可是,此时主动关闭方还可 以接受数据。
  • 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
  • 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,个人数据也发送完了,不会再给你发数据了。
  • 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

TCP和UDP的区别

TCP(Transmission Control Protocol,传输控制协议)是基于链接的协议,也就是说,在正式收发数据前,必须和对方创建可靠的链接。一个TCP链接必需要通过三次“对话”才能创建起来

UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非链接的协议,它不与对方创建链接,而是直接就把数据包发送过去! UDP适用于一次只传送少许数据、对可靠性要求不高的应用环境。

说说你对做用域链的理解

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的,做用域链的变量只能向上访问,变量访问到window对象即被终止,做用域链向下访问变量是不被容许的。

建立ajax过程

 

 

渐进加强和优雅降级

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

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

常见web安全及防御原理

sql注入原理

就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。

总的来讲有如下几点:

 

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。好比:攻击者在论坛中放一个

看似安全的连接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,

当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户本来觉得的信任站点。

XSS防范方法

首先代码里对用户输入的地方和变量都须要仔细检查长度和对”<”,”>”,”;”,”’”等字符作过滤;其次任何内容写到页面以前都必须加以encode,避免不当心把html tag 弄出来。这一个层面作好,至少能够堵住超过一半的XSS 攻击。

首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。

其次,经过使cookie 和系统ip 绑定来下降cookie 泄露后的危险。这样攻击者获得的cookie没有实际价值,不可能拿来重放。

若是网站不须要再浏览器端对cookie 进行操做,能够在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

尽可能采用POST 而非GET 提交表单

XSS与CSRF有什么区别吗?

XSS是获取信息,不须要提早知道其余用户页面的代码和数据包。CSRF是代替用户完成指定的动做,须要知道其余用户页面的代码和数据包。

要完成一次CSRF攻击,受害者必须依次完成两个步骤:

 

CSRF的防护

  • 服务端的CSRF方式方法不少样,但总的思想都是一致的,就是在客户端页面增长伪随机数。
  • 经过验证码的方法

Web Worker 和webSocket

worker主线程:

 

WebSocketWeb应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个HTML5协议,WebSocket的链接是持久的,他经过在客户端和服务器之间保持双工链接,服务器的更新能够被及时推送给客户端,而不须要客户端以必定时间间隔去轮询。

HTTP和HTTPS

HTTP协议一般承载于TCP协议之上,在HTTPTCP之间添加一个安全协议层(SSLTSL),这个时候,就成了咱们常说的HTTPS。

默认HTTP的端口号为80,HTTPS的端口号为443。

为何HTTPS安全

由于网络请求须要中间有不少的服务器路由器的转发。中间的节点均可能篡改信息,而若是使用HTTPS,密钥在你和终点站才有。https之因此比http安全,是由于他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

对前端模块化的认识

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

AMD 是提早执行,CMD 是延迟执行。

AMD推荐的风格经过返回一个对象作为模块对象,CommonJS的风格经过对module.exportsexports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

 

 

Javascript垃圾回收方法

标记清除(mark and sweep)

这是JavaScript最多见的垃圾回收方式,当变量进入执行环境的时候,好比函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的全部变量加上标记,而后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成以后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中常常会出现内存泄露,不少时候就是由于其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每一个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,若是该变量的值变成了另一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值无法被访问了,所以能够将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象经过标记清除的方式进行垃圾回收,但BOM与DOM对象倒是经过引用计数回收垃圾的, 也就是说只要涉及BOM及DOM就会出现循环引用问题。

你以为前端工程的价值体如今哪

 

 

谈谈性能优化问题

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减小DNS查找等

请求数量:合并样式和脚本,使用css图片精灵,初始首屏以外的图片资源按需加载,静态资源延迟加载。

请求带宽:压缩文件,开启GZIP,

代码层面的优化

  • hash-table来优化查找
  • 少用全局变量
  • innerHTML代替DOM操做,减小DOM操做次数,优化javascript性能
  • setTimeout来避免页面失去响应
  • 缓存DOM节点查找的结果
  • 避免使用CSS Expression
  • 避免全局查询
  • 避免使用with(with会建立本身的做用域,会增长做用域链长度)
  • 多个变量声明合并
  • 避免图片和iFrame等的空Src。空Src会从新加载当前页面,影响速度和效率
  • 尽可能避免写在HTML标签中写Style属性

移动端性能优化

  • 尽可能使用css3动画,开启硬件加速。
  • 适当使用touch事件代替click事件。
  • 避免使用css3渐变阴影效果。
  • 能够用transform: translateZ(0)来开启硬件加速。
  • 不滥用Float。Float在渲染时计算量比较大,尽可能减小使用
  • 不滥用Web字体。Web字体须要下载,解析,重绘当前页面,尽可能减小使用。
  • 合理使用requestAnimationFrame动画代替setTimeout
  • CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引起手机过耗电增长
  • PC端的在移动端一样适用

相关阅读:如何作到一秒渲染一个移动页面

什么是Etag?

当发送一个服务器请求时,浏览器首先会进行缓存过时判断。浏览器根据缓存过时时间判断缓存文件是否过时。

情景一:若没有过时,则不向服务器发送请求,直接使用缓存中的结果,此时咱们在浏览器控制台中能够看到 200 OK(from cache) ,此时的状况就是彻底使用缓存,浏览器和服务器没有任何交互的。

情景二:若已过时,则向服务器发送请求,此时请求中会带上①中设置的文件修改时间,和Etag

而后,进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求以后,文件是否是没有被修改过;根据Etag,判断文件内容自上一次请求以后,有没有发生变化

情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告诉它,文件没有被修改过,你用你那边的缓存吧—— 304 Not Modified,此时浏览器就会从本地缓存中获取index.html的内容。此时的状况叫协议缓存,浏览器和服务器之间有一次请求交互。

情形二:若修改时间和文件内容判断有任意一个没有经过,则服务器会受理这次请求,以后的操做同①

① 只有get请求会被缓存,post请求不会

Expires和Cache-Control

Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。若是max-age和Expires同时出现,则max-age有更高的优先级。

 

ETag应用:

Etag由服务器端生成,客户端经过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能以下:

====第一次请求===

====第二次请求===

答案是同时使用,也就是说在彻底匹配If-Modified-SinceIf-None-Match即检查完修改时间和Etag以后,

服务器才能返回304.(不要陷入到底使用谁的问题怪圈)

为何使用Etag请求头?

Etag 主要为了解决 Last-Modified 没法解决的一些问题。

栈和队列的区别?

 

 

栈和堆的区别?

 

 

快速 排序的思想并实现一个快排?

“快速排序”的思想很简单,整个排序过程只须要三步:

(1)在数据集之中,找一个基准点

(2)创建两个数组,分别存储左边和右边的数组

(3)利用递归进行下次比较

 

你以为jQuery或zepto源码有哪些写的好的地方

(答案仅供参考)

jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,而后经过传入window对象参数,可使window对象做为局部变量使用,好处是当jquery中访问window对象的时候,就不用将做用域链退回到顶层做用域了,从而能够更快的访问window对象。一样,传入undefined参数,能够缩短查找undefined时的做用域链。

jquery将一些原型属性和方法封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法。

有一些数组或对象的方法常常能使用到,jQuery将其保存为局部变量以提升访问速度。

jquery实现的链式调用能够节约代码,所返回的都是同一个对象,能够提升代码效率。

ES6的了解

新增模板字符串(为JavaScript提供了简单的字符串插值功能)、箭头函数(操做符左边为输入的参数,而右边则是进行的操做以及返回的值Inputs=>outputs。)、for-of(用来遍历数据—例如数组中的值。)arguments对象可被不定参数和默认参数完美代替。ES6promise对象归入规范,提供了原生的Promise对象。增长了letconst命令,用来声明变量。增长了块级做用域。let命令实际上就增长了块级做用域。ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。。还有就是引入module模块的概念

js继承方式及其优缺点

原型链继承的缺点

 

 

借用构造函数(类式继承)

 

 

组合式继承

 

具体请看:JavaScript继承方式详解

关于Http 2.0 你知道多少?

HTTP/2引入了“服务端推(server push)”的概念,它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中,从而提升性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术,容许多个消息在一个链接上同时交差。

它增长了头压缩(header compression),所以即便很是小的请求,其请求和响应的header都只会占用很小比例的带宽。

defer和async

defer并行加载js文件,会按照页面上script标签的顺序执行 async并行加载js文件,下载完成当即执行,不会按照页面上script标签的顺序执行

谈谈浮动和清除浮动

浮动的框能够向左或向右移动,直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中,因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上。

如何评价AngularJS和BackboneJS

backbone具备依赖性,依赖underscore.jsBackbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.

BackboneModel没有与UI视图数据绑定,而是须要在View中自行操做DOM来更新或读取UI数据。AngularJS与此相反,Model直接与UI视图绑定,Model与UI视图的关系,经过directive封装,AngularJS内置的通用directive,就能实现大部分操做了,也就是说,基本没必要关心Model与UI视图的关系,直接操做Model就好了,UI视图自动更新。

AngularJSdirective,你输入特定数据,他就能输出相应UI视图。是一个比较完善的前端MVW框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等全部功能,模板功能强大丰富,而且是声明式的,自带了丰富的 Angular 指令。

用过哪些设计模式?

工厂模式:

 

 

构造函数模式

使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题,该模式与工厂模式的不一样之处在于:

 

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易形成内存泄露。在js中,函数即闭包,只有函数才会产生做用域的概念

闭包有三个特性:

1.函数嵌套函数

2.函数内部能够引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

具体请看:详解js闭包

请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但仍是有不少局限性的。

第一:每一个特定的域名下最多生成20个cookie

IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie

cookie的最大大约为4096字节,为了兼容性,通常不能超过4095字节。

IE 提供了一种存储能够持久化用户数据,叫作userdata,从IE5.0就开始支持。每一个数据最多128K,每一个域名下最多1M。这个持久化数据放在缓存中,若是缓存没有清理,那么会一直存在。

优势:极高的扩展性和可用性

 

 

缺点:

 

 

浏览器本地存储

在较高版本的浏览器中,js提供了sessionStorageglobalStorage。在HTML5中提供了localStorage来取代globalStorage

html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,而且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还须要指定做用域,不能够跨域调用。

除此以外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie须要前端开发者本身封装setCookie,getCookie

可是cookie也是不能够或缺的:cookie的做用是与服务器进行交互,做为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE7及如下不支持外,其余标准浏览器都彻底支持(ie及FF需在web服务器里运行),值得一提的是IE老是办好事,例如IE七、IE6中的userData其实就是javascript本地存储的解决方案。经过简单的代码封装能够统一到全部的浏览器都支持web storage

localStoragesessionStorage都具备相同的操做方法,例如setItem、getItemremoveItem

cookie 和session 的区别:

 

 

display:nonevisibility:hidden的区别?

 

 

CSS中link 和@import的区别是?

 

 

position:absolutefloat属性的异同

  • 共同点:对内联元素设置floatabsolute属性,可让元素脱离文档流,而且能够设置其宽高。
  • 不一样点:float仍会占据位置,absolute会覆盖文档流中的其余元素。

介绍一下box-sizing属性?

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

  • content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高
  • border-box:让元素维持IE传统盒模型(IE6如下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不从新计算元素的盒子尺寸,从而影响整个页面的布局。

CSS 选择符有哪些?哪些属性能够继承?优先级算法如何计算? CSS3新增伪类有那些?

 

优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

 

 

CSS3有哪些新特性?

 

CSS3中新增了一种盒模型计算方式:box-sizing。盒模型默认的值是content-box, 新增的值是padding-boxborder-box,几种盒模型计算元素宽高的区别以下:

content-box(默认)

布局所占宽度Width:

布局所占高度Height:

 

padding-box

布局所占宽度Width:

布局所占高度Height:

 

border-box

布局所占宽度Width:

布局所占高度Height:

 

对BFC规范的理解?

 

 

说说你对语义化的理解?

 

 

Doctype做用? 严格模式与混杂模式如何区分?它们有何意义?

1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签以前。告知浏览器以何种模式来渲染文档。

2)、严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行。

3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

4)、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

你知道多少种Doctype文档类型?

 

 

HTML与XHTML——两者有什么区别

 

 

常见兼容性问题?