整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端经典面试题

web前端经典面试题

、请谈谈你对性能优化的认识?

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较多可以采用以下技巧。

图片显示效果如左图

减少DNS查询次数

DNS查询也消耗响应时间,如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告,引用了外部图片或脚本),那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间,所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容,但是有些网页内容即使是异步的,用户还是在等待它的返回结果,例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本来完成一些高级的功能。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本来完成一些高级的功能。

2、如何避免XSS?

禁止危险脚本

IE8是第一款内置了XSS脚本拦截保护的浏览器。谷歌的Chrome也会紧随其后推出类似功能。这两款浏览器都会首先查看来自某个Web服务器的脚本是否是恶意的——如果是,就拦截它。在今年4月的黑帽欧洲2010大会上,研究专家David Lindsay和Eduardo Vela Nava却演示了一种可以破除这种拦截的办法,不过谷歌已经修复了Chrome中的这个漏洞。微软则在今年1月(补丁MS10-002)和3月(MS10-018)也已解决了大部分问题,并计划在6月修复第3个漏洞,所以在你读到这篇文章的时候,破除XSS脚本拦截的问题可能已经完全解决了。

Firefox的用户则可以利用免费的NoScrpit附加组件有选择地拦截脚本。比如说,你可以放行一段Flash视频,而同时拦截该网站上的其他脚本组件。IE和Chrome在拦截可疑脚本方面没有这么细的粒度——它们是要么全拦截,要么全不拦截。

NoScrpit也有一个问题,那就是大多数用户并不喜欢放行个别脚本的做法,因为这样会带来不便。不过拦截和放行今后可能会成为你的第二天性。你还可以对某个特定网站上的所有脚本进行认证,无论是为了一次性访问还是今后的所有访问,这样的认证如今在IE 8和chrome中也可以做了,使得防范XSS攻击实现更加可能。

3、平时如何管理项目?

所谓项目,简单地说,就是在既定的资源和要求的约束下,为实现某种目的而相互联系的一次性工作任务。一般来说,项目具有如下的基本特征:

1)明确的目标其结果只可能是一种期望的产品,也可能是一种所希望得到的服务。

2)独特的性质每一个项目都是唯一的。

3)资源成本的约束性每一项目都需要运用各种资源来实施,而资源是有限的。

4)项目实施的一次性项目不能重复。

5)项目的不确定性在项目的具体实施中,外部和内部因素总是会发生一些变化,因此项目也会出现不确定性。

4、请谈谈项目的迭代周期?

软件项目开发,一般都会采用增量、迭代、(或者叫进化、演化、演进)的软件开发模型,众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形,改进原则是:增加客户在整个项目周期中的参与度,降低软件开发过程中的风险,增强软件项目的后期可维护性。

不同的软件开发模型,迭代周期长短也不相同,有的是一个月,有的是两周,我们一般都是根据实际情况确定,一个周期完成,将项目成果(可运行的软件)提交给用户(或进行内部评审),通过后就进入下一个迭代开发周期

5、工作中用过什么构建工具?

答:用过gulp。

第一步:安装node和npm,搭建node环境。

第二步:安装gulp

第三步:新建Gulpfile文件,运行gulp

安装依赖,提醒下,如果以上命令提示权限错误,需要添加 sudo 再次尝试。

Gruntfile维护起来那么困难,有几个原因:

配置和运行分离

程序员都知道,变量的声明和使用挨在一起,最方便理解和修改。但Gruntfile里,配置Task和调用它们的地方离得很远,极大地增加了心智负担

每个插件做的事太多

每个Task的结果必须写到磁盘文件,另一个Task再读,损害性能倒是小事,更麻烦的是让整个过程变复杂了。就像一个个小作坊,来料加工又返回给客户,这中间的沟通成本、出错机会都大大增加。配置项过多做事多了,配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件,都得去学习一番。

6、谈谈你对模块化的理解?

什么是模块化?

? 模块化就是为了减少系统耦合度,提高高内聚,减少资源循环依赖,增强系统框架设计。

? 让开发者便于维护,同时也让逻辑相同的部分可复用

? 模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程,那么模块化的过程通俗点讲就是:

模块化的过程就是:

? 1、拆分

将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.

注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好,就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起,组成一个资源块.

将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案:

1. namespace

2. sass,less

3. AMD&CMD

4. html模版

5. grunt,gulp,webpack

6. FIS,YUI,KISSY

7、平时都用什么第三方框架?

jQuery、Bootstrap、angularjs、vue、underscore、seajs、RequireJS…

8、请描述一下cookie,sessionStorage和localStorage的区别?

答:cookies兼容所有的浏览器,Html5提供的storage存储方式。

? Document.cookie

? Window.localstorage

? Window.sessionstorage

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

9、如何使用缓存?

可以基于http的头信息控制缓存

ajax请求对早期的IE浏览器默认就是缓存的,可以通过时间戳防止缓存

10、谈谈你对预加载的理解?

Web预加载指的是在网页全加载完成之前,在页面优先显示一些主要内容,以提高用户体验。对于一个较庞大的网站,如果没有使用预加载技术,用户界面就会长时间显示一片空白,直到资源加载完成,页面才会显示内容。

例如,可以通过js预先从服务加载图片资源(动态创建Image,设置src属性),只要浏览器把图片下载到本地,就会被缓存,再次请求相当的src时就会优先寻找浏览器缓存,提高访问速度。

11、缓存和预加载的区别是什么?

缓存就是把请求过的数据缓存起来,下次请求的时候直接使用缓存内容,提高响应速度

预加载指的是提前把需要的内容加载完成,访问的时候可以明天提高响应效率,比如图片的预加载(可以提前加载一定数量的图片,当用户访问图片的时候一般只看前几张,由于是预加载好的,所以速度比较快)

12、图片如何压缩?

可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小 可缓存

使用 CSS Sprites

13、压缩文件有哪些方法?

使用Grunt、Sass、ant压缩

14、如何区分静态页面和动态页面?

答:要区分这两个,最简单的方法就是看后缀了,动态网页网址中有两个标志性的符号“?”和“&”(有的可能没有&),这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。

15、字符串拼接和模板引擎,项目中会如何操作?模板引擎会不会利于SEO优化?

简单的数据渲染,拼接字符串即可,稍微复杂的业务逻辑使用前端模板引擎,过于复杂的页面基本上使用后台渲染的方式;模板引擎会影响SEO优化,为了解决这个问题,需要关注SEO的页面最好采用后台渲染的方式。

16、前台兼容性问题有哪些?

答:主要是常用浏览的(前端)API差异,渲染差异,等等

17、你如何对网站的文件和资源进行优化?期待的解决方案包括?

答:文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

18、内存泄漏怎么理解?

答: IE6时代有bug,闭包会造成内存泄漏,这个现在已经无须考虑了。

其次,闭包本身不会造成内存泄漏,但闭包过多很容易导致内存泄漏。

这句话很矛盾,技术上讲,闭包是不会造成内存泄漏的,浏览器的bug除外。但是,闭包会造成对象引用的生命周期脱离当前函数的上下文,因此,如果不仔细考虑闭包函数的生命周期,的确有可能出现意料之外的内存泄漏,当然,从严格意义上讲,这是程序员自己的bug,而不是闭包的错。

19、微格式到底是做啥用?

答:是开放的数据格式,面向的是普通用户,任何用户可以透过简单的程序读取微格式内容。而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API(一般基于XML-PRC、REST,相对复杂)。RSS具有微格式的部分优点,但限制还是比较多的,比如有限的元数据(标题、描述、URL等),不能更好地描述语义,不太容易与已存在的工具结合等。用微格式可以来聚合外部Blog,Flickr,YouTube,MapQuest,甚至MySpace里的内容。

微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。

20、懒加载是用滚轮判断高度好还是用插件?

使用插件比较好,插件考虑的问题比较全面,仅仅通过滚轮高度判断很容易导致一些副作用(比如一次性请求多次)

21、如何缓存整个页面,在没有网络的时候可以来回的跳转?

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性。

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

manifest 文件可分为三个部分:

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

实例 - 完整的 Manifest 文件

22、CDN是啥?

CDN的全称:是Content DeliveryNetwork,即内容分发网络,加速的意思,那么网站CND服务就是网站加速服务。

CDN加速原理:CDN加速将网站的内容缓存在网络边缘(离用户接入网络最近的地方),然后在用户访问网站内容的时候,通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上,有该缓存服务器为用户提供内容服务;相对于直接访问源站,这种方式缩短了用户和内容之间的网络距离,从而达到加速的效果。

CDN的特点:

1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性

2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响,实现了跨运营商的网络加速,保证不同网络中的用户都能得到良好的访问质量。

3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器,选择最快的Cache服务器,加快远程访问的速度

4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器,远程用户访问时从cache服务器上读取数据,减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。

5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制,可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响,同时保证较好的服务质量。

23、浏览器一次可以从一个域名下请求多少资源?

浏览器的并发请求数目限制是针对同一域名的,同一时间针对同一域名下的请求有一定数量限制,不同浏览器这个限制的数目不一样,超过限制数目的请求会被阻塞;

目前的话,所有浏览器的并发数目一般限制在10以内。

24、什么是垃圾回收机制(GC)?

早期的计算机语言,比如C和C++,需要开发者手动的来跟踪内存,这种机制的优点是内存分配和释放的效率很高。但是它也有着它的缺点,程序员很容易不小心忘记释放内存,从而造成内存的泄露。

新的编程语言,比如JAVA, C#, javascript, 都提供了所谓“垃圾回收的机制”,运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存,而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。GC的优点就在于它大大简化了应用层开发的复杂度,降低了内存泄露的风险。

25、image和canvas在处理图片的时候有什么区别?

image是通过对象的形式描述图片的

canvas通过专门的API将图片绘制在画布上

26、简述移动开发的注意点,如何做好不同手机的适配,你以前的项目是怎么做的?

1、单独做移动端项目,采用百分比布局

2、采用响应式的方式做适配

27、响应式布局的时候,轮播图使用两张不同的图片去适配大屏幕和超小屏幕,还是一张图片进行压缩适配不同终端,说明原因?

最好使用两张不同大小的图片去适配大屏幕和超小屏幕,这样可以针对不同设备的屏幕大小,来加载响应的图片,减少超小屏幕设备的网络流量消耗,加快响应速度,同时防止图片在大屏幕下分辨率不够导致失真的问题。

28、http和tcp有什么区别?

TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,是一种“经过三次握手”的可靠的传输方式;

HTTP协议即超文本传送协议(Hypertext Transfer Protocol ),是应用层协议,是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用。

29、向git中添加一个文件并commit,然后push到remote server,请写出相关命令?

$ git add README.md
$git commit -m "add README.md"
$ git push origin master

30、请把以下HTML文档翻译成MarkDown格式?

<h3>Header</h3>

<p>Hello world!<ahref="https://www.google.com">Google</a></p>

<ol>

<li>NumberOne</li>

<li>NumberTwo</li>

</ol>

### Header

Hello world![Google](https://www.google.com)

1. Number One

2. Number Two

35、设计模式有哪些?列举你在前端开发工作中自己应用到或者了解到其他框架所用到的设计模式?

单例、工厂、观察者、适配器、代理模式

36、请描述你熟悉的语言的垃圾回收(GC)机制,他们对循环引用是如何处理的?如何查找内存泄漏(MemoryLeak)?

JavaScript的垃圾回收机制主要是根据数据是否还存在引用,没有引用的数据空间可能在某个时间被回收;在java中垃圾回收机制采用对象遍历来解决循环引用;windows的任务管理器就可以查看到内存泄露

31、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

答:Ie(Ie内核) 火狐(Gecko)谷歌(webkit) opear(Presto)

32、写出几种IE6 BUG的解决方法?

答:1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline-3px

3.超链接hover 点击后失效使用正确的书写顺序 link visitedhover active

4.Iez-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height最小高度!Important 解决’

7.select在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08line-height:1px)

33、图片优化

项目中图片处理相关的优化,项目中用到的优化方案,图片大小达到多少的时候选择处理?

答:1、首先了解在web开发中常见的图片有那些格式。

JPG 通常使用的背景图片,照片图片,商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。

PNG 这种格式的又分为两种一种PNG-8,一种 PNG-24。

PNG-8格式不支持半透明,也是IE6兼容的图片存储方式。

PNG-24图片质量要求较高的半透明或全透明背景,保存成PNG-24更合适(为了兼容IE可以试用js插件pngfix)一般是背景图标中使用的多。

GIF 这种格式显而易见的是在需要gif动画的时候使用了。

2.优化方案

l 样式代替图片

例如:半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持,而对于那些低端浏览器,我们并不会完全抛弃他们,“渐进增强”则是一个很好的解决方案。

l 精灵图

CSS Sprites,将同类型的图标或按钮等背景图合到一张大图中,减少页面请求。

l 字体图标

Icon Font,将图标做成字体文件。优点是图标支持多个尺寸,兼容所有浏览器,减少页面请求等。美中不足的是只支持纯色的icon。SVG,对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!

l Base64

将图片转化为base64编码格式,资源内嵌于CSS或HTML中,不必单独请求。

Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA L...."); }

Base64 在HTML中的使用

<imgwidth="40"height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

l 图片响应式

通常图片加载都是可以通过lazy加载的形式来的,那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的目的来达到优化。

34、你知道有哪些方法可以提高网站的性能?

答:我们从两个方面来讲:

1. 资源加载

CSS顶部, JS底部

CSS JS文件压缩

尽量使用图片使用精灵图,字体图标

图片加载可通过懒加载的方式。

总之就是减少资源体积减少资源请求次数。

2. 代码性能

Css:

使用CSS缩写,减少代码量;

减少查询层级:如.header .logo要好过.header .top .logo;

减少查询范围:如.header>li要好过.header li;

避免TAG标签与CLASS或ID并存:如a.top、button#submit;

删除重复的CSS;

….

Html:

减少DOM节点:加速页面渲染;

正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;

减少页面重绘。比如给图片加上正确的宽高值:这可以减少页面重绘,

……

Js:

尽量少用全局变量;

使用事件代理绑定事件,如将事件绑定在body上进行代理;

避免频繁操作DOM节点;

减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;

Angular、主流框架和服务器相关问题

1、 ng-app是什么?

答:

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。

所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。

2、说说MVC和MVVM分别是什么?

MVC全名是Model View 。是Controller模型(model)-视图(view)-控制器(controller)的缩写

MVVM是Model-View-ViewModel的简写

3、?g是什么?

在Node.js中-g表示全局安装模块

4、自定义指令的类型(E,A,C,M)?

元素(E)、属性(A)、类(C)、注释(M)

5、$scope和自定义指令里的scope有啥区别?

$scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和Controller 之间可以友好的通讯.

自定义指令里的scope表示指令的作用域,它有三个可选值:true、false、对象{}

6、Ionic中的路由?

Ionic也是基于Angular的,使用的是ui-router,

ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着 状态的切换,Ionic之所以没有使用Angular官方的ngRoute,是回ngRoute缺少一些高级的特性,比如视图命名,视图嵌套。

7、filter?

过滤器

8、ng-bind?

ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。

9、说一说link?

link中可以拿到scope和controller,可以与scope进行数据绑定,与其他指令进行通信。

10、为什么angular不推荐使用dom操作?

Angular倡导以测试驱动开发,在的service或者controller中出现了DOM操作,那么也就意味着的测试是无法通过的

使用Angular的其中一个好处是啥,那就是双向数据绑定,这样就能专注于处理业务逻辑,无需关系一堆堆的DOM操作。如果在Angular的代码中还到处充斥着各种DOM操作,那为什么不直接使用jquery去开发呢

11、看过Angular的源码吗,它是怎么实现双向数据绑定的?

angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。

在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher

12、讲讲promise:{

promise:null;;

}?

13、ui-router 和 ng-router区别?

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL

ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着 状态的切换。

14、什么是指令?

指令是指示计算机执行某种操作的命令,它由一串二进制数码组成。一条指令通常由两个部分组成:操作码+地址码。

15、service服务三种方式是什么?

angularjs 中可通过三种($provider,$factory,$service)方式自定义服务

16、gulp任务都是怎么定义,怎么执行的?

通过 gulp.task方法定义任务,在项目中新建gulpfile.js文件,书写代码,如:

var gulp=require(‘gulp’)

gulp.tasks(

‘script’ // 任务名

,function(){

// 在这里写任务需要执行的代码

});

在命令输入`gulp 任务`,可以执行所在目录gulpfile.js文件中的任务。

17、Bootstrap中最多可以分多少列?lg、md、sm、xs这几个屏幕宽度的界限是多少?

12列

.col-xs- 超小屏幕手机 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面显示器 (≥992px)

.col-lg- 大屏幕大桌面显示器 (≥1200px)

18、angular中方法apply和digest区别?

当数据出现没有经过angular但是发生改变的情况下,需要调用apply。Apply的范围比较广,只执行一次,但是digest针对某一元素执行多次。

20、ng-show/hide和ng-if的区别是什么?

Show/hide是显示隐藏,if是是否存在某一部分

21、react虚拟DOM运行机制是什么?

在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。虚拟dom

22、react中prop和state的区别?

需要理解的是,props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态(可以是父组件、子孙组件)。

23、redux的原理?

Redux 把一个应用程序中,所有应用模块之间需要共享访问的数据,都应该放在 State 对象中。这个应用模块可能是指 React Components,也可能是你自己访问 AJAX API 的代理模块,具体是什么并没有一定的限制。State 以 “树形” 的方式保存应用程序的不同部分的数据。这些数据可能来自于网络调用、本地数据库查询、甚至包括当前某个 UI 组件的临时执行状态(只要是需要被不同模块访问)、

24、node常用模块?

http fs path url Buffer process

25、了解npm,spm,nodejs吗,请简要描述?

NPM便于JavaScript开发者共享和重用代码,它可以很容易地更新你的代码;再分享。是全球最大的开源库生态系统。

SPM是淘宝社区电商业务(xTao)为外部合作伙伴(外站)提供的一套跟踪引导成交效果数据的解决方案。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。它使我们能够在本地运行javascript

26.请列举在内网的两台服务器中拷贝文件的方法?用Shell脚本解答数据库?

scp -P 1234 -r test_folderuser@192.168.1.20:~

主要就是scp命令的使用

28、请描述你所熟悉的Web服务器框架(如Django)作为一个成熟的Web框架,需要提供哪些重要的功能模块?

提供了网站开发的常用模块:处理用户请求、操作数据库、模板渲染、配置文件管理等

29、服务器Node.js和浏览器js的区别是什么?Node.js把js从客户端迁移了到服务端、主要做了哪些工作?为什么说Node.js适合做高并发的互联网应用?

Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。Node.js 使用事件驱动,非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

网络相关问题

1、请解释下列术语:UrlEncode,Utf8,JSON,UTC,MD5?

Urlencode:将字符串以url形式编码(在编程语言中通常都有实现该功能的内置函数或者API)。

Utf8:是一种针对Unicode的可变长度字符编码,主要用于在网页上显示各国语言字符

2、请解释GET/POST的区别,以及请求参数放到url里和放到body里面的区别?

Post与Get区别:

GET请求,请求的数据会附加在URL之后,以?分割URL和传输数据,多个参数用&连接。URL的编码格式采用的是ASCII编码,而不是uniclde,即是说所有的非ASCII字符都要编码之后再传输。

POST请求:POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

因此,GET请求的数据会暴露在地址栏中,而POST请求则不会。

传输数据的大小

在HTTP规范中,没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中,对于GET,特定的浏览器和服务器对URL的长度有限制。因此,在使用GET请求时,传输数据会受到URL长度的限制。

对于POST,由于不是URL传值,理论上是不会受限制的,但是实际上各个服务器会规定对POST提交数据大小进行限制,Apache、IIS都有各自的配置。

安全性

Get是Form的默认方法,安全性相对比较低。

请求参数放到url里和放到body里面的区别

首先,参数的存放位置我们无法直接指定,而是不同的请求方法参数传递的方式不同。

常用的HTTP请求主要为GET请求和POST请求两种,GET请求的参数会通过以跟随在URL后边以键值对的方式进行传递(例:key1=a&key2=b&key3...);而POST请求的参数会通过HEADER进行传递。考虑到安全性的问题,可以确定两者都不安全,原因是HTTP请求可以被轻易抓包和截获,其中的请求参数值自然会很容易被获取。

3、请列举出常用的Http Header,Cookie是怎么实现的?

Content-Length,请求、响应体的数据字节大小

Accept-Encoding,请求头,可接受的文本压缩算法,如: gzip, deflate

Accept-Language,请求头,支持语言,客户端浏览器的设置,如:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

User-Agent,请求头,浏览器信息,

