HTML
Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
HTML5 为什么只需要写 <!DOCTYPE HTML>?
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
页面导入样式时,使用link和@import有什么区别?
介绍一下你对浏览器内核的理解?
常见的浏览器内核有哪些?
html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
简述一下你对HTML语义化的理解?
HTML5的离线储存怎么使用,工作原理能不能解释一下?
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
请描述一下 cookies,sessionStorage 和 localStorage 的区别?
iframe有那些缺点?
Label的作用是什么?是怎么用的?(加 for 或 包裹)
HTML5的form如何关闭自动完成功能?
如何实现浏览器内多个标签页之间的通信? (阿里)
webSocket如何兼容低浏览器?(阿里)
页面可见性(Page Visibility)API 可以有哪些用途?
如何在页面上实现一个圆形的可点击区域?
实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
网页验证码是干嘛的,是为了解决什么安全问题?
tite与h1的区别、b与strong的区别、i与em的区别?
css
介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
CSS选择符有哪些?哪些属性可以继承?
CSS优先级算法如何计算?
CSS3新增伪类有那些?
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
display有哪些值?说明他们的作用。
position的值relative和absolute定位原点是?
CSS3有哪些新特性?
请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
用纯CSS创建一个三角形的原理是什么?
一个满屏 品 字布局 如何设计?
常见兼容性问题?
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
为什么要初始化CSS样式。
absolute的containing block计算方式跟正常流有什么不同?
CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
对BFC规范(块级格式化上下文:block formatting context)的理解?
CSS权重优先级是如何计算的?
请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
移动端的布局用过媒体查询吗?
使用 CSS 预处理器吗?喜欢那个?
CSS优化、提高性能的方法有哪些?
浏览器是怎样解析CSS选择器的?
在网页中的应该使用奇数还是偶数的字体?为什么呢?
margin和padding分别适合什么场景使用?
抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]
元素竖向的百分比设定是相对于容器的高度吗?
全屏滚动的原理是什么?用到了CSS的那些属性?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)
::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
如何修改chrome记住密码后自动填充表单的黄色背景 ?
你对line-height是如何理解的?
设置元素浮动后,该元素的display值是多少?(自动变成display:block)
怎么让Chrome支持小于12px 的文字?
让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased)
font-style属性可以让它赋值为“oblique” oblique是什么意思?
position:fixed在android下无效怎么处理?
如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
display:inline-block 什么时候会显示间隙?(携程)
overflow: scroll时不能平滑滚动的问题怎么处理?
有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)
style标签写在body后与body前有什么区别?
JavaScript
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范?
JavaScript原型,原型链 ? 有什么特点?
JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?
Javascript如何实现继承?
Javascript创建对象的几种方式?
Javascript作用链域?
谈谈This对象的理解。
eval是做什么的?
什么是window对象? 什么是document对象?
null,undefined的区别?
写一个通用的事件侦听器函数(机试题)。
[“1”, “2”, “3”].map(parseInt) 答案是多少?
关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
什么是闭包(closure),为什么要用它?
javascript 代码中的”use strict”是什么意思 ? 使用它区别是什么?
如何判断一个对象是否属于某个类?
new操作符具体干了什么呢?
用原生JavaScript的实现过什么功能吗?
Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
对JSON的了解?
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
js延迟加载的方式有哪些?
Ajax 是什么? 如何创建一个Ajax?
同步和异步的区别?
如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理?
模块化开发怎么做?
AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
让你自己设计实现一个requireJS,你会怎么做?
谈一谈你对ECMAScript6的了解?
ECMAScript6 怎么写class么,为什么会出现class这种东西?
异步加载的方式有哪些?
documen.write和 innerHTML的区别?
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
.call() 和 .apply() 的含义和区别?
数组和对象有哪些原生方法,列举一下?
JS 怎么实现一个类。怎么实例化这个类
JavaScript中的作用域与变量声明提升?
如何编写高性能的Javascript?
那些操作会造成内存泄漏?
JQuery的源码看过吗?能不能简单概况一下它的实现原理?
jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
jquery中如何将数组转化为json字符串,然后再转化回来?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jquery.extend 与 jquery.fn.extend的区别?
jQuery 的队列是如何实现的?队列可以用在哪些地方?
谈一下Jquery中的bind(),live(),delegate(),on()的区别?
JQuery一个对象可以同时绑定多个事件,这是如何实现的?
是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?
jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
针对 jQuery性能的优化方法?
Jquery与jQuery UI有啥区别?
JQuery的源码看过吗?能不能简单说一下它的实现原理?
jquery 中如何将数组转化为json字符串,然后再转化回来?
jQuery和Zepto的区别?各自的使用场景?
针对 jQuery 的优化方法?
Zepto的点透问题如何解决?
jQueryUI如何自定义组件?
需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
如何判断当前脚本运行在浏览器还是node环境中?(阿里)
移动端最小触控区域是多大?
jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?
把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)
知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
解释JavaScript中的作用域与变量声明提升?
那些操作会造成内存泄漏?
JQuery一个对象可以同时绑定多个事件,这是如何实现的?
Node.js的适用场景?
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解释一下 Backbone 的 MVC 实现方式?
什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
简述一下 Handlebars 的基本用法?
简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?
用js实现千位分隔符?(来源:前端农民工,提示:正则+replace)
检测浏览器版本版本有哪些方式?
我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获
其他问题
原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的?
你遇到过比较难的技术问题是?你是如何解决的?
设计模式 知道什么是singleton, factory, strategy, decrator么?
常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
页面重构怎么操作?
列举IE与其他浏览器不一样的特性?
99%的网站都需要被重构是那本书上写的?
什么叫优雅降级和渐进增强?
是否了解公钥加密和私钥加密。
WEB应用从服务器主动推送Data到客户端有那些方式?
对Node的优点和缺点提出了自己的看法?
你有用过哪些前端性能优化的方法?
http状态码有那些?分别代表是什么意思?
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
部分地区用户反应网站很卡,请问有哪些可能性的原因,以及解决方法?
从打开app到刷新出内容,整个过程中都发生了什么,如果感觉慢,怎么定位问题,怎么解决?
除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
你用的得心应手用的熟练地编辑器&开发环境是什么样子?
对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
你怎么看待Web App 、hybrid App、Native App?
你移动端前端开发的理解?(和 Web 前端开发的主要区别是什么?)
你对加班的看法?
平时如何管理你的项目?
说说最近最流行的一些东西吧?常去哪些网站?
如何设计突发大规模并发架构?
说说最近最流行的一些东西吧?常去哪些网站?
是否了解开源的工具 bower、npm、yeoman、grunt、gulp,一个 npm 的包里的 package.json 具备的必要的字段都有哪些?(名称、版本号,依赖)
每个模块的代码结构都应该比较简单,且每个模块之间的关系也应该非常清晰,随着功能和迭代次数越来越多,你会如何去保持这个状态的?
Git知道branch, diff, merge么?
如何设计突发大规模并发架构?
当团队人手不足,把功能代码写完已经需要加班的情况下,你会做前端代码的测试吗?
说说最近最流行的一些东西吧?平时常去哪些网站?
知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
移动端(Android IOS)怎么做好用户体验?
简单描述一下你做过的移动APP项目研发流程?
你在现在的团队处于什么样的角色,起到了什么明显的作用?
你认为怎样才是全端工程师(Full Stack developer)?
介绍一个你最得意的作品吧?
你有自己的技术博客吗,用了哪些技术?
对前端安全有什么看法?
是否了解Web注入攻击,说下原理,最常见的两种攻击(XSS 和 CSRF)了解到什么程度?
项目中遇到国哪些印象深刻的技术难题,具体是什么问题,怎么解决?。
最近在学什么东西?
你的优点是什么?缺点是什么?
如何管理前端团队?
最近在学什么?能谈谈你未来3,5年给自己的规划吗?
前端面试的H5问题汇总:1.HTML5 为什么只需要写 <!DOCTYPE HTML>?
答案解析:
HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
答案解析:
行内元素:a b span img input select strong
块级元素:div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素:<br> <hr> <img> <link><meta>
3、页面导入样式时,使用link和@import有什么区别?
答案解析:
1)link属于XHTML标签,而@import是css提供的;
2)页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;
3)@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
4)link方式的样式的权重高于@import的权重。
4、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?
答案解析:
新特性,新增元素:
1)内容元素:article、footer、header、nav、section
2)表单控件:calendar、date、time、email、url、search
3)控件元素:webworker,websockt,Geolocation
移除元素:
1)显现层元素:basefont,big,center,font,s,strike,tt,u
2)性能较差元素:frame,frameset,noframes
处理兼容问题有两种方式:
1)IE6/IE7/IE8支持通过document方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。
2)使用是html5shim框架
另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构,功能元素来加以区分。
5、如何区分 HTML 和 HTML5?
答案解析:
1)在文档类型声明上不同:
HTML是很长的一段代码,很难记住,而HTML5却只有简简单单的声明,方便记忆。
2)在结构语义上不同:
HTML:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>
6、简述一下你对HTML语义化的理解?
答案解析:
1)用正确的标签做正确的事情;
2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
3)即使在没有样式css情况下也以一种文档格式显示,并且是容易阅读的;
4)搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
5)使于都源代码的人对网站更容易将网站分块,便于阅读维护理解。
7、HTML5的离线储存怎么使用,工作原理能不能解释一下?
答案解析:
localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。
8、iframe有那些缺点?
答案解析:
1)在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面;
2)框架结构有时会让人感到迷惑,页面很混乱;
9、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
答案解析:
1)<!Doctype>声明位于文档中的最前面,处于<html>标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。
2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
10、常见兼容性问题?
1)png24位的图片在IE6浏览器上出现背景;
解决方案是:做成PNG8;
2)浏览器默认的 margin 和 padding 不同。
解决方案是:加一个全局的*{margin:0padding:0}来统一。
3)IE6双边距bug:块属性标签float后,又有横行的 margin 情况下,在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:leftwidth:10pxmargin:0 0 0 100px} 这种情况下IE6会产生200px的距离。
解决方法:加上_display:inline,使浮动忽略
4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
5)IE下,even对象有x,y属性,但是没有pageX,pageY属性,但是没有x,y属性;
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6)Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法:可通过加入 CSS 属性 -webkt-text-size-adjust:none解决
7)超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active ;
解决方法:改变CSS属性的排列顺序:L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11、如何实现浏览器内多个标签页之间的通信?
答案解析:
调用localstorge、cookies等本地存储方式
12、webSocket如何兼容低浏览器?
答案解析:
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
13、支持HTML5新标签
答案解析:
1)IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式;
2)当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14、如何区分:DOCTYPE 声明\新增的结构元素\功能元素,语义化的理解?
答案解析:
1)用正确的标签做正确的事情;
2)html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
3)在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
4)搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利用 SEO ;
5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
15、介绍一下 CSS 的盒子模型?
答案解析:
1)有两种,IE 盒子模型、标准 W3C 盒子模型; IE 的 content 部分包含了 border 和 padding;
2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)。
16、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有哪些?
答案解析:
1)id 选择器(#myid)
2)类选择器(.myclassname)
3)标签选择器(div,h1,p)
4)相邻选择器(h1 + p)
5)子选择器(ul >li)
6)后代选择器(li a)
7)通配符选择器(* )
8)属性选择器( a[rel = "external"])
9)伪类选择器(a: hover, li: nth - child)
17、可继承的样式: font-size font-family color, UL LI DL DD DT
18、不可继承的样式:border padding margin width height
19、优先级就近原则,同权重情况下样式定义最近者为准
20、载入样式以最后载入的定位为准
解析答案:优先级为: !important > id >class >tag ; important 比 内联优先级高
21、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单选框或复选框被选中。
22、如何居中div? 如何居中一个浮动元素?
答案解析:
给div 设置一个宽度,然后添加 margin:0 auto 属性;div{width:200pxmargin:0 auto}
23、居中一个浮动元素
答案解析:
确定容器的宽高 宽500 高300的层,设置层的外边距
.div{width:500pxheight:300pxmargin:-150px 0 0 -250pxposition:relativebackground:green;left:50%;头:50%}
24、css3有哪些新特性?
答案解析:
CSS3 实现圆角(border-radius:8px),阴影(box-shadow:10px),对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋转,缩放,定位,倾斜
增加了更多的 css 选择器 多背景 rgba
25、为什么要初始化 CSS 样式
答案解析:
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
最简单的初始化方法是:*{padding:0margin:0} (不建议)
淘宝的样式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0padding:0}
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53}
h1, h2, h3, h4, h5, h6{ font-size:100%}
address, cite, dfn, em, var { font-style:normal}
code, kbd, pre, samp { font-family:couriernew, courier, monospace}
small{ font-size:12px}
ul, ol { list-style:none}
a { text-decoration:none}
a:hover { text-decoration:underline}
sup { vertical-align:text-top}
sub{ vertical-align:text-bottom}
legend { color:#000}
fieldset, img { border:0}
button, input, select, textarea { font-size:100%} table { border-collapse:collapseborder-spacing:0}
26、display:inline-block 什么时候会显示间隙?
答案解析:
移除空格,使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing
27、使用 CSS 预处理器吗?喜欢哪个?
答案解析:SASS
28、什么是盒子模型?
答案解析:
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
29、CSS实现垂直水平居中
答案解析:
一道经典的问题,实现方法有很多种,以下是其中一种实现:
HTML结构:
<divclass="wrapper">
<divclass="content"></div>
</div>
CSS:
.wrapper{position:relative}
.content{
background-color:#6699FF
width:200px
height:200px
position:absolute //父元素需要相对定位
top:50%
left:50%
margin-top:-100px //二分之一的height,width
margin-left:
-100px
}
30、简述一下src与href的区别
答案解析:
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
31、简述同步和异步的区别
答案解析:
同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
32、px和em的区别
答案解析:
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
33、浏览器的内核分别是什么?
答案解析:
IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)
主要都围绕知识点的理解与css兼容性问题上,请参考下面的2.1 link和@import都可以为页面引入CSS文件,其区别是?
将样式定义在单独的.css的文件里,link和@import都可以在html页面引入css文件。有link和@import两种方式,导入方式如下:
link方式:<link rel=”stylesheet” type=”text/css” href=”aa.css”>
@import方式:<style type=”text/css”>@import “aa.css”</style>
link和@import两种导入css文件的区别:
祖先的差别。Link属于XHTML标签,而@import完全是CSS提供的一种方式。Link标签除了可以加载CSS外,还可以做很多其他的事情,比如定义RCC,定义rel连接属性等;@import就只能加载css了。
加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢时更为明显。
兼容性的差别。由于@import是CSS2.1提出的所有老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的。
@Import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。
2.2 如何理解CSS样式表的层叠性?
CSS使用层叠的原则来考虑继承、层叠次序和优先级等重要特征,从而判断相互冲突的规则中哪个规则应该起作用。
继承性是指,许多CSS的样式规则不但影响选择器所定义的元素,而且会被这些元素的后代继承。
层叠性是指,当一个web页面使用多个样式表,多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候,浏览器会显示所有的样式。
优先级是指,当发生样式定义冲突时,浏览器首先会按照不同样式规则的优先级来应用样式。CSS样式的优先级如下所示(其中数字3拥有最高的优先权):
1.浏览器缺省设置;
2.外部样式表(.css文件)或者内部样式表(位于<head>元素内部);
3.内联样式(作为某个元素的style属性的值)。
同等优先级下,以最后定义的样式为准,important比内联高。
2.3 哪些属性可以继承?
Css中可以继承的属性如下:
文本相关属性:font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color;
列表相关属性:list-style-image、list-style-position、list-style-type、list-style;
表格相关属性:border-collapse、border-spacing、caption-side、table-layoute;
其他属性:Cursor、visibility;
2.4 CSS选择器中,元素选择器和类选择器的区别是什么?
元素选择器是常见的CSS选择器,即文档的元素就是最基本的选择器。选择器通常是某个HTML元素,比如<p>、<h1>、<em>、<a>等,甚至可以是<html>元素本身。
类选择器用于将样式规则与附带class属性的元素匹配,其中该class属性的值为类选择器中指定的值。使用类选择器时,首先要定义样式类,其语法为:
.className{ };
所有能够附带class属性的元素都可以使用此样式声明。只需要将class属性的值设置为”className”,则可以将类选择器的样式与元素关联。
在实际使用时,如果需要为某种元素定义样式,则往往使用元素选择器;如果要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
2.5 简要描述CSS中的定位机制
CSS中,除了默认的流定位方式以外,还有如下几种定位机制:浮动定位、相对定位、绝对定位和固定定位。
浮动定位是将元素排除在普通流之外,并且将它放置在包含框的左边或者右边,但是依旧位于包含框之内。
相对定位将元素相对于它在普通流中的位置进行定位。
绝对定位是指将元素的内容从普通流中完全移除,并且可以使用偏移属性来固定该元素的位置。
固定定位是指将元素的内容固定在页面的某个位置。
2.6 display属性和 visibility属性的区别?
可以使用display属性定义建立布局是元素生成的显示框类型。
1.如果将display属性设置为block,可以让行内元素表现得像块级元素一样;
2.如果将display属性设置为inline,可以让块级元素表现得像内联元素一样;
3.可以通过把display属性设置为none,让生成的元素根本没有框。这样的话,该框及其所有内容就不在显示,不占用文档中的空间。
在DIV设计中,室友display:none属性后,HTML元素(对象)的宽度。高度等各种
属性都将”丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
2.7 简述对CSS的盒子模型的理解?
CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边距(margin)这些属性。在CSS中,每个元素都被视为一个框,而每个框都有三个属性:
border:元素的边框(可能不可见),用于将框的边缘与其他框分开;
margin:外边距,表示框的边缘与相邻框之间的距离,也称为页边空白;
padding:内边距,表示框内容和边框之间的空间。
盒子模型的结构如图所示:
由上图可以看出,width和height指的是内容区域的宽度和高度。增加内边距、外边距和边框不会影响到内容区域的尺寸,但会增加元素框的总尺寸。
因此,如果在一个具有边框的元素中放置文本,往往需要设置一些内边距,以便文本的边缘不要接触边框,这样更便于阅读。而外边距则可以在多个元素框之间创建空白,避免这些框都挤在一起。因此,在设计页面时,经常会使用padding属性和margin属性来设置页面的布局。但是,必须注意的是,一旦用了padding属性或者margin属性设置了元素的边距以后,会增加元素在页面布局中所占的面积。
2.8 简述CSS3中的伪类选择器?
CSS3提供了大量伪类选择器,浏览器对于有些伪类选择器的支持还不太好。目前,常用的伪类选择器有:
目标伪类:即 :target,突出显示活动的HTML锚,用于选取当前活动的目标元素;
元素状态伪类:比如 :enabled、:disabled、:checked;
结构伪类: 比如 :first-child、:last-child、:empty、:only-child;
否定伪类:即 :not(selector),匹配非指定元素/选择器的每个元素。
2.9 为什么建议设置背景图像的同时还设置背景颜色?
一般建议在使用背景图片的同时提供background-color属性,并且将其设置为和图像主要颜色类似的颜色。这样,如果正在加载页面,或者因为各种原因无法显示背景图像时,页面可以使用这种颜色作为背景色。
2.10 如何居中div?如何居中一个浮动元素?
给div设置一个宽度,然后设置元素的左右外边距为auto,比如,margin:0 auto。则可以实现div居中显示。
对于浮动元素,设置其左右外边距为关键字auto是无效的。此时,如果需要设置其居中显示,可以:1.精确计算其左外边距并进行设置,实现居中显示。
2.使用一个居中显示的div元素包含次浮动元素,
代码如:<div style=”margin:0 auto”><div style=”float:left”></div></div>
2.11 在设置文本的字体时,为什么建议设置替换字体?
可以使用font-family属性来指定文本的字体,代码如下所示:font-family:name/inherit
此时,name为首选字体的名称。如果字体名称有多个单词,即中间有空格,则需要将字体名称用一对单引号或者双引号包围起来。
但是,如果用户机器上并没有安装name所指定的字体,则会显示默认字体。因此,如果可以指定一种替代字体,替代字体可以和指定字体不完全相同,相似且不会影响页面的布局,就可以解决问题了。
我们可以为font-family属性指定多种字体,且多种字体之间用逗号隔开,这样可以为页面指定一个字体列表。如果用户机器没有第一种字体,则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体,浏览器才会使用默认字体显示页面。代码如下所示:
h1{font-family:Georgia,serif}
此时,如果用户机器上没有安装Georgia,但安装了Times字体(serif字体系列中的一种字体),浏览器就可能对<h1>元素使用Times。尽管Times与Georgia并不完全匹配,但至少足够接近。
因此,我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路,在用户机器无法提供与规则匹配的特定字体时,就可以选择一个通用字体作为替换。
2.12 内联元素可以实现浮动吗?
在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。
2.13 什么情况下需要额外设置表格的显示规则?
默认情况下(不额外设置表格的显示规则时),表格按照自动表格布局进行显示,即浏览器在显示表之前查看每一个单元格,然后基于所有格的设置计算表单大小,而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时,单元格的大小会适应内容的大小。
自动表格布局的算法在表格复杂时会比较慢,这是由于它需要在确定最终的布局之前访问表格中多有的内容。在不能提前确定每一列的大小时,这种方式会非常适用。
如果额外设置表格的显示规则,即设置table-layout属性的值为fixed,则称为固定表格布局。在固定表格布局中,水平布局仅取决于表格宽度,列宽度,表格边框宽度,单元格间距,而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局,并使用该宽度计算该列中所有其他单元格的宽度。
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局,浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小,则会加速表的显示。
2.14 简要描述CSS中content属性的作用
content属性与:before及:after伪元素配合使用,来插入生成内容,可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号,并可以结合计数器为页面元素插入编号。比如,查看如下代码:
body {counter-reset:chapter}
h1:before { content:”第”counter(chapter)”章”}
h1 { counter-increment:chapter}
使用content属性,并结合:before选择器和计数器counter,可以在每个<h1>元素前插入新的内容。
2.15 CSS Sprite是什么,谈谈这个技术的优缺点
CSS Sprite是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位。
其优点在于:①减少网页的http请求,提高性能,这也是CSS Sprite最大的优点,
也是其被广泛传播和应用的主要原因;
②减少图片的字节,多张图片合并成1张图片的字节小于多张图片的字节总和;
③较少了命名困扰,只需对一张集合的图片命名,不需要对每一个小元素进行命名提高制作效率;
④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便;
但是CSS Sprite也存在一些不可忽视的缺点:
①图片合成比较麻烦;
②背景设置时,需要得到每一个背景单元的精确位置;
③维护合成图片时,最好只是向下加图片,而不是更改已有图片。
2.16 对CSS3有了解吗?列举几个CSS3的新特性并简要描述
CSS3作为CSS技术的升级版本,着力于模块化发展,将规范分解为一些小的模块,如选择器、盒子模型、列表模块、背景和边框等;并加入了很多新的模块和属性,比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。
其中,CSS3提供了一些复杂选择器,用于实现页面复杂情况下的元素选择,如属性选择器,一些伪类和伪元素选择器;渐变用于为元素设置渐变效果的背景;转换可以实现元素的变换,比如位移、缩放、旋转等;过渡可以实现简单的动画效果;动画属性则可以实现复杂的动画,可以实现逐帧制作动画。
2.17 过渡与动画的区别是什么?
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;
动画属性animation可以制作类似Flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。
2.18 什么是CSS reset?
CSS reset,又叫做CSS重写或者CSS重置,用于改写HTML标签的默认样式。
有些HTML标签在浏览器里有默认的样式,例如p标签有上下边距,li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。着必然会带来浏览器兼容问题。
因此,在CSS代码中,可以使用CSS代码去掉这些默认样式,即重新定义标签样式,从而覆盖浏览器的CSS默认属性,即CSS reset。
需要注意的是,在进行样式重写时,不建议使用 * 选择器进行重写,这样会降低效率,影响性能。
2.19 如何清除浮动元素所带来的影响?
浮动定位是指将元素排除在普通流之外,并且将它放置在包含框的左边或者右边,但是依旧位于包含框之内。也就是说,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以元素浮动之后,其原有位置不再保留,其他元素的位置会受到影响。
如果需要清除左侧或者右侧浮动元素带来的影响,则可以使用clear属性来设置。另外,包含框呃逆的子元素浮动后,如果包含框没有设置具体的高度,则其高度会发生变化,此时,可以使用overflow属性来清除子元素浮动后带来的影响。
2.20 谈谈你对浏览器兼容性问题的理解
浏览器的类型及版本的不同会造成CSS效果不尽相同,因此需要实现浏览器兼容,也可以针对不同的浏览器编写不同的CSS。
目前,各主流浏览器的新版本,对应W3C的标准支持很好,因此,首先保证代码符合W3C的标准,这是解决浏览器兼容问题的前提。
其次,对于某些支持受限的属性,针对不同的浏览器添加相应的前缀,比如-webkit-、-o-、-moz-。
第三,对于IE的低版本,可以编写带有特定前缀的代码,实现版本识别。比如:
.bb{
background-color:#f1ee18/*所有识别*/
.background-color:#f1ee18\9/*IE6 7 8识别*/
+background-color:#f1ee18/*IE6 7识别*/
_background-color:#f1ee18/*IE6识别*/
}
另外,对于特定的兼容性问题,特殊解决。常见的特殊问题有:
1.使用CSS reset:对于有些HTML标签,浏览器默认的margin和padding不同,可以使用CSS代码改写默认的样式效果,从而实现统一
2.IE低版本中,不能使用auto关键字实现块级元素居中显示,可以改用设置父元素的text-align;
3.子元素设置上外边距时,父元素需要设置边框或者外边距;
4.外边距合并问题。