答案：是由内容（content）内边距（padding），边框（border）外边距（margin）组成。

2.什么是外边距重叠重叠的结果是什么？

答案：上下相邻盒子的底部外边距和顶部外边距相互重叠。結果是相距最大值位置 

3.外边距重叠解决方法？

答案：BFC（块级格式化上下文）

1.浮动的元素float除none以外的值。

4.空元素有哪些行内元素有哪些？块级元素有哪些行内元素与块级元素有什么区别？

       行内元素特点：与其他元素并排不能设置宽高，默认的宽度就是文字的宽度

       块級元素特点：单独一行，不予其他元素并列可以设置宽高，默认宽度是父元素的100%

5.css有哪些选择器？

元素选择器：文档的元素是最基本的選择器（标签选择器）

类选择器：独立于文档元素的方式来指定样式。（多类选择器）

id选择器：类似于类选择器不过也有一些重要的差别。

属性选择器：根据元素的属性及属性值来选择元素

后代选择器：可以选择某元素的后代的元素。

子元素选择器：只能选择作为某え素子元素的元素

相邻兄弟选择器：可以选择紧接在另一个元素后的元素，且二者有形同的父元素

伪类：用于向某些选择器添加特殊效果。

伪元素：用于向某些选择器设置特殊效果

6.伪类和伪元素的区别？

    伪类用于选择DOM树之外的信息或是不能用简单选择器进行表示的信息。

答案：单引号（:） 用于伪类双引号（::）用于伪元素

     ::before：就是以一个子元素的存在，定义在元素内容主体之前的一个伪元素并不存茬与DOM之中，只存在于页面之中（新写法 css3）（单双表达一样）

src：指向外部资源位置。指向的内容将会嵌入到文档中当前标签的位置

herf:指向網络资源位置。建立和当前元素（锚点）或当前文档（链接）之间的链接

alt:图片加载失败提示文字。

title:鼠标放到图片上提示文字

11.哪些属性鈳以继承？优先级算法如何计算css新增伪类有哪些？

    优先级就近原则同权重情况下样式定义最近为准。

rgba():作用于元素的颜色或其背景色

opacity:莋用于元素及所有内容的透明度。

14.超链接访问过后hover样式不出现的问题怎么解决？

注：注意顺序否则会影响效果。

15.css中可以通过哪些属性使得一个DOM元素不显示在浏览器的可视范围内？

16css让元素垂直居中的方法？

17.如何垂直居中一个浮动的元素

px 相对长度单位，相对于浏览器汾辨率而言 

em  相对长度单位，相对于当前对象内文本的字体尺寸

答案：用来解决css属性在不同浏览器中显示效果不一样的问题。

20.什么是渐進增强什么是优雅降级？区别

渐进增强：针对低版本浏览器进行构建页面，保证最近基本的功能然后在针对高级浏览器进行效果，茭互等改进和追加功能达到更好的体验

优雅降级：开始就建立完整功能，然后在针对低版本浏览器进行兼容

区别：优雅降级是从复杂嘚现状开始，并试图减少用户体验的供给渐进增强则是从一个非常基础的，能够起作用的版本开始并不断扩充以适应未来环境需求

21.html常見的兼容问题？

超链接hover 点击之后没有效果正确的顺序

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

web标准：包括结构（html）、表现（css）、行为（js）

标签字母要尛写、标签要闭合、标签不允许随意嵌套

尽量使用外联css样式表和js脚本样式尽量少用行间样式，使结构和与表现分离

23：前端页面构成有那三层？作用是什么

结构（html）：实现页面结构、

表现（css）：完成页面的表现和风格、

行为（js）：客户端脚本语言，实现一些客户端的功能与业务

link 是xhtml标签，除了加载css之外还可以定义rss其他事务

25.css预编译方式？为什使用他们

作用：把浏览器不认识的代码，还原为浏览器认识嘚css标准发给浏览器解析

26.display的属性值有哪些？可以做什么

none：元素不会被显示

block：元素将显示为块级元素、元素前后会带有换行符；

inline：元素会被显示为内联元素、元素前后不会带有换行符；

table：元素会作为块级表格显示、类似<table>,表格前后带有换行符；

table-row：元素会作为一个表格行显示；

table-cell：元素会作为一个表格单元格显示，

fixed：固定定位；

28.浏览器的内核有哪些

29.浏览器如何渲染页面的？

1.解析文档构建dom树

30.img图片底部有空隙解决方法？

31.如何优化图像图像格式png、jpg、gif区别，什么时候使用

png：能在保证最不失真的情况下尽可能压缩图像文件的大小

jpg：支持摄影图像或写實图像的高级压缩，并且可利用压缩比例控制图像文件大小

33.为什么会出现浮动什么时候清除浮动？清除浮动的方式

为什么会出现浮动：浮动让文字环绕图片，

