html/html5/css/css3
1.什么是盒模型？
答案：是由内容（content），内边距（padding），边框（border），外边距（margin）组成。
盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
2.什么是外边距重叠？重叠的结果是什么？
答案：上下相邻盒子的底部外边距，和顶部外边距相互重叠。结果是相距最大值位置。
3.外边距重叠解决方法？
答案：BFC（块级格式化上下文）
形成的条件：
1.浮动的元素，float除none以外的值。
2.定位的元素，position(absolute,fixed)。
3.display为以下其中之一的值，inline-block，table-cell，table-caption。
4.overflow为（hidden，auto，scroll）。
4.空元素有哪些？行内元素有哪些？块级元素有哪些？行内元素与块级元素有什么区别？
答案：
空元素：br、meta、hr、link、input、img；
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea；
块级元素：div、ul、li、dl、dt、dd、h1-h6、p；
区别：
行内元素特点：与其他元素并排，不能设置宽高，默认的宽度就是文字的宽度。
块级元素特点：单独一行，不予其他元素并列，可以设置宽高，默认宽度是父元素的100%。
5.css有哪些选择器？
答案：
元素选择器：文档的元素是最基本的选择器。（标签选择器）
类选择器：独立于文档元素的方式来指定样式。（多类选择器）
id选择器：类似于类选择器，不过也有一些重要的差别。
属性选择器：根据元素的属性及属性值来选择元素。
后代选择器：可以选择某元素的后代的元素。
子元素选择器：只能选择作为某元素子元素的元素。
相邻兄弟选择器：可以选择紧接在另一个元素后的元素，且二者有形同的父元素。
伪类：用于向某些选择器添加特殊效果。
伪元素：用于向某些选择器设置特殊效果。
6.伪类和伪元素的区别？
答案：
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。
伪元素：为DOM树没有定义的虚拟元素。
7. ::before 和 :after中双冒号和单冒号的区别？两个伪元素的作用？
答案：单引号（:） 用于伪类，双引号（::）用于伪元素
::before：就是以一个子元素的存在，定义在元素内容主体之前的一个伪元素，并不存在与DOM之中，只存在于页面之中。（新写法 css3）（单双表达一样）
:after：兼容老语法；
8.简述src和herf的区别？
答案：
src：指向外部资源位置。指向的内容将会嵌入到文档中当前标签的位置。
herf:指向网络资源位置。建立和当前元素（锚点）或当前文档（链接）之间的链接。
9. img的alt与title有何异同？
答案：
alt:图片加载失败提示文字。
title:鼠标放到图片上提示文字。
10.行内元素的padding和margin设置？
答案：
padding-top,padding-bottom,margin-top,margin-bottom属性设置无效。
padding-left,padding-right,margin-left,margin-right属性设置有效。
11.哪些属性可以继承？优先级算法如何计算？css新增伪类有哪些？
答案：
可继承属性：font-size,font-family,color,text-indent
优先级算法：
优先级就近原则，同权重情况下样式定义最近为准。
载入样式以最后载入的为准
!important > 内联样式 > id > class > tag
新增伪类：
p:first-of-type 选择属于其父元素的首个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素
p:only-of-type 选择属于其父元素唯一<p>元素
p:only-child 选择属于其父元素唯一子元素
p:nth-child(2) 选择属于其父元素第二个子元素
12.rgba()和opacity的透明效果有什么不同？
答案：
rgba():作用于元素的颜色或其背景色。
opacity:作用于元素及所有内容的透明度。
13.对比display:none；visibility:hidden；opacity:0三者的区别？
答案：
display:none表示 溢出隐藏
visibility:hidden表示元素不可见
opacity:0表示不透明度为0
14.超链接访问过后hover样式不出现的问题？怎么解决？
答案：
a:link 未访问链接
a:visited 已访问链接
a:hover 鼠标滑过的链接
a:active 已选中的链接
注：注意顺序，否则会影响效果。
15.css中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
答案：dispaly属性为none、visibility属性为hidden、设置宽高为0、设置透明度为0、设置z-index位置为-1000em
16，css让元素垂直居中的方法？
答案：
宽高未知定位方法：
父元素：position:relative
子元素：position:absolute
top:50%;
left:50%;
transform:translate(-50%,-50%)
或flex布局 display:flex;
justify-content:center;
align-items:center;
17.如何垂直居中一个浮动的元素？
答案： margin:auto
18.px和em、rem的区别？
答案：
px 相对长度单位，相对于浏览器分辨率而言。
em 相对长度单位，相对于当前对象内文本的字体尺寸。
rem css3新增的一个相对单位，相对于html根元素。
19.什么是css Hack?
答案：用来解决css属性在不同浏览器中显示效果不一样的问题。
20.什么是渐进增强？什么是优雅降级？区别？
答案：
渐进增强：针对低版本浏览器进行构建页面，保证最近基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到更好的体验。
优雅降级：开始就建立完整功能，然后在针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给。渐进增强则是从一个非常基础的，能够起作用的版本开始并不断扩充，以适应未来环境需求
21.html常见的兼容问题？
答案：
双边距bug float引起的 使用 display
3像素问题 使用float引起的 使用dispaly:inline - 3px;
超链接hover 点击之后没有效果，正确的顺序
IE z-index问题 给父级添加 position:relative
mine-height 最小高度!important
等自行查询
22.对WEB标准以及W3C的理解与认识？
答案：
web标准：包括结构（html）、表现（css）、行为（js）
w3c规范要求：
标签字母要小写、标签要闭合、标签不允许随意嵌套
尽量使用外联css样式表和js脚本。样式尽量少用行间样式，使结构和与表现分离。
23：前端页面构成有那三层？作用是什么？
答案：
结构（html）：实现页面结构、
表现（css）：完成页面的表现和风格、
行为（js）：客户端脚本语言，实现一些客户端的功能与业务。
24.css中link和@import的区别是什么？
答案：
link 是xhtml标签，除了加载css之外，还可以定义rss其他事务
link 引入 css 在页面加载是后续同时加载。 @import需要页面完全载入后才能加载。
25.css预编译方式？为什使用他们？
答案：
sass、less
作用：把浏览器不认识的代码，还原为浏览器认识的css标准发给浏览器解析。
26.display的属性值有哪些？可以做什么？
答案：
none：元素不会被显示
block：元素将显示为块级元素、元素前后会带有换行符；
inline：元素会被显示为内联元素、元素前后不会带有换行符；
inline-block：行内块元素；
table：元素会作为块级表格显示、类似<table>,表格前后带有换行符；
table-row：元素会作为一个表格行显示；
table-cell：元素会作为一个表格单元格显示，
27.position的属性值有哪些？每个值的特点作用？
答案：
relative：相对定位；
absolute：绝对定位；
fixed：固定定位；
28.浏览器的内核有哪些？
答案：
IE浏览器：Trident
Safari浏览器：Gecko
Firefox浏览器：Presto
Opera浏览器：Presto
Chrome浏览器：Webkit
29.浏览器如何渲染页面的？
答案：
1.解析文档构建dom树
2.构建渲染树
3.布局和绘制渲染树
30.img图片底部有空隙，解决方法？
答案：
1.display:block
31.如何优化图像，图像格式png、jpg、gif区别，什么时候使用？
答案：
png：能在保证最不失真的情况下尽可能压缩图像文件的大小
jpg：支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小
32.空格。
33.为什么会出现浮动？什么时候清除浮动？清除浮动的方式？
答案：
为什么会出现浮动：浮动让文字环绕图片，
什么时候清除浮动： 父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷。
清除浮动的方式：
在父元素内添加冗余元素clear:both
在父元素中设置属性overflow:hidden || auto
34.position和display、margin、collapse、overflow、float这些特性叠加以后会怎么样？
答案：借鉴答案
35.为什么要初始化css样式？
答案：
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
36.HTML5的特点？
答案：
文档声明变得更简单，
H5新增语义化标签，
强化了web页面的表现性能，除了可描绘的二维图形外，还有用于播放视频和语音的标签。
支持离线存储，本地数据库等web应用功能，为代码编写和维护提供了很大的便利。
37.语义化标签有哪些？语义化的理解？
答案：
Header:定义头部，可以多个；
Footer:定义底部，不一定在最底部，可以多个
Nav:导航栏标签，
Article:独立内容区域
Aside:页面侧边栏使用
38.css3有哪些新特性？
答案：
1，圆角，阴影
2，文字特效，线性渐变，旋转
3，新增加了很多css选择器，多背景， rgba
4，多媒体查询 ，多栏布局
5，border-image
39.css3动画的重点，怎么使用的？
答案：
2D动画
1，平移
2，旋转
3，变形
4，伸缩
40.如何更改input的样式？
答案：
input::placeholder{
color:#fff;
padding-left:10px;
}
41.对grid布局的了解？
答案：
首先在整个容器中我们用了display:gird;对容器声明一个网格容器，那么这个容器元素里对应的子元素自动成为网格项目。
设置了网格的列数和行数，以及列和行的间距
42.阐述一下css Sprites?
答案：
优点：
减少网页的http请求，从而大大提高了页面的性能，这也是css sprites最大的有点。
能减少图片的字节
缺点：
难以实现自适应，图片的大小都限制死了。
43.css属性overflow属性定义溢出元素内容区的内容会如何处理？
答案：
visible:默认值，内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，浏览器则会显示滚动条以便查看其余的内容。
inherent:规定应该从父级元素继承overflow属性的值。
44.一行或多行文办超出如何隐藏？
答案：
overflow:hidden
text-overflow:ellipsis
white-space:nowrap
45.div+css的布局比较table布局有什么优点？
答案：
div+css布局的好处：
符合w3标准，代码结构清晰明了，结构，样式和行为分离，带来足够好的可维护性
布局精准，网站版面布局修改简单
加快了页面的加载速度
节约站点所占的空间和站点流量
用只包含结构化内容的html代替嵌套的标签，提高另外搜索引擎对网页的搜索效率
table布局的好处：
容易上手。
可以形成复杂的变化，简单快速。
表现上更加‘严谨’，在不同浏览器中都能得到很好的兼容。
46.如何写宽高自适应的APP？
答案：
单位:rem的使用，
47.什么是微格式？在前端构建中应该考虑微格式吗？
答案：
微格式：是一种让机器可读的语义化xhtml词汇的集合，是结构化的数据的开放标准，是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果见面可以显示额外的提示。
48.浏览器标准模式和怪异模式之间的区别？
答案：
1. 严格模式：width是内容宽度，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
怪异模式：width则是元素的实际宽度，内容宽度 = width - (padding-left + padding-right + border-left-width + border-right-width)
2.可以设置行内元素的高宽，在标准模式下，给span等行内元素设置width和height 都不会生效，而在怪异模式下，则会生效。
3.可设置百分比的高度，在标准模式下，一个元素的高度是由其他包含的内容决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4.用margin:0 auto 设置水平居中的IE下会失效，在标准模式下可以使元素水平居中，在怪异的模式下却会失效，怪异模式下的解决办法，用text-align属性；
5.怪异模式下设置图片的padding会失效；
6.怪异模式下Table中的字体属性不能继承上层的设置；
7.怪异模式下white-space:pre会失效；
49.一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，提高用于体验？
答案：
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器的距离与页面的距离，如果前者小于后者，优先加载；
如果为幻灯片，相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张游下载；
如果图片为css图片，可以使用CSSsprite,SVGsprite,Iconfont,Base64等技术；
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别的厉害缩略图，以提高用户体验；
如果图片展示区域小于图片的真是大小，则因在服务器端根据业务需要先进行压缩图片，图片压缩后大小与展示一致。
50.css如何让页面的字体变清晰？
答案：
none用于小像素的文本，subpixel-antialiased浏览器默认的，antialiased反锯齿。
51.用纯css创建一个三角形的原理？
答案：
<div class="box b1"></div>
<div class="box b2"></div>
<div></div>
.box{
position:absolute;
left:0;
top:0;
width:0;
height:0;
border:6px solid transparent;
}
.b1 {
border-bottom-color:#000;
}
.b2{
border-bottom-color:#fff;
}
52. 前端需要注意哪些SEO？
答案：
SEO: 具体是指通过网站结构调整，网站内容建设，网站代码优化，以及站外优化，使网站满足搜索引擎的收录排名需求，提高网站在搜索引擎中关键字的排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。
需要注意的：
合理的title,description,keyswords搜索引擎对这三项的权重逐个减少，title值强调重点即可，重要的关键词出现不要超过两次，而且要靠前。
不同页面的tilte要有所不同，description把页面的内容高度概括，长度合适，不可过分堆叠关键词，不同页面description有所不同，keyswords列举出重要的关键词即可。
语义化的html代码，符合w3c规范，语义化代码有利于搜索引擎理解网页。
53.如何进行网站性能优化？
答案：
页面优化：
减少http请求数
外部脚本置地
异步执行inline脚本
lazy load javascript
将css放在head中
减少不必要的HTTP跳转
避免重复的资源请求
54.从浏览器地址栏输入Url到显示页面的步骤？
答案：
1.域名解析
2.HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址后，浏览器客户端会与服务器建立TCP连接，该过程包括三次握手:
第一次握手：建立连接时，客户端向服务端发送请求报文
第二次握手：服务器收到请求报文后，如同意连接，则向客户端发送确认报文
第三次握手：客户端收到服务器的确认后，再次向服务器给出确认报文，完成连接。
3.浏览器发送HTTP请求
浏览器构建http请求报文，并通过TCP协议传送到服务器的指定端口，http请求报文一共包括三个部分：
请求行：指定http请求的方法，url,http协议版本等
请求头：描述浏览器的相关信息，语言，编码等。
请求正文：发送POST,PUT等请求时，通常需要向服务器传递数据，这些数据就储存在请求正文中。
4.服务器处理http 请求
服务器处理http请求，并返回响应报文，
5.浏览器页面渲染
浏览器接受到http服务器发送过来的响应报文，并开始解析html文档，渲染页面，具体的渲染过程包括：构建DOM树，构建渲染树，定位页面元素，绘制页面元素等。
6.断开TCP接连
客户端与服务器四次握手，断开TCP连接。
第一次挥手：客户端想分手，发送消息给服务器
第二次握手：服务器通知客户端已经接受到分手请求，但还没有做好分手准备
第三次挥手：服务器已经做好分手准备，通知客户端
第四次挥手：客户端发送消息给服务器，确定分手，服务器关闭连接。
55.canvas和SVG有什么区别？
答案：
SVG是用来描述XML中2D图形的语言，canvas借助Javascript动态描绘2D图形
SVG可支持事件处理程序而canvas不支持
SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图，而canvas不可以，更适合视频游戏等
canvas可以很好的绘制像素，用于保存结果为png或者gif，可作为API容器
canvas取决于分辨率，SVG与分辨率无关。
SVG具有更好的文本渲染，而canvas不能很好的渲染，渲染中的SVG可能比canvas慢，特别是应用了大量的dom
画布更适合渲染较小的区域，SVG渲染更好的更大区域。
56.移动端的布局，媒体查询用法？
答案：
媒体查询：
内联写法：and之后必须有空格
eg:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
header{
display: block;
}
}移动端的布局:
流式布局（百分百布局）
rem 布局
响应式布局
弹性布局
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 ,不能进行管道化传输。
59.margin和padding分别适合什么场景使用？
答案：
margin:
1.需要在border外侧添加空白时；
2，空白处不需要背景色时；
3，上下相连的两个盒子之间的空白，需要相互抵消时；
padding:
需要在border内侧添加空白时，
空白处需要背景色时，
上下相连的两个盒子之间的空白，希望等于两者之和时；
60.如何实现页面每次打开时清除本页缓存？
答案：
1，用html 标签设置HTTP头信息
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
no-cache: 强制缓存从服务器上获取新的页面
no-store: 在任何环境下缓存不保存任何页面
2，在需要打开的url后面增加一个随机参数：
增加参数前： url = test/test.jsp
增加参数后：url = test/test.jsp?ranparam = random()
说明： 因为每次请求的url后面的参数不一样，相当于请求的是不同的页面，用这样的方法来曲线救国，清除缓存
61.http和https区别？
答案：
1，http是超文本传输协议，信息是明文传输，https则是具有安全性的ssI加密传输协议。
2，http和https使用的是完全不同的链接方式，用的端口也不一样，前者是80，后者是443。
3，https协议需要用到ca申请证书，一般免费证书较少，因而需要一定的费用。
4，http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比http协议安全。
62.浏览器的存储技术有哪些？
答案：
1.cookies：应用于和服务端通信
2，localStorage是web Storage互联网存储规范中的一部分，低版本浏览器不支持
3，sessionStorage:此方式存储的数据仅窗口级别有效，同一个Tab页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就消失了
4.indexedDB:是一种更复杂和全面地客户端数据存储方案，它是基于javaScript,面向对象的和数据库的，能非常容易的存储数据和检索已经建立关键字索引的数据
63.HTML5的离线存储怎么使用，工作原理能不能解释一下？
答案：
如何使用：
1，页面头部像下面一样加入一个manifest的属性；
2，在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
原理： HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来，之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。
64.浏览器是怎么对HTML5的离线存储进行管理和加载的？
答案：
在线情况下
1，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件
2，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
3，如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，
4，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作
5，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线情况下
浏览器直接使用离线存储的资源
65.http协议和tcp协议区别？
答案：
TCP协议对应于传输层，定义数据传输和连接方式的规范。
HTTP超文本传送协议是应用层协议，在服务器和浏览器之间的请求和响应的交互，必须按照规定的格式和遵循一定的规则。
http使用了面向连接的TCP作为运输层协议，保证了数据的可靠传输。
66.如何实现同一个浏览器过个标签页之间的通信？
答案：
第一种方式：调用localStorage
在一个标签页里面使用localStorage.setItem(key, value)添加（修改、删除）内容；
在另一个标签页面里面监听storage事件，得到localstorge存储的值，实现不同标签页之间的通信。
标签页一
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script> 标签页二
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>第二种：调用cookie_setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息
标签页一
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
document.cookie="name="+name;
});
});
</script> 标签页二
<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>
67.HTTPS是如何实现加密的？
答案：借鉴答案
简答即：使用SSL/TLS协议进行加密传输，让客户端拿到服务器的公钥，然后客户端随机生成一个对称加密的秘钥，使用公钥加密，传输给服务端，后续的所有信息都通过该对称秘钥进行加密解密。
68.刷新页面，js请求一般会有哪些地方有缓存处理？
答案：
DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
CDN缓存：内容分发网络
浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储
服务器缓存：将需要频繁访问的web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。
69.什么是响应式设计？响应式布局的基本原理是什么？如何兼容低版本的IE?
答案：
响应式设计：屏幕分辨率自适应以及自动缩放的图片，不同屏幕分辨率，清晰度以及屏幕定向方式竖屏，横屏，设计方案满足所有情况
响应式设计原理：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相对应的布局，适应不同的设备。（基本原理：媒体查询@media）
兼容IE可以使用js辅助解决
70.可以通过哪些方法优化css3 animation渲染？
答案：
@keyframe中尽量选择不会引起重排及重绘的元素属性，消耗最低的是transform 和opacity两个属性
使用box-shadow作为变化属性
使用opacity作为变化属性
71.HTML全局属性(global attribute)有哪些？
答案：借鉴答案详情链接
id:元素id,文档内唯一。。。。。。
72.Doctype作用？严格模式与混合模式如何区分？它们有何意义？
答案：
作用：告诉浏览器文件的类型
区分：<!DOCTYPE html> （html5标准）
意义：如果只存在严格模式，旧网站必然受到影响，如果只存在混杂模式，就会回到浏览器大战时的混乱，每个浏览器都有自己的解析模式。
73.display:none与visibility:hidden的区别？
答案：
display:none 隐藏页面元素，不占位置，不能点击，不影响页面布局。
visibility:hidden 隐藏页面元素，占位置，影响页面布局效果。
74.浏览器是怎么解析css选择器的？
答案：从 ‘上’ 到 ‘下’， 从 ‘右’ 到 ‘左’
75.一次完整的HTTP事务是怎么一个过程？
答案：
1、域名解析
2、发起TCP的3次握手
3、建立TCP链接后发起http请求
4、服务器端响应http请求，浏览器得到html代码
5、浏览器解析html代码，并请求html 代码中的资源
6、浏览器对页面进行渲染。
76.如何对网站的文件和资源进行优化？
答案：图片优化，服务器响应时间，使用cdn 避免重定向 避免错误请求
77.iframe有哪些缺点？
答案：不易管理，用户体验感差，不利于搜索引擎优化，设备兼容性差，增加服务器的http请求。
78.WEB标准以及W3c标准是什么？
答案：
对结构的要求：标签要闭合、标签字母要小写、标签不允许随意嵌套。
对css和js要求： 使用外联css样式表和js脚本，样式少使用行间样式表，使结构和表现分离，命名规范，标签越少，加载越快。
79.哪些操作会引起页面回流(Reflow)？
答案：改变窗口大小，字体大小，增加或者移除样式表，内容变化，操作class属性，新增或者减少，js操作dom, offset相关属性计算，
80.如何让Chrome浏览器显示小于12px的文字？
答案：webkit–transform:scale(0.5); 属性缩放
81.position:fiexd在android下无效怎么处理？
答案：如果元素使用绝对定位，内部不使用其他定位，（具体可自行百度）。
82.请描述一下cookie、sessioinStorage 和 localStorage 的区别？
答案：
cookie：默认关闭浏览器失效，4kb左右，携带http头部中，需要自己封装，原生不友好。
localStorage：除非清除浏览器，否则永久保存，5MB, 不参与服务器通讯，仅在客户端保存。
sessioinStorage：关闭页面或浏览器后清除，5MB, 不参与服务器通讯
83.全屏滚动的原理是什么？用到css的哪些属性？
答案：轮播图原理，图片百分之百，超出隐藏，适应屏幕大小。
84.视差滚动效果？
答案：视差滚动是指让多层背景以不同的速度移动，形成立体的运动效果。带来非常出色的视觉体验。
85.元素竖向的百分比设定相对于容器的高度吗？
答案：一般情况下，子元素的百分比都是以父元素为依据。但是外边距（margin）内边距（padding）除外。
86.display:inline-block什么时候会显示间隙？
答案：换行或者空格会占据一定的位置；
解决：font-size: 0; 或使用margin负值，或使用font-size:0; 或letter-spacing 或word-spacing
87.li与li之间有看不见的空白空隙是什么原因引起的？有什么办法解决？
答案：
原因：浏览器的默认行为是把inline元素间的空白字符渲染成一个空格。
解决方案：代码写成一排。或者 详情
88.style标签写在body后与body前有什么区别？
答案：本题针对样式表，写在body标签前利于浏览器逐步渲染。写在body标签后，会导致浏览器停止之前的渲染。等待加载且解析样式表完成之后重新渲染；在ie下可能出现 FOUC现象；
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