Cookie,请求头,服务器或客户端在上次设置的COOKIE,包括作用域名(.360buy.com),过期时间,键与值。

Referer,从一个连接打开一个新页面,新页面的请求一般会加此信息,标名是从哪里跳过来的,所有的页面的打开历史链就可被挖掘出来,有利于分析用户行为与CPS分成

Cookie在浏览器本地会有一个文件存储数据,通信的时候通过请求头和响应头传递数据

4、请解释下列返回码的含义:200,302,400,403,500,502

200:请求成功

302:请求的资源临时从不同的 URI响应请求。(资源临时重定向)

400:错误请求(请求的参数错误或者服务器不理解请求的语法)

402:10.4.3 402 Payment Required This code is reserved for future use.

该状态码是为了将来可能的需求而预留的。

500:服务器端错误

502:网关或代理无效/无响应,网络错误

5、长连接和短连接的区别

HTTP协议目前常用的有哪几个?KEEPALIVE从哪个版本开始出现的?

到现在http出现了 1.0和 1.1版本

Keep-Alive是从1.1默认就支持了。

1、什么是Keep-Alive模式?

我们知道HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。

http 1.0中默认是关闭的,需要在http头加入"Connection: Keep-Alive",才能启用Keep-Alive;http 1.1中默认启用Keep-Alive,如果加入"Connection: close ",才关闭。目前大部分浏览器都是用http1.1协议,也就是说默认都会发起Keep-Alive的连接请求了,所以是否能完成一个完整的Keep-Alive连接就看服务器设置情况。

2、启用Keep-Alive的优点

从上面的分析来看,启用Keep-Alive模式肯定更高效,性能更高。因为避免了建立/释放连接的开销。

6、从服务器考虑提高网站性能

答:业界常用的优化WEB页面加载速度的方法(可以分别从页面元素展现,请求连接,css,js,服务器等方面介绍)?

对于服务器方面前端能做的工作:

使用CDN加速,使用户从离自己最近的服务器下载文件;

减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;

为文件头指定Expires,使内容具有缓存性;

前端优化:DNS预解析提升页面速度

<link rel="dns-prefetch"href="http://hm.baidu.com" />

<link rel="dns-prefetch"href="http://eiv.baidu.com" />

服务器端能做的工作:

负载均衡,分布式存储,提升服务器性能等等。

7、什么是Daemon进程?

答:Daemon()程序是一直运行的服务端程序,又称为守护进程。通常在系统后台运行,没有控制终端,不与前台交互,Daemon程序一般作为系统服务使用。Daemon是长时间运行的进程,通常在系统启动后就运行,在系统关闭时才结束。一般说Daemon程序在后台运行,是因为它没有控制终端,无法和前台的用户交互。Daemon程序一般都作为服务程序使用,等待客户端程序与它通信。我们也把运行的Daemon程序称作守护进程。

8、优化一个以I/O为瓶颈的程序,以下哪些方法效果比较显著,Why?

a) 增加CPU数目

b) 提高CPU主频

c) 增大内存的容量

d) 采用多线程

e) 采用异步I/O和多路(Multlplex)I/O

f) 对每次I/O进行Bath访问(多次I/O合并一次完成)

c、e、d、f提升的效果会比较显著

c通过将数据预读取到内存中(建立内存池)的方式,提高访问时候的效率,有效减少磁盘IO读写次数

9、设计一个系统,实现统计网站中每个URL访问到的次数(pv),以及访问的独立用户数(uv),其中每个独立网页以URL为key,每个独立用户以ip为key?

10、什么是内存对象的序列化(Serialiization)?为什么要序列化?请描述你熟悉的网络传输序列化(Serialiization)框架或格式(Server)?

把对象转换为字节序列的过程称为对象的序列化

序列化主要用于网络传输数据及将数据保存在硬盘上

常见的序列化以后的格式有:XML Jason ,但它们都是字符串

项目相关问题

1、请谈下团购倒计时如何实现?

团购倒计时页面端的效果比较好实现,主要是样式和时间的操作,重要的考虑时间要和服务器端同步,其实这个效果也可以基于服务器端推送技术来实现

2、轮播图有哪几种?如何实现?

纯css可以实现轮播图;js实现轮播图

3、如何实现数组去重?

a.最简单的可以直接利用ES5的indexOf方法。

functiondupRemove(arr) {

var tmp=[]; //一个新的临时数组

for (vari=0; i < arr.length; i++) {

// 判断tmp数组中是否存在arr中第i元素,如果不存在则添加到tmp数据组。

if(tmp.indexOf(arr[i])==-1) {

tmp.push(arr[i]);

}

}

returntmp;

}

b.

b.还有一种比较有意思的写法

function dupRemove (arr) {

var tmp=[];

for (vari=0, l=arr.length; i < l; i++) {

for (varj=i + 1; j < l; j++) {

if (arr[i]===arr[j]) {

j=++i;

}

}

tmp.push(arr[i]);

}

return r;

}

4、写一个方法获取url中?号后面的参数,并将参数对象化?

function getSearch (url) {

varreg_url=/^[^\?]+\?([\w\W]+)$/,

reg_params=/([^&=]+)=([\w\W]*?)(&|$|#)/g,

arr_url=reg_url.exec(url),

ret={};

if(arr_url && arr_url[1]) {

var str_params=arr_url[1], result;

while((result=reg_ params.exec(str_ params)) !=null) {

ret[result[1]]=result[2];

}

}

returnret;

}

程序题

1、var a=[];

a[0]=0;a[1]=1;a[4]=4;

请问a.length的值是多少?a[3]的输出结果是什么?

5 undefined

2、var a=[5,6];

var b=a;

b[0]="hello";

alert(a[0]);

请问值是多少?

"hello"

3、typeof(null),typeof(undefined),typeof(NaN),typeof(NaN==NaN),说出上面代码执行结果?

object

undefined

number

boolean

4、function doSomething(){

for(var i=0; 4 > i; i++) {

var k=100;

aMrg +=’,’ + (k + i);

}

}

var k=1,aMrg=k;

doSomething();

aMrg +=k;

log(aMrg);

1,100,101,102,1031

5、请写出下面输出的值

Console.log(undefined || 1);//值___1__

Console.log(null || NaN);//值__NaN___

Console.log(0 && 1);//值__0___

Console.log(0 && 1 || 0);//值__0___

6、看下列代码,<p>标签内的文字是什么颜色的?红色

<style>

.classA{color: blue};

.classB{color: red};

</style>

<body>

<p class=”classB classA”>123</p>

</body>

7、var a=[5,6];

var b=a;

b[0]=“hello”;

alert(a[0]);

值是多少?

"hello"

8、你面前有一座高塔,这座高塔有N(N > 100)个台阶,你每次只能往前迈1个或者2个台阶,请写出程序计算总共有多少种走法?

这个案例满足斐波那契定律 1,1,2,3,5,8,13,21, 34, 55, 89, 144

9、请阅读下面的CSS代码

#left {

color: white !important;

}

#container #left {

color: red;

}

#left {

color: green !important;

}

.container #left {

color: blue;

}

则在如下html中

<div class=”container” id=”container”>

<span id=”left”>left</span>

</div>

#left最终color属性值为?绿色

10、下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确说明为什么,并修改循环内的代码使其输出正确的结果。

for (var i=0; i < 5; ++i) {

setTimeout (function () {

console.log(i + ‘’);

},100*i);

}

不正确,先执行FOR循环。for循环完成后,在去执行setTimeout。但是这个时候I已经是5了,所以输入了5次5

11、完成函数showlmg(),要求能够动态根据下拉列表的选项变化,更新图片的显示

<body>

<script type=”text/javascript”>

Function showImg (oSel) {

};

</script>

<img id=”pic” src=”img1.jpg” width=”200” height=”200”>

<br/>

<selectid=”sel” οnchange=”showImg(this)”>

<optionvalue=”img1”>城市生活</option>

<optionvalue=”img2”>都市早报</option>

<optionvalue=”img3”>青山绿水</option>

</select>

</body>

答案说明:当select发生改变的时候调用showImg函数,实参为this(select对象本身),可以通过select对象的属性来为pic的src赋值实现图片切换

12、完成foo()函数的内容,要求能弹出对话框提示当前选中的是第几个单选框

<html>

<head>

<meat http-equiv=”Content-Type”content=”text/html; charset=utf-8”>

</head>

<body>

<scripttype=”text/javascript”>

functionfoo() {

};

</script>

<form name=”form1” οnsubmit=”retuen foo()”>

<inputtype=”radio” name=“radioGroup”>

<input type=”radio” name=“radioGroup”>

<inputtype=”radio” name=“radioGroup”>

<input type=”radio” name=“radioGroup”>

</form>

</body>

</html>

题粗的有问题,onsubmit只有在提交的时候才会触发这里面没有submit按钮,在提交事件触发的时候遍历哪个input表单是选中状态然后alert粗来

13、计算下面程序运行结果

var msg=‘hello’;

function great(name, attr) {

name=‘david’;

var greating=msg + name + ‘!’;

var msg=‘您好’;

For (var i=0 ; i < 10;i++) {

var next=msg + ‘您的id是’ + i*2 + i;

}

console.log(arguments[0]);

console.log(arguments[1]);

console.log(greating);

console.log(next);

}

geat(‘Tom’);

答案:david //参数1

hellowworld 01.html:20 undefined //参数2 未传入为未定义

hellowworld 01.html:21 undefineddavid! //name虽然是参数但是参数重新赋值为david了msg因为变量声明提升所以值为undefined

您好您的id是189//因为number+string=string所以for循环最后一次声明next=****18+9

14、下面这段JS输出什么,并简述为什么?

function Foo() {

var i=0;

return function () {

console.log(i++);

}

}

var f1=Foo(),

f2=Foo();

f1();

f1();

f2();

console.log(i);

0 //f1=Foo() 相当于f1赋值为函数Foo()的返回值f1=function(){

console.log(i++)

}

1 //因为f1=了一个function所以有了作用域,f2和f1不同,不在一个内存中

0

报错 //i为Foo内部的变量全局不可访问,全局中没有i变量所以会报错

15、请写出下面输出的值

a) varnum=1;

var fun=function () {

console.log(num);//值___undefined___

var num=2;

console.log(num);//值___2___

}

fun();

b) varnum=1;

function fun () {

console.log(num);//值___1____

num=2;

console.log(num);//值___2____

}

fun();

16、写出以下程序执行的结果

1)var a=10;