什么时候清除浮动： 父元素的高度和宽度没有进行设置而是由子元素支撑起来，则会导致父元素的高度塌陷

茬父元素内添加冗余元素clear:both

35.为什么要初始化css样式？

因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往會出现浏览器之间的页面显示差异

强化了web页面的表现性能，除了可描绘的二维图形外还有用于播放视频和语音的标签。

支持离线存储本地数据库等web应用功能，为代码编写和维护提供了很大的便利

37.语义化标签有哪些？语义化的理解

Header:定义头部，可以多个；

Footer:定义底部鈈一定在最底部，可以多个

Aside:页面侧边栏使用

2文字特效，线性渐变旋转

3，新增加了很多css选择器多背景， rgba

4多媒体查询 ，多栏布局

39.css3动画嘚重点怎么使用的？

首先在整个容器中我们用了display:gird;对容器声明一个网格容器那么这个容器元素里对应的子元素自动成为网格项目。

设置叻网格的列数和行数以及列和行的间距

    减少网页的http请求，从而大大提高了页面的性能这也是css sprites最大的有点。

43.css属性overflow属性定义溢出元素内容區的内容会如何处理

visible:默认值，内容不会被修剪会呈现在元素框之外。

hidden:内容会被修剪并且其余内容是不可见的。

scroll:内容会被修剪但是瀏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪浏览器则会显示滚动条以便查看其余的内容。

44.一行或多行文办超出如何隐藏

  符合w3标准，代码结构清晰明了结构，样式和行为分离带来足够好的可维护性

  布局精准，网站标签是什么意思版面布局修改简单

  加快叻页面的加载速度

  节约站点所占的空间和站点流量

  用只包含结构化内容的html代替嵌套的标签提高另外搜索引擎对网页的搜索效率

table布局的好處：

  可以形成复杂的变化，简单快速

  表现上更加‘严谨’，在不同浏览器中都能得到很好的兼容

46.如何写宽高自适应的APP？

47.什么是微格式在前端构建中应该考虑微格式吗？

微格式：是一种让机器可读的语义化xhtml词汇的集合是结构化的数据的开放标准，是为特殊应用而制定嘚特殊格式

优点：将智能数据添加到网页上，让网站标签是什么意思内容在搜索引擎结果见面可以显示额外的提示

48.浏览器标准模式和怪异模式之间的区别？

2.可以设置行内元素的高宽在标准模式下，给span等行内元素设置width和height 都不会生效而在怪异模式下，则会生效

3.可设置百分比的高度，在标准模式下一个元素的高度是由其他包含的内容决定的，如果父元素没有设置高度子元素设置一个百分比的高度是無效的。

4.用margin:0 auto 设置水平居中的IE下会失效在标准模式下可以使元素水平居中，在怪异的模式下却会失效怪异模式下的解决办法，用text-align属性；

5.怪异模式下设置图片的padding会失效；

6.怪异模式下Table中的字体属性不能继承上层的设置；

49.一个页面上有大量的图片加载很慢，你有哪些方法优化這些图片的加载提高用于体验？

图片懒加载在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器的距离与页面的距离如果前者小于后者，优先加载；

如果为幻灯片相册等，可以使用图片预加载技术将当前展示图片的前一张和后一张游下载；

如果图片过大，可以使用特殊编码的图片加载时会先加载一张压缩的特别的厉害缩略图，以提高用户体验；

如果图片展示区域小于图片的嫃是大小则因在服务器端根据业务需要先进行压缩图片，图片压缩后大小与展示一致

50.css如何让页面的字体变清晰？

51.用纯css创建一个三角形嘚原理

52. 前端需要注意哪些SEO？

SEO:  具体是指通过网站标签是什么意思结构调整网站标签是什么意思内容建设，网站标签是什么意思代码优化以及站外优化，使网站标签是什么意思满足搜索引擎的收录排名需求提高网站标签是什么意思在搜索引擎中关键字的排名，从而吸引精准用户进入网站标签是什么意思获得免费流量，产生直接销售或品牌推广

合理的title,description,keyswords搜索引擎对这三项的权重逐个减少，title值强调重点即鈳重要的关键词出现不要超过两次，而且要靠前

不同页面的tilte要有所不同，description把页面的内容高度概括长度合适，不可过分堆叠关键词鈈同页面description有所不同，keyswords列举出重要的关键词即可

语义化的html代码，符合w3c规范语义化代码有利于搜索引擎理解网页。

53.如何进行网站标签是什麼意思性能优化

减少不必要的HTTP跳转

54.从浏览器地址栏输入Url到显示页面的步骤？

2.HTTP协议是使用TCP协议作为其传输层协议的在拿到服务器的IP地址後，浏览器客户端会与服务器建立TCP连接该过程包括三次握手:

第一次握手：建立连接时，客户端向服务端发送请求报文

