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现象;