a.pro=10;

console.log(a.pro + a);

NAN number对象不可以定义私有属性 namber+非数字和字符的值就等于NaN

2)var s=‘hello’;

s.pro=‘world’;

console.log(s.pro + s); //undefinedhello s位字符串,字符串不可以自定义属性,所以s.pro为undefined 字符串做加运算会强制拼接位字符串

3)console.log(typeof fn);

function fn() {};

var fn;

//function 函数提升优先于变量提升

4)var f=true;

If(f===true) {

var a=10;

}

function fn() {

var b=20;

c=30;

}

fn();

console.log(a);

//10

17、请看如下的代码,写出结果

var a=5,b=3;

function test() {

alert(b++);

var a=4;

alert(--a);

alert(this.a);

}

1)tese(),三次alert()的值依次是什么?335 435 535

2)new test(),三次alert()的值依次是什么? 33undefined 43undefined53undefined //this更改了指向原来是指向window 用了new关键字后指向test test木有a属性所以为undefined

18、p最后显示什么颜色。怎么让p的颜色变成黑色,并简要说明css选择器优先级关系

<style>

#classA{color:yellow};

p.classB(color:red);

</style>

<body>

<p id=”classA” class=”classB”>123</p>

</body>

//p#classA{color:black}

19、关于正则表达式声明6位数字的邮编,一下代码正确的是(C)

A.var reg=/\d6/;

B.var reg=\d{6}\;

C.var reg=/\d{6}/;

D.var reg=new RegExp (“\d{6}”);

20、关于JavaScript里xml处理,一下说明正确的(A)

A.xml是种可扩展标记语言,格式更规范,是作为未来html的替代 //貌似XML是被替代的

B.Xml一般用于传输和存储数据,是对html的补充,两者的目的不同

C.在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同

D.在IE浏览器里处理xml,首先需要创建ActiveXObject对象

21、请选择对javascript理解有误的(B)

A.javascript是网景公司开发的一种基于事件和驱动网页脚本语言

B.JScript是javascript的简称 //微软自己的浏览器才支持

C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同

D.AJAX技术一定要使用javascript技术

22、在Jquery中下面哪一个是用来追加到指定元素的末尾(B)

A.inserAfter()

B.Append()

C.appendTo()

D.After()

23、在javascript中定义变量var a=”35”,var b=“7”运算a % b 的结果为(C)

A.357

B.57

C.0

D.5

24、下面哪个属于javascript的字符型C

A.False

B.你好

C.“123”

D.Null

25、下面哪个属于javascript的布尔值(C)

A.1.2

B.”true”

C.false

D.null

26、请选择结果为真的表达式(C)

A.null instanceof Object

B.Null===undefined;

C.null==undefined

D.NaN==NaN

27、下列运算方式不属于逻辑运算的是(D)

A.!a

B.a&&b

C.a||b

D.a>b

28、声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是(D)

A.var obj=[name : “zhangsan” ,show: function(){alert(name);}];

B.Var obj={name : “zhangsan”,show: “alert(this.name)”};

C.Var obj={name : “zhangsan”,show: function () {alert(name);}};

D.Var obj={name : “zhangsan”,show: function () {alert(this.name);}}

29、以下过于Array数组对象的说法不正确的是(C)

A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数

B.reverse用于对数组数据的倒序排列

C.向数组的最后位置加一个新元素,可以用pop方法 //push吧

D.unshift方法用于向数组删除一个元素

30、要将页面的状态显示”已经选中该文本”,下列JavaScript语句正确的是(A)

A.window.status=“已经选中该文本”

B.Document.status=“已经选中该文本”

C.Window.screen=“已经选中该文本”

D.Document.screen=“已经选中该文本”

31、点击页面的按钮,使之打开一个新窗口,加载一个页面,以下JavaScript代码中可执行的是(D)

A.<input type=”button” value=”new”οnclick=”open(‘new.html’,’_blank’)”>

B.<input type=”button” value=”new”οnclick=”window.location=’new.html’;”>

C.<input type=”button” value=”new”οnclick=”location.assign(‘new.html’);”>

D.<form target=”_blank” action=”new.html”>

<input type=”submit” value=”new”>

</form>

32、下面的JavaScript语句中,实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空(B)

A.for(var i=0; i <form1.elements.length; i++) {

if(form1.elements[i].type==”text”)

form1.elements[i].value=“”;

}

B.for (var i=0; i < document.forms.length;i++) {

if(forms[0].elements[i].type==“text”)

form[0].elements[i].value=“”;

}

C.if(document.form.elements.type==“text”)

form.elements[i].value=“”;

D.for(var i=0; i <document.forms.length;i++) {

for(var j=0;j <document.forms[i].elements.length;j++) {

if(document.forms[i].elements[j].type==“text”)

document.forms[i].elements[j].value=“”;

}

}

33、在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个”-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中(A)能正确实现以上功能

A.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4))))

Alert(“无效的电话号码!”);

B.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

Alert(“无效的电话号码!”);

C.var str=form1.fname.value;

If(str.substr(0,3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3))))

alert(“无效的电话号码!”);

D.var str=form1.fname.value;

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

alert(“无效的电话号码!”);

34、关于正则表达式声明6位数字的邮编,一下代码正确的是(C)

A.var reg=/\d6/;

B.var reg=\d{6}\;

C.var reg=/\d{6}/;

D.var reg=new RegExp (“\d{6}”);

35、下面关于cookie的说明正确的是(D)

A.Cookie设置的过期时间为3600s是指60分钟过期

B.Cookie设置的过期时间为3600s是指只要在间隔60分钟内有动作时就不过期

C.Cookie保存在服务器端

D.Cookie保存在用户本地

36、使用js代码实现,将下面段落中含有的链接替换成可直接点击打开的链接

<p id=”text”>这个段落里有链接

比如:http://www.abc.comm/和https://www.github.com/都是链接。

可是他们显示在网页中是,链接不可点,还得复制粘贴到地址栏打开,好麻烦

</p>

37、写一个方法获取url?后面的参数,并将参数对象化。

function parseQueryString(url){

var params={};

var arr=url.split("?");

if (arr.length <=1)

return params;

arr=arr[1].split("&");

for(var i=0, l=arr.length;i<l; i++){

var a=arr[i].split("=");

params[a[0]]=a[1];

}

return params;

}

var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

var ps=parseQueryString(url);

console.log(ps["key1"]);

38、Node.js中,一段访问redis的代码如下

var redis=require(‘redis’);

var client=redis.createClient();

client.set(‘key’, ‘value’, function (err,data) {

if(err) {

console.error(err.message);

process.exit(1;)

}

cilent.get(‘key’,function(err,data) {

if(err) {

console.error(err.message);

return;

}

console.log(data);

process.exit(0);

})

});

请用Promise的异步调用方式重写

请用ES6 yield的异步调用方式重写

在经历了多个异步回调之后,如果拿到完整的堆信息(stack trace)?

39、用你认为合适的数据库产品,请设计数据结构,并完成一下方法(Server);

1.当出现一次网页浏览的时候,请实现函数click(url, ip)

2.请实现查询函数pv(url)以及uv(url)

40、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口

<html>

<head>

<script type=”text/javasccript”>

Function closeWin() {

}

</script>

</head>

<body>

<input type=”button” value=”关闭窗口” οnclick=”closeWin()” />

</body>

</html>

41、请用JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本全部字体标红,要求写出完整的文本框HTML代码和JavaScript逻辑代码?

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>只能输入正整数</title>

</head>

<body>

<inputid="txt" type="text">

<script>

var txt=document.getElementById('txt');

var color=window.getComputedStyle(txt,'').color

txt.addEventListener('keyup',function() {

var reg=newRegExp("^[0-9]*$");;

console.log(reg.test(this.value));

if(reg.test(this.value)){

this.style.color=color;

}else{

this.style.color='red';

}

});

</script>

</body>

</html>

42、请对以下代码进行优化

var wrap=document.getElementById(“wrap”);

for(var i=0; i < 10; i++) {

var li=document.createElement(“li”);

var text=document.createTextNode(“hello” + i);

li.appendCChild(text);

wrap.appendChild(li);

}

43、请看下面的HTML,写出您的CSS使左边元素宽度为200px保持不变,右边元素随浏览器大小自适应

<div class=”outer”>

<div class=”left”></div>

<div class=”right”></div>

</div>

非技术问题

1、请概述一下你上家公司中项目的具体情况(工作所使用的技术,业务流程,周期,)?

我在上家公司做的的网站pc端页面的开发与维护。

主要技术:利用div+css布局,对用户注册页面开发,利用ajax技术与后台进行数据交互,使用Validation插件进行表单验证;使用bootstrap/zepto框架开发移动端页面,解决移动端设备的适配问题;侧边菜单栏的开发;利用css3完成轮播图动画

业务流程:根据需求分析,进行详细的总体设计,产生各栏目文件夹的结构图,根据美工的表现需要,设计静态网页和其它动态页面界面框架,程序员进行代码开发,做一些必要的测试,由项目组共同联调测试,发现bug,完善一些具体的细节。

周期:3个月

2、常用调试和优化工具?

Firebug+YSlow+其它Firefox扩展

浏览器自带工具,IE Developer Toolbar,OperaDragonfly

Fiddler

HTTP Analyzer

HttpWatch

Web Developer

Web Accessibility Toolbar

3、什么叫代码部署?如何部署?

代码部署就是把开发好的网站代码放到应用服务器上对外提供服务、部署方式根据编程语言的不同而不同,但是大体的流程是一致的,生产环境主要是通过命令加配置文件的形式进行部署

4、新技术通过哪些渠道了解和学习?

优秀的博客,githup,http://www.daqianduan.com

5、对于前端这个岗位,兴趣的比例占多少?

70%

6、前端到底工作内容是什么?和UI有什么区别?

Web前端:主要讲UI提供的设计图,编码成静态html,实现所有特效;并负责所有交互的对接,对js要求较高

UI:主要对移动端和网页的设计

7、你当时进公司时是以什么身份进的,实习生吗?

是软件工程师,进公司之后直接上岗开发

8、工作中如果出现空档期的时候,你们都在做些什么?

答:空档期的话大家就都学习,学一些新的技术,也可以跟着js大神学习嘛,不过空档期的情况也很少,一般就几天。

9、平常在公司有做网页制作吗

答:如果实在忙的时候,我也帮制作师制作一些网页。

10、忙的时候,会帮网页制作做到什么程度,百分之多少?