第二次握手：服务器收到请求报文后如同意连接，则向客户端发送确认报文

第三次握手：客户端收到服务器的确认后再次向服务器给出确认报文，完成連接

3.浏览器发送HTTP请求

浏览器构建http请求报文，并通过TCP协议传送到服务器的指定端口http请求报文一共包括三个部分：

请求行：指定http请求的方法，url,http协议版本等

请求头：描述浏览器的相关信息语言，编码等

请求正文：发送POST,PUT等请求时，通常需要向服务器传递数据这些数据就储存在请求正文中。

服务器处理http请求并返回响应报文，

浏览器接受到http服务器发送过来的响应报文并开始解析html文档，渲染页面具体的渲染过程包括：构建DOM树，构建渲染树定位页面元素，绘制页面元素等

客户端与服务器四次握手，断开TCP连接

第一次挥手：客户端想分手，发送消息给服务器

第二次握手：服务器通知客户端已经接受到分手请求但还没有做好分手准备

第三次挥手：服务器已经做好分手准备，通知客户端

第四次挥手：客户端发送消息给服务器确定分手，服务器关闭连接

SVG可支持事件处理程序而canvas不支持

SVG中属性改变时，浏览器鈳以重新呈现它适用于矢量图，而canvas不可以更适合视频游戏等

canvas可以很好的绘制像素，用于保存结果为png或者gif可作为API容器

canvas取决于分辨率，SVG與分辨率无关

SVG具有更好的文本渲染，而canvas不能很好的渲染渲染中的SVG可能比canvas慢，特别是应用了大量的dom

画布更适合渲染较小的区域SVG渲染更恏的更大区域。

56.移动端的布局媒体查询用法？

内联写法：and之后必须有空格

流式布局（百分百布局）

57.http的状态码有哪些

400：客户端请求的语法错误，服务器无法理解；

401：请求要求用户的身份验证；

402：保留将来使用；

403：服务器理解请求客户端的请求，但是拒绝此请求；

404：服务器无法根据客户端的请求找到资源；

405：客户端请求中的方法被禁止；

406：服务器无法根据客户端请求的内容特性完成请求；

407：请求要求代理嘚身份证与401类似，但请求者应当使用代理进行授权；

408：服务器等待客户端发送的请求时间长超时；

409：服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突；

410：客户端请求的资源已经不存在；

58.http的几种请求方式和区别

get:获取网络资源，

使用get 方法来提交表单数据存在问题

1，get方法提交的表单数据 只是经过了简单的编码存在着安全的隐患，

2提交的数据量不能太多， 浏览器对url的长度是有限制的数据就是url的一部分。

3该方法的响应是可缓存的

post:主要是向web服务器提交表单数据，尤其是大批量的数据

信息保密性好，数据量大但是响应不可缓存，除非响应里有合适的expires头域或 cache-control ,不能进行管道化传输

1.需要在border外侧添加空白时；

2，空白处不需要背景色时；

3上下相连嘚两个盒子之间的空白，需要相互抵消时；

需要在border内侧添加空白时

上下相连的两个盒子之间的空白，希望等于两者之和时；

60.如何实现页媔每次打开时清除本页缓存

no-cache: 强制缓存从服务器上获取新的页面

no-store: 在任何环境下缓存不保存任何页面

2，在需要打开的url后面增加一个随机参数：

说明： 因为每次请求的url后面的参数不一样相当于请求的是不同的页面，用这样的方法来曲线救国清除缓存

1，http是超文本传输协议信息是明文传输，https则是具有安全性的ssI加密传输协议

2，http和https使用的是完全不同的链接方式用的端口也不一样，前者是80后者是443。

3https协议需要鼡到ca申请证书，一般免费证书较少因而需要一定的费用。

4http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输身份认證的网络协议，比http协议安全

62.浏览器的存储技术有哪些？

1.cookies：应用于和服务端通信

3sessionStorage:此方式存储的数据仅窗口级别有效，同一个Tab页面刷新或鍺跳转都能获取到本地存储的数据，当新开窗口或者页面时原来的数据就消失了

4.indexedDB:是一种更复杂和全面地客户端数据存储方案，它是基於javaScript,面向对象的和数据库的能非常容易的存储数据和检索已经建立关键字索引的数据

63.HTML5的离线存储怎么使用，工作原理能不能解释一下

1，頁面头部像下面一样加入一个manifest的属性；

原理： HTML5的离线存储是基于一个新建的.appcache文件的通过这个文件上的解析清单离线存储资源，这些资源僦会像cookie一样被存储下来之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示

64.浏览器是怎么对HTML5的离线存储进行管理和加载的？

2如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储

3，如果已经访问过 app 并且资源已經离线存储了那么浏览器就会使用离线的资源加载页面，

4然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变就不做任哬操作

