HTML+CSS+JS（⾯试题）
1、你做的页⾯在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera：以前是presto内核，Opera现已改⽤Google Chrome的Blink内核
Chrome:Blink(基于webkit，)
2、你能描述⼀下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。
优雅降级 graceful degradation：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。
3、请描述⼀下cookies，sessionStorage和localStorage的区别？
sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。⽽localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更⼤容量存储设计的。Cookie的⼤⼩是受限的，并且每次你请求⼀个新的页⾯的时候Cookie都会被发送过去，这样⽆形中浪费了带宽，另外cookie还需要指定作⽤域，不可以跨域调⽤。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等⽅法，不像cookie需要前端开发者⾃⼰封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作⽤是与服务器进⾏交互，作为HTTP规范的⼀部分⽽存在，⽽Web Storage仅仅是为了在本地“存储”数据⽽⽣。
4、⼀个页⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪些⽅法优化这些图⽚的加载，给⽤户更好的体验。
图⽚懒加载，在页⾯上的未可视区域可以添加⼀个滚动条事件，判断图⽚位置与浏览器顶端的距离与页⾯的距离，如果前者⼩于后者，优先加载。
如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展⽰图⽚的前⼀张和后⼀张优先下载。
如果图⽚为css图⽚，可以使⽤CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼⽤户体验。
如果图⽚展⽰区域⼩于图⽚的真实⼤⼩，则因在服务器端根据业务需要先⾏进⾏图⽚压缩，图⽚压缩后⼤⼩与展⽰⼀致。
5、什么是Css Hack？ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
#test{
width:300px;
height:300px;
/*firefox*/
background-color:red\9; /*all ie*/
/*ie8*/
+background-color:pink; /*ie7*/
_ /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6、Sass、LESS是什么？⼤家为什么要使⽤他们？
他们是CSS预处理器。他是CSS上的⼀种抽象层。他们是⼀种特殊的语法/语⾔编译成CSS。
例如是⼀种动态样式语⾔. 将CSS赋予了动态语⾔的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运⾏ (⽀持IE 6+, Webkit, Firefox)，也可⼀在服务端运⾏ (借助 Node.js)。
为什么要使⽤它们？
结构清晰，便于扩展。
可以⽅便地屏蔽浏览器私有语法差异。这个不⽤多说，封装对浏览器语法差异的重复处理，减少⽆意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以⽅便地应⽤到⽼项⽬中。LESS 只是在 CSS 语法上做了扩展，所以⽼的 CSS 代码也可以与 LESS 代码⼀同编译。
7、html常见兼容性问题？
1.双边距BUG float引起的使⽤display
2.3像素问题使⽤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）
9.IE5-8不⽀持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
1. IE6不⽀持PNG透明背景，解决办法: IE6下使⽤gif图⽚
8、描述⼀个”reset”的CSS⽂件并如何使⽤它。知道normalize.css吗？你了解他们的不同之处？
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，⽐如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统⼀定义，就可以产⽣相同的显⽰效果。
你可能会⽤来代替你的重置样式⽂件。它没有重置所有的样式风格，但仅提供了⼀套合理的默认样式值。既能让众多浏览器达到⼀致和合理，但⼜不扰乱其他的东西（如粗体的标题）。
9、⼀边宽度固定，另⼀边⾃适应？
1）第⼀种：float 单⼀层浮动法
例如：左侧固定成100px; 则核⼼代码左侧：width:100px;float:left;
右侧 width:auto;margin-left:100px;
2）第⼆种：定位，在固定元素上加⼊绝对定位，⾃适应元素设置成margin-left：固定元素的宽度
3）通过BFC规则实现
例如：.left{float:left;width:200px;height:200px;}
.right{width:100%;overflow:hidden;height:200px}
10、什么是圣杯布局？
左右两边的内容保持不变，中间的内容可以根据屏幕的⼤⼩的改变⽽改变。
1 .content {
2 padding: 0 200px;
3 height: 200px;
4 min-width: 200px;
5 }
.
left {
6 width: 200px;
7 height: 200px;
8 background: red;
9 float: left;
10 margin-left: -200px;
11 }
12 .right {
13 width: 200px;
14 height: 200px;
15 background: yellow;
16 float: right;
17 margin-right: -200px;
18 }
19 .center {
20 width: 100%;
21 min-width: 200px;
22 height: 200px;
23 background: green;
24 float: left;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="content">
30 <div class="left"></div>
31 <div class="center"></div>
32 <div class="right"></div>
33 </div>
11、div中⼦元素居中的三种⽅式？
⾸先div设置为相对定位relative,⼦元素设置为绝对定位absolute
第⼀种#div.img{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
第⼆种
#div.img{position:absoulute;left:50%;top:50%;margin-left:img的1/2width；margin-top:-img的1/2height;}
HTML5+CSS3
1、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性：
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. ⾳频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后⾃动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；
HTML5兼容性解决⽅案
1. IE8/IE7/IE6⽀持通过 ateElement ⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签，浏览器⽀持新标签后，还需要添加标签默认的样式（当然最好的⽅式是直接使⽤成熟的框架、使⽤最多的是html5shim框架）：
<!--[if lt IE 9]>
<script> src="lecode/svn/trunk/html5.js"</script>
<![endif]-->
2你如何对⽹站的⽂件和资源进⾏优化？
⽂件合并
⽂件最⼩化/⽂件压缩
使⽤CDN托管
缓存的使⽤
3 CSS3新增伪类有那些？
p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:
enabled、:disabled 控制表单控件的禁⽤状态。
:checked，单选框或复选框被选中。
4 H5+CSS3兼容性解决的⽅案
1 htmlshiv.js框架 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)
<!--[if lt IE 9]>
<script> src="lecode/svn/trunk/html5.js"</script>
<![endif]-->
2 selectivizr.js
selectivizr是⼀个JavaScript⼯具，使IE浏览器也可以⽀持CSS3伪类以及属性选择器
使⽤很简单，只要把js include到页⾯上，然后你就可以
<script type="text/javascript" src="[JS library]"></script>
<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]- ->
3 条件注释
5 CSS3有哪些新特性？
1. CSS3实现圆⾓（border-radius），阴影（box-shadow），
2. 对⽂字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
4. 增加了更多的CSS选择器多背景 rgba
5. 在CSS3中唯⼀引⼊的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image
JS+JQuery部分内容
1 数组和字符串中常⽤的⽅法jquery框架面试题
1）数组中常⽤的⽅法
Push()向数组的末尾增加⼀项 unshift()向数组开头增加⼀项
pop()删除数组的末尾项 shift()删除数组开头项
Splice() 删除数组中的任意项 concat拼接
Join() 把数组中的每⼀项按照指定的分隔符拼接成字符串
reverse：倒序数组返回值倒序数组原有数组改变
sort：根据匿名函数进⾏冒泡排序 b-a倒序 a-b升序
兼容性不好：
indexOf：返回获取项在数组中的索引
lastIndexOf：返回获取项在数组中出现的最后⼀次索引
forEach: 循环遍历数组参数是⼀个匿名函数默认返回为undefined
map：循环遍历数组参数是⼀个匿名函数
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论