答:一般忙的时候,我会先完成我自己的工作,像一些JS的特效和交互之后,再去帮网页制作,大概是10%。

11、你在你做过的哪个项目调试中,遇到了哪些比较深刻的部分,说一说。

你发现到解决这个问题用了多久?

答:通过你描述的问题难度,和你发现到解决问题的时间,看你js程度。

12、身为一位web前端工程师,你肯定知道现在最流行的前端技术有哪些吧?请例举3例?

浏览器兼容性,hack技术,Node.js

13、现有2个空水壶,容积分别为5升和6升,如何利用这两水壶取出3升水,假设水无限?

假设有A,B两只壶,A壶的容积为5升,B壶的容积为6升,

第一步:将B壶装满水,倒入A壶中,此时A壶满,B壶还剩一升

第二步:将A壶水到掉,将B壶水倒入,此时A壶为一升,B壶空

第三步:将B壶装满,倒入A壶中,此时A壶满,B壶还剩两升

第四步:重复第二步的操作,此时A壶剩两升,B壶空

第五步:重复第三步的操作,此时A壶满,B壶还剩三升

14、小明有100元去买汽水,汽水三元一瓶,正好小店有个促销活动,就是一个空瓶可以换1元钱,假设小明足够能喝,问他最多可以喝多少瓶汽水,还剩多少钱或空瓶?

49瓶汽水,还剩1元

---------------------

作者:约德尔蒙

来源:CSDN

原文:https://blog.csdn.net/gyq04551/article/details/55254359

版权声明:本文为博主原创文章,转载请附上博文链接!

TML:

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

最主要的不同:

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素:div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容,border ,margin,padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 :同时加载

前者无兼容性,后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式,后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成,分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 !Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

11.标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

13.解释css sprites,如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括:

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式,各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)

18、常用那几种浏览器测试?有哪些内核(Layout Engine)?

浏览器:IE,Chrome,FireFox,Safari,Opera。

内核:Trident,Gecko,Presto,Webkit。

19、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。

兼容性:display:inline-block;*display:inline;*zoom:1;

20、 清除浮动有哪些方式?比较好的方式是哪一种?

(1)父级div定义height。

(2)结尾处加空div标签clear:both。

(3)父级div定义伪类:after和zoom。

(4)父级div定义overflow:hidden。

(5)父级div定义overflow:auto。

(6)父级div也浮动,需要定义宽度。

(7)父级div定义display:table。

(8)结尾处加br标签clear:both。

比较好的是第3种方式,好多网站都这么用。

21、box-sizing常用的属性有哪些?分别有什么作用?

box-sizing: content-box|border-box|inherit;

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

22、Doctype作用?标准模式与兼容模式各有什么区别?

告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

23、HTML5 为什么只需要写 ?

HTML5不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

24、 页面导入样式时,使用link和@import有什么区别?

(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;

(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。

25、介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

26、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

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

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素,比如 article、footer、header、nav、section;

(6)表单控件,calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

IE8/IE7/IE6支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,

浏览器支持新标签后,还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim,

JavaScript:

1.解释jsonp的原理,以及为什么不是真正的ajax?

动态创建script标签,回调函数

Ajax是页面无刷新请求数据操作

2. apply和call的用法和区别:

用法:

都能继承另一个对象的方法和属性,区别在于参数列表不一样

区别:

Function.apply(obj, args) args是一个数组,作为参数传给Function

Function.call(obj, arg1, arg2,...) arg*是参数列表

apply一个妙用: 可以将一个数组默认的转化为一个参数列表

举例说明: 有一个数组arr要push进一个新的数组中去, 如果用call的话需要把数组中的元素一个个取出来再push, 而用apply只有Array.prototype.push.apply(this, arr)

3. bind函数的兼容性

用法:

bind()函数会创建一个新函数, 为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

4. 解释下事件代理

事件委托利用了事件冒泡, 只指定一个事件处理程序, 就可以管理某一类型的所有事件.

例: html部分: 要点击li弹出其id

html 代码效果预览


  • Li 2
  • Li 3
  • Li 4
  • Li 5
  • Li 6
  • Li 7

javascript 代码效果预览

//js部分

document.getElementById("list").addHandler("click", function(e){

var e=e || window.event;

var target=e.target || e.srcElement;

if(target.nodeName.toUpperCase=="LI"){

console.log("List item", e,target.id, "was clicked!");

}

});

5. 解释下js中this是怎么工作的?

this 在 JavaScript 中主要由以下五种使用场景。

作为函数调用,this 绑定全局对象,浏览器环境全局对象为 window 。

内部函数内部函数的 this 也绑定全局对象,应该绑定到其外层函数对应的对象上,这是 JavaScript的缺陷,用that替换。

作为构造函数使用,this 绑定到新创建的对象。

作为对象方法使用,this 绑定到该对象。

使用apply或call调用 this 将会被显式设置为函数调用的第一个参数。

6. 继承

参考:js怎么实现继承?

7. AMD vs. CommonJS?

AMD是依赖提前加载

CMD是依赖延时加载

8. 什么是哈希表?

哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫做散列函数,存放记录的数组叫做散列表。

使用哈希查找有两个步骤:

使用哈希函数将被查找的键转换为数组的索引。在理想的情况下,不同的键会被转换为不同的索引值,但是在有些情况下我们需要处理多个键被哈希到同一个索引值的情况。

所以哈希查找的第二个步骤就是处理冲突。处理哈希碰撞冲突。有很多处理哈希碰撞冲突的方法,比如拉链法和线性探测法。

元素特征转变为数组下标的方法就是散列法。散列法当然不止一种,下面列出三种比较常用的:

1,除法散列法

最直观的一种,上图使用的就是这种散列法,公式: index=value % 16

学过汇编的都知道,求模数其实是通过一个除法运算得到的,所以叫“除法散列法”。

2,平方散列法

求index是非常频繁的操作,而乘法的运算要比除法来得省时(对现在的CPU来说,估计我们感觉不出来),所以我们考虑把除法换成乘法和一个位移操作。公式: index=(value * value) >> 28 (右移,除以2^28。记法:左移变大,是乘。右移变小,是除。)

如果数值分配比较均匀的话这种方法能得到不错的结果,但我上面画的那个图的各个元素的值算出来的index都是0——非常失败。也许你还有个问题,value如果很大,value * value不会溢出吗?答案是会的,但我们这个乘法不关心溢出,因为我们根本不是为了获取相乘结果,而是为了获取index。

3,斐波那契(Fibonacci)散列法

解决冲突的方法:

1. 拉链法

将大小为M 的数组的每一个元素指向一个条链表,链表中的每一个节点都存储散列值为该索引的键值对,这就是拉链法.

对采用拉链法的哈希实现的查找分为两步,首先是根据散列值找到等一应的链表,然后沿着链表顺序找到相应的键。

2. 线性探测法:

使用数组中的空位解决碰撞冲突

参考:浅谈算法和数据结构: 十一 哈希表 哈希表的工作原理

9. 什么是闭包? 闭包有什么作用?

闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.

作用:

匿名自执行函数 (function (){ ... })(); 创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。

缓存, 可保留函数内部的值

实现封装

实现模板

参考: js闭包的用途

10. 伪数组:

什么是伪数组:

伪数组是能通过Array.prototype.slice 转换为真正的数组的带有length属性的对象

比如arguments对象,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组

我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象: 返回新数组而不会修改原数组

参考:伪数组

11. undefined和null的区别, 还有undeclared:

null表示没有对象, 即此处不该有此值. 典型用法:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

( 3 ) null可以作为空指针. 只要意在保存对象的值还没有真正保存对象,就应该明确地让该对象保存null值.

undefined表示缺少值, 即此处应该有值, 但还未定义.

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

undeclared即为被污染的命名, 访问没有被声明的变量, 则会抛出异常, 终止执行. 即undeclared是一种语法错误

参考: undefined与null的区别

12. 事件冒泡机制:

从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。

13. 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):function foo(){ }();?

而函数定义(语句以function关键字开始)是不能被立即执行的,这无疑会导致语法的错误(SyntaxError)。当函数定义代码段包裹在括号内,使解析器可以将之识别为函数表达式,然后调用。IIFE: (function foo(){})()

区分 (function(){})(); 和 (function(){}()); 其实两者实现效果一样。

函数字面量:首先声明一个函数对象,然后执行它。(function () { alert(1); })();

优先表达式:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数。(function () { alert(2); }());

14. "attribute" 和 "property" 的区别是什么?

DOM元素的attribute和property两者是不同的东西。attribute翻译为“特性”,property翻译为“属性”。

attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,不继承于Array.prototype,不能直接调用Array的方法。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

hello

property就是一个属性,如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property和普通的对象类似。

很多attribute节点还有一个相对应的property属性,比如上面的div元素的id和class既是attribute,也有对应的property,不管使用哪种方法都可以访问和修改。

总之,attribute节点都是在HTML代码中可见的,而property只是一个普通的名值对属性。

15. 请指出 document load 和 document ready 两个事件的区别。

document.ready和onload的区别——JavaScript文档加载完成事件。页面加载完成有两种事件:

一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

jQuery中$(function(){});他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。

16. 什么是use strict? 其好处坏处分别是什么?

在所有的函数 (或者所有最外层函数) 的开始处加入 "use strict"; 指令启动严格模式。

"严格模式"有两种调用方法

1)将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。如果这行语句不在第一行,则无效,整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件,这一点需要特别注意。

2)将整个脚本文件放在一个立即执行的匿名函数之中。

好处

- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

- 消除代码运行的一些不安全之处,保证代码运行的安全;

- 提高编译器效率,增加运行速度;

- 为未来新版本的Javascript做好铺垫。

坏处

同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行

17. 浏览器端的js包括哪几个部分?

核心( ECMAScript) , 文档对象模型(DOM), 浏览器对象模型(BOM)

18. DOM包括哪些对象?

DOM是针对HTML和XML文档的一个API(应用程序编程接口). DOM描绘了一个层次化的节点树, 允许开发人员添加, 移除和修改页面的某一部分.

常用的DOM方法:

getElementById(id)

getElementsByTagName()

appendChild(node)

removeChild(node)

replaceChild()

insertChild()

createElement()

createTextNode()

getAttribute()

setAttribute()

常用的DOM属性

innerHTML 节点(元素)的文本值

parentNode 节点(元素)的父节点

childNodes

attributes 节点(元素)的属性节点

参考: HTML DOM 方法

19. js有哪些基本类型?