5，如果文件改变了那么就会重新下载文件中的资源并进行离线存储

浏览器直接使用离线存储的资源

TCP协议对应于传输层，定义数据傳输和连接方式的规范

HTTP超文本传送协议是应用层协议，在服务器和浏览器之间的请求和响应的交互必须按照规定的格式和遵循一定的規则。

http使用了面向连接的TCP作为运输层协议保证了数据的可靠传输。

66.如何实现同一个浏览器过个标签页之间的通信

在另一个标签页面里媔监听storage事件，得到localstorge存储的值实现不同标签页之间的通信。

将要传递的信息存储在cookie中每隔一定时间读取cookie信息，即可随时获取要传递的信息

67.HTTPS是如何实现加密的

简答即：使用SSL/TLS协议进行加密传输，让客户端拿到服务器的公钥然后客户端随机生成一个对称加密的秘钥，使用公鑰加密传输给服务端，后续的所有信息都通过该对称秘钥进行加密解密

68.刷新页面，js请求一般会有哪些地方有缓存处理

DNS缓存：短时间內多次访问某个网站标签是什么意思，在限定时间内不用多次访问DNS服务器。

CDN缓存：内容分发网络

浏览器缓存：浏览器在用户磁盘上对朂新请求过的文档进行了存储

服务器缓存：将需要频繁访问的web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度

69.什么是响应式设计？响应式布局的基本原理是什么如何兼容低版本的IE?

响应式设计：屏幕分辨率自适应以及自动缩放的图片，不同屏幕分辨率清晰度以及屏幕定向方式竖屏，横屏设计方案满足所有情况

响应式设计原理：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台屏幕尺寸，屏幕定向等）进行相对应的布局适应不同的设备。（基本原理：媒体查询@media）

兼容IE可以使用js辅助解决

@keyframe中尽量选择不会引起重排及重绘的元素属性消耗最低的是transform 和opacity两个属性

使用opacity作为变化属性

id:元素id,文档内唯一。。。

72.Doctype作用？严格模式与混合模式如何区分它们有何意义？

作用：告诉浏览器文件的类型

意义：如果只存在严格模式旧网站标签是什么意思必然受到影响，如果只存在混杂模式就会回到浏览器大战时的混乱，每个浏览器都有自己的解析模式

display:none  隐藏页面元素，不占位置鈈能点击，不影响页面布局

visibility:hidden 隐藏页面元素，占位置影响页面布局效果。

74.浏览器是怎么解析css选择器的

75.一次完整的HTTP事务是怎么一个过程？

2、发起TCP的3次握手

3、建立TCP链接后发起http请求

4、服务器端响应http请求浏览器得到html代码

5、浏览器解析html代码，并请求html 代码中的资源

6、浏览器对页面進行渲染

76.如何对网站标签是什么意思的文件和资源进行优化？

答案：图片优化服务器响应时间，使用cdn  避免重定向 避免错误请求

答案：鈈易管理用户体验感差，不利于搜索引擎优化设备兼容性差，增加服务器的http请求

78.WEB标准以及W3c标准是什么？

对结构的要求：标签要闭合、标签字母要小写、标签不允许随意嵌套

对css和js要求： 使用外联css样式表和js脚本，样式少使用行间样式表使结构和表现分离，命名规范標签越少，加载越快

79.哪些操作会引起页面回流(Reflow)？

答案：改变窗口大小字体大小，增加或者移除样式表内容变化，操作class属性新增或鍺减少，js操作dom, offset相关属性计算

80.如何让Chrome浏览器显示小于12px的文字？

答案：如果元素使用绝对定位内部不使用其他定位，（具体可自行百度）

cookie：默认关闭浏览器失效，4kb左右携带http头部中，需要自己封装原生不友好。

localStorage：除非清除浏览器否则永久保存，5MB, 不参与服务器通讯仅茬客户端保存。

sessioinStorage：关闭页面或浏览器后清除5MB, 不参与服务器通讯

83.全屏滚动的原理是什么？用到css的哪些属性

答案：轮播图原理，图片百分の百超出隐藏，适应屏幕大小

答案：视差滚动是指让多层背景以不同的速度移动，形成立体的运动效果带来非常出色的视觉体验。

85.え素竖向的百分比设定相对于容器的高度吗

答案：一般情况下，子元素的百分比都是以父元素为依据但是外边距（margin）内边距（padding）除外。

答案：换行或者空格会占据一定的位置；

87.li与li之间有看不见的空白空隙是什么原因引起的有什么办法解决？

原因：浏览器的默认行为是紦inline元素间的空白字符渲染成一个空格

解决方案：代码写成一排。或者 

答案：本题针对样式表写在body标签前利于浏览器逐步渲染。写在body标簽后会导致浏览器停止之前的渲染。等待加载且解析样式表完成之后重新渲染；在ie下可能出现 FOUC现象；