Undefined, Null, Boolean, Number, String

Object是复杂数据类型, 其本质是由一组无序的名值对组成的.

20. 基本类型与引用类型有什么区别?

基本类型如上题所示. 引用类型则有: Object, Array, Date, RegExp, Function

存储

基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中

引用类型的值是对象, 保存在堆内存中. 包含引用类型的变量实际上包含的并不是对象本身, 而是一个指向改对象的指针

复制

从一个变量向另一个变量复制基本类型的值, 会创建这个值的一个副本

从一个变量向另一个变量复制引用类型的值, 复制的其实是指针, 因此两个变量最终都指向同一个对象

检测类型

确定一个值是哪种基本类型可以用typeof操作符,

而确定一个值是哪种引用类型可以使用instanceof操作符

21. 关于js的垃圾收集例程

js是一门具有自动垃圾回收机制的编程语言,开发人员不必关心内存分配和回收问题

离开作用域的值将被自动标记为可以回收, 因此将在垃圾收集期间被删除

"标记清除"是目前主流的垃圾收集算法, 这种算法的思路是给当前不使用的值加上标记, 然后再回收其内存

另一种垃圾收集算法是"引用计数", 这种算法的思想是跟踪记录所有值被引用的次数. js引擎目前都不再使用这种算法, 但在IE中访问非原生JS对象(如DOM元素)时, 这种算法仍然可能会导致问题

当代码中存在循环引用现象时, "引用计数" 算法就会导致问题

解除变量的引用不仅有助于消除循环引用现象, 而且对垃圾收集也有好处. 为了确保有效地回收内存, 应该及时解除不再使用的全局对象, 全局对象属性以及循环引用变量的引用

22. ES5中, 除了函数,什么能够产生作用域?

try-catch 和with延长作用域. 因为他们都会创建一个新的变量对象.

这两个语句都会在作用域链的前端添加一个变量对象. 对with语句来说, 会将指定的对象添加到作用域链中. 对catch语句来说, 会创建一个新的变量对象, 其中包含的是被抛出的错误对象的声明.

当try代码块中发生错误时,执行过程会跳转到catch语句,然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部,函数的所有局部变量将会被放在第二个作用域链对象中。请注意,一旦catch语句执行完毕,作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用,因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理

with(object) {statement}。它的意思是把object添加到作用域链的顶端

23. js有几种函数调用方式?

方法调用模型 var obj={ func : function(){};} obj.func()

函数调用模式 var func=function(){} func();

构造器调用模式

apply/ call调用模式

24. 描述事件模型?IE的事件模型是怎样的?事件代理是什么?事件代理中怎么定位实际事件产生的目标?

捕获->处于目标->冒泡,IE应该是只有冒泡没有捕获。

事件代理就是在父元素上绑定事件来处理,通过event对象的target来定位。

25. js动画有哪些实现方法?

用定时器 setTimeout和setInterval

26. 还有什么实现动画的方法?

js动画:使用定时器 setTimeout和setInterval

CSS : transition , animation

transition 包含4种属性:transition-delaytransition-durationtransition-propertytransition-timing-function,对应动画的4种属性: 延迟、持续时间、对应css属性和缓动函数,

transform 包含7种属性:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state,它们可以定义动画名称,持续时间,缓动函数,动画延迟,动画方向,重复次数,填充模式。

HTML5 动画

canvas

svg

webgl

参考:前端动画效果实现的简单比较

27. 面向对象有哪几个特点?

封装, 继承, 多态

28. 如何判断属性来自自身对象还是原型链?

hasOwnPrototype

29. ES6新特性

1) 箭头操作符 inputs=>outputs: 操作符左边是输入的参数,而右边则是进行的操作以及返回的值

2) 支持类, 引入了class关键字. ES6提供的类实际上就是JS原型模式的包装

3) 增强的对象字面量.

1. 可以在对象字面量中定义原型 __proto__: xxx //设置其原型为xxx,相当于继承xxx

2. 定义方法可以不用function关键字

3. 直接调用父类方法

4) 字符串模板: ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

5) 自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。

6) 默认参数值: 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

7) 不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,…x代表了所有传入add函数的参数。

8) 拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

9) let和const关键字: 可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。

10) for of值遍历 每次循环它提供的不是序号而是值。

11) iterator, generator

12) 模块

13) Map, Set, WeakMap, WeakSet

14) Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。

15) Symbols Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性,外部无法直接访问由symbol做为键的属性值。

16) Math, Number, String, Object的新API

17) Promises是处理异步操作的一种模式

参考:ES6新特性概览

30. 如何获取某个DOM节点

获取节点: getElementById() getElementsByTagName()

31. 用LESS如何给某些属性加浏览器前缀?

可以自定义一个函数

.border-radius(@values) {

-webkit-border-radius: @values;

-moz-border-radius: @values;

border-radius: @values;

}

div {

.border-radius(10px);

}

32.eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;

应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

33. 图片预加载的实现

使用jQuery图片预加载插件Lazy Load

1.加载jQuery, 与jquery.lazyload.js

2.设置图片的占位符为data-original, 给图片一个特别的标签,比如class=".lazy"

3.然后延迟加载: $('img.lazy').lazyload();这个函数可以选择一些参数:

3.1.图片预先加载距离:threshold,通过设置这个值,在图片未出现在可视区域的顶部距离这个值时加载。

3.2.事件绑定加载的方式:event

3.3.图片限定在某个容器内:container

使用js实现图片加载: 就是new一个图片对象, 绑定onload函数, 赋值url

用CSS实现图片的预加载

写一个CSS样式设置一批背景图片,然后将其隐藏

改进: 使用js来推迟预加载时间, 防止与页面其他内容一起加载

用Ajax实现预加载

其实就是通过ajax请求请求图片地址. 还可以用这种方式加载css,js文件等

34. 如果在同一个元素上绑定了两个click事件, 一个在捕获阶段执行, 一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?

我在回答这个题的时候说是两个事件, 先执行捕获的后执行冒泡的. 其实是不对的.

绑定在目标元素上的事件是按照绑定的顺序执行的!!!!

即: 绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

参考: JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序

35. js中怎么实现块级作用域?

使用匿名函数, (立即执行函数)

(function(){...})()

使用es6

块级作用域引入了两种新的声明形式,可以用它们定义一个只存在于某个语句块中的变量或常量.这两种新的声明关键字为:

let: 语法上非常类似于var, 但定义的变量只存在于当前的语句块中

const: 和let类似,但声明的是一个只读的常量

使用let代替var可以更容易的定义一个只在某个语句块中存在的局部变量,而不用担心它和函数体中其他部分的同名变量有冲突.在let语句内部用var声明的变量和在let语句外部用var声明的变量没什么差别,它们都拥有函数作用域,而不是块级作用域.

36. 构造函数里定义function和使用prototype.func的区别?

1. 直接调用function,每一个类的实例都会拷贝这个函数,弊端就是浪费内存(如上)。prototype方式定义的方式,函数不会拷贝到每一个实例中,所有的实例共享prototype中的定义,节省了内存。

2. 但是如果prototype的属性是对象的话,所有实例也会共享一个对象(这里问的是函数应该不会出现这个情况),如果其中一个实例改变了对象的值,则所有实例的值都会被改变。同理的话,如果使用prototype调用的函数,一旦改变,所有实例的方法都会改变。——不可以对实例使用prototype属性,只能对类和函数用。

37. js实现对象的深克隆

因为js中数据类型分为基本数据类型(number, string, boolean, null, undefined)和引用类型值(对象, 数组, 函数). 这两类对象在复制克隆的时候是有很大区别的. 原始类型存储的是对象的实际数据, 而对象类型存储的是对象的引用地址(对象的实际内容单独存放, 为了减少数据开销通常放在内存中). 此外, 对象的原型也是引用对象, 它把原型的属性和方法放在内存中, 通过原型链的方式来指向这个内存地址.

于是克隆也会分为两类:

浅度克隆:原始类型为值传递, 对象类型仍为引用传递

深度克隆:所有元素或属性均完全复制, 与原对象完全脱离, 也就是说所有对于新对象的修改都不会反映到原对象中

西安尚学堂 http://www.xasxt.com/

?

Java零基础就业班 最新开班日期:9月24日

上课地址:陕西省西安市高新区科技二路西安软件园天泽大厦五楼

咨询电话:029-62258374 QQ 2145598324

?

?

招生对象:

1. 零计算机编程基础学

2. 对行业不满意人士

3. 跨专业编程爱好者

4. 在校大学生实训

?

Java零基础班,10年 Java 以上开发经验技术讲师、架构师、行业大牛,亲自纯面授课程,手把手教你写编程。

?

9月新班免费试听课程已就绪,7天免费听课,体验Java乐趣。



SS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记,分享这份总结给大家,对大家对 CSS 的可以来一次全方位的检漏和排查,感谢原作者 CavsZhouyou 的付出,原文链接放在文章最下方,如果出现错误,希望大家共同指出!

前面CSS写法104个知识从01-52点已经讲过了,在本篇文章我就不再重复了。具体如下:

《关于前端CSS写法104个知识点汇总(一)》

接下来开始进入正题:

53.position:fixed;在 android 下无效怎么处理?

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时,因为layoutviewport的宽度大于移动端屏幕
的宽度,所以页面会出现滚动条左右移动,fixed的元素是相对layoutviewport来固定位置的,而不是移动端屏幕来固定位置的
,所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果,我们需要改变的是viewport的大小为idealviewport,可以如下设置:

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms=16.7ms

55.如何让去除 inline-block 元素间间距?

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考:《去除 inline-block 元素间间距的 N 种方法》

56.overflow:scroll 时不能平滑滚动的问题怎么处理?

以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性,所以滑动很流
畅。

详细资料可以参考:《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》

57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。

(1)外层div使用position:relative;高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

(2)使用flex布局,设置主轴为竖轴,第二个div的flex-grow为1。

详细资料可以参考:《有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度(三种方案)》

58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?

相关知识点:

(1)BMP,是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常
具有较大的文件大小。

(2)GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,GIF格式还具
有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。

(3)JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来
存储照片,与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,
又会导致图片文件较GIF更大。

(4)PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的
情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8
还支持透明度的调节,而GIF并不支持。现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。

(5)PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格
式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

(6)SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图
片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企
业Logo、Icon等。

(7)WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,
如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。

?在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;
?在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小25%~34%;
?WebP图片格式支持图片透明度,一个无损压缩的WebP图片,如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式,兼容性不太好。

回答:

我了解到的一共有七种常见的图片的格式。

(1)第一种是BMP格式,它是无损压缩的,支持索引色和直接色的点阵图。由于它基本上没有进行压缩,因此它的文件体积一般比
较大。

(2)第二种是GIF格式,它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法,因此文件的体积很小。并且GIF还
支持动画和透明度。但因为它使用的是索引色,所以它适用于一些对颜色要求不高且需要文件体积小的场景。

(3)第三种是JPEG格式,它是有损压缩的使用直接色的点阵图。由于使用了直接色,色彩较为丰富,一般适用于来存储照片。但
由于使用的是直接色,可能文件的体积相对于GIF格式来说更大。

(4)第四种是PNG-8格式,它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式,它也支持透明度的调整,并
且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况,我们都可以使用PNG-8格式代替GIF格式。

(5)第五种是PNG-24格式,它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法,所以它的体积比BMP
格式的文件要小得多,但是相对于其他的几种格式,还是要大一些。

(6)第六种格式是svg格式,它是矢量图,它记录的图片的绘制方式,因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般
适合于用来制作一些网站logo或者图标之类的图片。

(7)第七种格式是webp格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是,在相
同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减小,
这样会提高用户的体验。这是谷歌开发的一种新的图片格式,目前在兼容性上还不是太好。

详细资料可以参考:《图片格式那么多,哪种更适合你?》

59.浏览器如何判断是否支持 webp 格式图片

(1)宽高判断法。通过创建image对象,将其src属性设置为webp格式的图片,然后在onload事件中获取图片的宽高,如
果能够获取,则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数,那么就说明浏览器不支持webp格
式的图片。

(2)canvas判断方法。我们可以动态的创建一个canvas对象,通过canvas的toDataURL将设置为webp格式,然后判断
返回值中是否含有image/webp字段,如果包含则说明支持WebP,反之则不支持。

详细资料可以参考:《判断浏览器是否支持 WebP 图片》《toDataURL()》

60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)

网站向服务器请求的时候,会自动带上cookie这样增加表头信息量,使请求变慢。

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,所以不如隔离开
,静态资源放CDN。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请
求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer,也减少了WebServer对cookie的处理分析环节,提高了webserver的
http请求的解析速度。

详细资料可以参考:《CDN 是什么?使用 CDN 有什么优势?》

61.style 标签写在 body 后与 body 前有什么区别?

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式
表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可
能会出现FOUC现象(即样式失效导致的页面闪烁问题)

62.什么是 CSS 预处理器/后处理器?

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成
文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然
后再编译成正常的CSS文件。

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或lesscsssprite,增强了css代码的复用性,还有层级、mixin、
变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

CSS后处理器是对CSS进行处理,并最终生成CSS的预处理器,它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了,最典型的例子是CSS压缩工具(如clean-css),只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer,
以CanIUse上的浏览器支持数据为基础,自动处理兼容性问题。

后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏
览器私有前缀,实现跨浏览器兼容性的问题。

详细资料可以参考:《CSS 预处理器和后处理器》

63.阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的background-image,background-repeat,background
-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求,从而很好的提高页面的性能;CSSSprites
能减少图片的字节。

优点:

减少HTTP请求数,极大地提高页面加载速度
增加图片信息重复度,提高压缩比,减少图片大小
更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

缺点:

图片合并麻烦
维护麻烦,修改一个图片可能需要重新布局整个图片,样式

64.使用 rem 布局的优缺点?

优点:
在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了,兼容性也非常的好。

缺点:
(1)在奇葩的dpr设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。
(2)使用iframe引用也会出现问题。
(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问
题。

详细资料可以参考:《css3 的字体大小单位 rem 到底好在哪?》《VW:是时候放弃 REM 布局了》《为什么设计稿是 750px》《使用 Flexible 实现手淘 H5 页面的终端适配》

65.几种常见的 CSS 布局

详细的资料可以参考:《几种常见的 CSS 布局》

66.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考:《怎么画一条 0.5px 的边(更新)》

67.transition 和 animation 的区别

transition关注的是CSSproperty的变化,property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性,可以使用关键帧的概念,应该说可以实现更自由的动画效果。

详细资料可以参考:《CSSanimation 与 CSStransition 有何区别?》《CSS3Transition 和 Animation 区别及比较》《CSS 动画简介》《CSS 动画:animation、transition、transform、translate》

68.什么是首选最小宽度?

“首选最小宽度”,指的是元素最适合的最小宽度。

东亚文字(如中文)最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短
横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样,每一个字符都用最小宽度单元,可以试试使用CSS中的word-break:break-all。

69.为什么 height:100%会无效?

对于普通文档流中的元素,百分比高度值要想起作用,其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto,因为解释成了auto,
所以无法参与计算。

使用绝对定位的元素会有计算值,即使祖先元素的height计算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?

(1)max-width会覆盖width,即使width是行类样式或者设置了!important。

(2)min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

(1)内容区域(contentarea)。内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子
(characterbox);但是有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因此,对于这些
元素,内容区域可以看成元素自身。

(2)内联盒子(inlinebox)。“内联盒子”不会让内容成块显示,而是排成一行,这里的“内联盒子”实际指的就是元素的“外在盒
子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

(3)行框盒子(linebox),每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包含块(containingbox),由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点?

“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵
一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。

73.什么是替换元素?

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此,<img>、<object>、<video>、<iframe>或者表
单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性以外,还有以下一些特性。

(1)内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要
类似appearance属性,或者浏览器自身暴露的一些样式接口,

(2)有自己的尺寸。在Web中,很多替换元素在没有明确尺寸设定的情况下,其默认的尺寸(不包括边框)是300像素×150像
素,如<video>、<iframe>或者<canvas>等,也有少部分替换元素为0像素,如<img>图片,而表单元素的替换元素
的尺寸则和浏览器有关,没有明显的规律。

(3)在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性,对于替换元素和非替换元素,ve
rtical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline,很简单的属性值,基线之意,
被定义为字符x的下边缘,而替换元素的基线却被硬生生定义成了元素的下边缘。

(4)所有的替换元素都是内联水平元素,也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是,替换元素默认
的display值却是不一样的,有的是inline,有的是inline-block。

74.替换元素的计算规则?

替换元素的尺寸从内而外分为3类:固有尺寸、HTML尺寸和CSS尺寸。

(1)固有尺寸指的是替换内容原本的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着自己的宽度和高度的。

(2)HTML尺寸只能通过HTML原生属性改变,这些HTML原生属性包括<img>的width和height属性、<input>的s
ize属性、<textarea>的cols和rows属性等。

(3)CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸,对应盒尺寸中的contentbox。

这3层结构的计算规则具体如下

(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。

(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。

(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。

(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。

(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。

(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

75.content 与替换元素的关系?

content属性生成的对象称为“匿名替换元素”。

(1)我们使用content生成的文本是无法选中、无法复制的,好像设置了userselect:none声明一般,但是普通元素的文本
却可以被轻松选中。同时,content生成的文本无法被屏幕阅读设备读取,也无法被搜索引擎抓取,因此,千万不要自以为是
地把重要的文本信息使用content属性生成,因为这对可访问性和SEO都很不友好。

(2)content生成的内容不能左右:empty伪类。

(3)content动态生成值无法获取。

76.margin:auto 的填充规则?

margin的'auto'可不是摆设,是具有强烈的计算意味的关键字,用来计算元素对应方向应该获得的剩余间距大小。但是触发mar
gin:auto计算有一个前提条件,就是width或height为auto时,元素是具有对应方向的自动填充特性的。

(1)如果一侧定值,一侧auto,则auto为剩余空间大小。
(2)如果两侧均是auto,则平分剩余空间。

77.margin 无效的情形

(1)display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素,垂直margin有效,并且没有ma
rgin合并的问题。

(2)表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

(3)绝对定位元素非定位方位的margin值“无效”。

(4)定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性?

(1)border-width却不支持百分比。

(2)border-style的默认值是none,有一部分人可能会误以为是solid。这也是单纯设置border-width或border-col
or没有边框显示的原因。

(3)border-style:double的表现规则:双线宽度永远相等,中间间隔±1。

(4)border-color默认颜色就是color色值。

(5)默认background背景图片是相对于paddingbox定位的。

79.什么是基线和 x-height?

字母x的下边缘(线)就是我们的基线。

x-height指的就是小写字母x的高度,术语描述就是基线和等分线(meanline)(也称作中线,midline)之间的距离。在C
SS世界中,middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

ex是CSS中的一个相对单位,指的是小写字母x的高度,没错,就是指x-height。ex的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的,而基线就是x的底部,而1ex就是一个x的高度。

80.line-height 的特殊性?

(1)对于非替换元素的纯内联元素,其可视高度完全由line-height决定。对于文本这样的纯内联元素,line-height就是高
度计算的基石,用专业说法就是指定了用来计算行框盒子高度的基础高度。

(2)内联元素的高度由固定高度和不固定高度组成,这个不固定的部分就是这里的“行距”。换句话说,line-height之所以起作
用,就是通过改变“行距”来实现的。在CSS中,“行距”分散在当前文字的上方和下方,也就是即使是第一行文字,其上方也是
有“行距”的,只不过这个“行距”的高度仅仅是完整“行距”高度的一半,因此,也被称为“半行距”。

(3)行距=line-height-font-size。

(4)border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距,则向下取整;如果是文字下
边距,则向上取整。

(5)对于纯文本元素,line-height直接决定了最终的高度。但是,如果同时有替换元素,则line-height只能决定最小高度。

(6)对于块级元素,line-height对其本身是没有任何作用的,我们平时改变line-height,块级元素的高度跟着变化实际上是
通过改变块级元素里面内联级别元素占据的高度实现的。

(7)line-height的默认值是normal,还支持数值、百分比值以及长度值。为数值类型时,其最终的计算值是和当前font-si
ze相乘后的值。为百分比值时,其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

(8)如果使用数值作为line-height的属性值,那么所有的子元素继承的都是这个值;但是,如果使用百分比值或者长度值作为
属性值,那么所有的子元素继承的是最终的计算值。

(9)无论内联元素line-height如何设置,最终父级元素的高度都是由数值大的那个line-height决定的。

(10)只要有“内联盒子”在,就一定会有“行框盒子”,就是每一行内联元素外面包裹的一层看不见的盒子。然后,重点来了,在每个
“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

81.vertical-align 的特殊性?

(1)vertical-align的默认值是baseline,即基线对齐,而基线的定义是字母x的下边缘。因此,内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素,往往使用元素本身的下边缘作为基线。:一个inline-block元素,如果里面
没有内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘;否则其基线就是元素里面最后一行
内联元素的基线。

(2)vertical-align:top就是垂直上边缘对齐,如果是内联元素,则和这一行位置最高的内联元素的顶部对齐;如果display
计算值是table-cell的元素,我们不妨脑补成<td>元素,则和<tr>元素上边缘对齐。

(3)vertical-align:middle是中间对齐,对于内联元素,元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素,单元格填充盒子相对于外面的表格行居中对齐。

(4)vertical-align支持数值属性,根据数值的不同,相对于基线往上或往下偏移,如果是负值,往下偏移,如果是正值,往上
偏移。

(5)vertical-align属性的百分比值则是相对于line-height的计算值计算的。

(6)vertical-align起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display值为table-cell的元
素。

(7)table-cell元素设置vertical-align垂直对齐的是子元素,但是其作用的并不是子元素,而是table-cell元素自身。

82.overflow 的特殊性?

(1)一个设置了overflow:hidden声明的元素,假设同时存在border属性和padding属性,则当子元素内容超出容器宽度
高度限制的时候,剪裁的边界是borderbox的内边缘,而非paddingbox的内边缘。

(2)HTML中有两个标签是默认可以产生滚动条的,一个是根元素<html>,另一个是文本域<textarea>。

(3)滚动条会占用容器的可用宽度或高度。

(4)元素设置了overflow:hidden声明,里面内容高度溢出的时候,滚动依然存在,仅仅滚动条不存在!

83.无依赖绝对定位是什么?

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84.absolute 与 overflow 的关系?

(1)如果overflow不是定位元素,同时绝对定位元素和overflow容器之间也没有定位元素,则overflow无法对absolute
元素进行剪裁。

(2)如果overflow的属性值不是hidden而是auto或者scroll,即使绝对定位元素高宽比overflow元素高宽还要大,也
都不会出现滚动条。

(3)overflow元素自身transform的时候,Chrome和Opera浏览器下的overflow剪裁是无效的。

85.clip 裁剪是什么?

所谓“可访问性隐藏”,指的是虽然内容肉眼看不见,但是其他辅助设备却能够进行识别和访问的隐藏。

clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是,它具有更强的普遍适应性,任何元素、任何场景都可以无障碍使用。

86.relative 的特殊性?

(1)相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的,而不是自身。注意,虽然定位位移是相对自身,但是百分比值的计算值不是。

(2)top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的,都是相对高度计算的。同时,如果包含块的高度是auto,那么计算值是0,偏移无效,也就是说,如果父元素没有设定高度或者不是“格式化高度”,那么relative类似top:20%的代码等同于top:0。

(3)当相对定位元素同时应用对立方向定位值的时候,也就是top/bottom和left/right同时使用的时候,只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的,默认的文档流是自上而下、从左往右,因此top/bottom同时使用的时候,bottom失效;left/right同时使用的时候,right失效。

87.什么是层叠上下文?

层叠上下文,英文称作stackingcontext,是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元
素在z轴上就“高人一等”。

层叠上下文元素有如下特性:

(1)层叠上下文的层叠水平要比普通元素高(原因后面会说明)。
(2)层叠上下文可以阻断元素的混合模式。
(3)层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
(4)每个层叠上下文和兄弟元素独立,也就是说,当进行层叠变化或渲染的时候,只需要考虑后代元素。
(5)每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。


层叠上下文的创建:

(1)页面根元素天生具有层叠上下文,称为根层叠上下文。根层叠上下文指的是页面根元素,可以看成是<html>元素。因此,页面中所有的元素一定处于至少一个“层叠结界”中。

(2)对于position值为relative/absolute以及Firefox/IE浏览器(不包括Chrome浏览器)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。Chrome等WebKit内核浏览器下,position:fixed元素天然层叠上下文元素,无须z-index为数值。根据我的测试,目前IE和Firefox仍是老套路。

(3)其他一些CSS3属性,比如元素的opacity值不是1。

88.什么是层叠水平?

层叠水平,英文称作stackinglevel,决定了同一个层叠上下文中元素在z轴上的显示顺序。

显而易见,所有的元素都有层叠水平,包括层叠上下文元素,也包括普通元素。然而,对普通元素的层叠水平探讨只局限在当前层叠上
下文元素中。

89.元素的层叠顺序?

层叠顺序,英文称作 stackingorder,表示元素发生层叠时有着特定的垂直显示顺序。

90.层叠准则?

(1)谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。

(2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

91.font-weight 的特殊性?

如果使用数值作为font-weight属性值,必须是100~900的整百数。因为这里的数值仅仅是外表长得像数值,实际上是一个具有特定含义的关键字,并且这里的数值关键字和字母关键字之间是有对应关系的。

92.text-indent 的特殊性?

(1)text-indent仅对第一行内联盒子内容有效。

(2)非替换元素以外的display计算值为inline的内联元素设置text-indent值无效,如果计算值inline-block/inli
ne-table则会生效。

(3)<input>标签按钮text-indent值无效。

(4)<button>标签按钮text-indent值有效。

(5)text-indent的百分比值是相对于当前元素的“包含块”计算的,而不是当前元素。

93.letter-spacing 与字符间距?

letter-spacing可以用来控制字符之间的间距,这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

(1)继承性。
(2)默认值是normal而不是0。虽然说正常情况下,normal的计算值就是0,但两者还是有差别的,在有些场景下,letter-spacing会调整normal的计算值以实现更好的版面布局。
(3)支持负值,且值足够大的时候,会让字符形成重叠,甚至反向排列。
(4)和text-indent属性一样,无论值多大或多小,第一行一定会保留至少一个字符。
(5)支持小数值,即使0.1px也是支持的。
(6)暂不支持百分比值。

94.word-spacing 与单词间距?

letter-spacing作用于所有字符,但word-spacing仅作用于空格字符。换句话说,word-spacing的作用就是增加空格的间隙
宽度。

95.white-space 与换行和空格的控制?

white-space属性声明了如何处理元素内的空白字符,这类空白字符包括Space(空格)键、Enter(回车)键、Tab(制表符)
键产生的空白。因此,white-space可以决定图文内容是否在一行显示(回车空格是否生效),是否显示大段连续空白(空格是否
生效)等。

其属性值包括下面这些。
?normal:合并空白字符和换行符。
?pre:空白字符不合并,并且内容只在有换行符的地方换行。
?nowrap:该值和normal一样会合并空白字符,但不允许文本环绕。
?pre-wrap:空白字符不合并,并且内容只在有换行符的地方换行,同时允许文本环绕。
?pre-line:合并空白字符,但只在有换行符的地方换行,允许文本环绕。

96.隐藏元素的 background-image 到底加不加载?

相关知识点:

根据测试,一个元素如果display计算值为none,在IE浏览器下(IE8~IE11,更高版本不确定)依然会发送图片请求,Fire
fox浏览器不会,至于Chrome和Safari浏览器则似乎更加智能一点:如果隐藏元素同时又设置了background-image,则图片
依然会去加载;如果是父元素的display计算值为none,则背景图不会请求,此时浏览器或许放心地认为这个背景图暂时是不会使
用的。

如果不是background-image,而是<img>元素,则设置display:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素,则background-image也不会加载。hover情况下的background-image,在触
发时加载。

回答:

-(1)元素的背景图片

-元素本身设置 display:none,会请求图片 -父级元素设置 display:none,不会请求图片 -样式没有元素使用,不会请求-:hover 样式下,触发时请求

-(2)img 标签图片任何情况下都会请求图片

详细资料可以参考:《CSS 控制前端图片 HTTP 请求的各种情况示例》

97.如何实现单行/多行文本溢出的省略(...)?

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料可以参考:《【CSS/JS】如何实现单行/多行文本溢出的省略》《CSS 多行文本溢出省略显示》

98.常见的元素隐藏方式?

-(1)使用 display:none;隐藏元素,渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。

-(2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间,但是不会响应绑定的监听事件。

-(3)使用 opacity:0;将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。

-(4)通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。

-(5)通过 z-index 负值,来使其他元素遮盖住该元素,以此来实现隐藏。

-(6)通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

-(7)通过 transform:scale(0,0)来将元素缩放为 0,以此来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

详细资料可以参考:《CSS 隐藏元素的八种方法》

99.css 实现上下固定中间自适应布局?

利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料可以参考:《css 实现上下固定中间自适应布局》

100.css 两栏布局的实现?

相关资料:

/*两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。*/
/*以左边宽度固定为200px为例*/

/*(1)利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*(2)第二种是利用flex布局,将左边元素的放大和缩小比例设置为0,基础大小设置为200px。将右边的元素的放大比例设置为1,缩小比例设置为1,基础大小设置为auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为absolute定位,并且宽度设置为
200px。将右边元素的margin-left的值设置为200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为200px,右边元素设置为绝对定位,左边定位为200px,其余方向定位为0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《两栏布局 demo 展示》

回答:

两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。

以左边宽度固定为 200px 为例

-(1)利用浮动,将左边元素宽度设置为 200px,并且设置向左浮动。将右边元素的 margin-left 设置为 200px,宽度设置为 auto(默认为 auto,撑满整个父元素)。

-(2)第二种是利用 flex 布局,将左边元素的放大和缩小比例设置为 0,基础大小设置为 200px。将右边的元素的放大比例设置为 1,缩小比例设置为 1,基础大小设置为 auto。

-(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为 absolute 定位,并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

-(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为 200px,右边元素设置为绝对定位,左边定位为 200px,其余方向定位为 0。

101.css 三栏布局的实现?

相关资料:

/*三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。*/

/*(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。*/
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*(4)双飞翼布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元
素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。*/

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三栏布局 demo 展示》

回答:

三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。

(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。

(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto。

(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。

(4)圣杯布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度,而双飞翼布局则不存在这个问题。

(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。

102.实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展示》

103.实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展示》

104.一个自适应矩形,水平垂直居中,且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

推荐

笔者再次墙裂推荐收藏这篇原文,转载于 CavsZhouyou - 前端面试复习笔记,这个仓库是原作者校招时的前端复习笔记,主要总结一些比较重要的知识点和前端面试问题,希望对大家有所帮助。

最后如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的最大动力

已完结。

上半部分CSS写法:《关于前端CSS写法104个知识点汇总(一)》

转载链接:https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md