1 常用那几种浏览器测试?有哪些内核(Layout Engine)?
浏览器
chrome
IE
Opera
Safari
FireFox
内核
Blink
Trident
Gecko
Webkit
Presto
2 清除浮动有哪些方式?
给父元素添加高度
给父元素添加浮动,不过父元素需要宽度
结尾添加空标签 clear:both
结尾处添加br标签设置clear:both
给父元素定义伪类:after和zoom
给父元素定义overflow:hidden
给父元素定义overflow:auto
给父元素定义display:table
3 html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?
绘画canvas
用于媒介回放的audio和video
语义化更好的内容元素 header footer nav aside section
本地离线存储的locatStorage,只要不手动删除,即使浏览器关闭也不会删除数据
sessionStorage的数据在浏览器关闭后会自动删除
表单控件 data time email urll search
IE8/IE7/IE6支持使用document.createElement()产生的标签
4 简述一下你对HTML语义化的理解?
HTML语义化是使用正确的标签做正确的事情
它的好处有:
利于SEO搜索 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重
开发人员看源代码的时候更加方便的理解内容结构,方便后期维护,
在没有css样式的情况下,也以中文档格式显示,并且容易阅读
内容结构清晰,便于对浏览器,搜索引擎解析
5 什么叫优雅降级和渐进增强?**
优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容
渐进增强:一开始构建所有浏览器支持的基本功能,逐步的添加那些只有新式浏览器才支持的功能,当浏览器支持时,他们会自动的呈现出来并发挥作用
6 display:none和visibility:hidden的区别?
display:none 隐藏对应元素 脱离文档流 当标签进行隐藏时,在文档布局中不再给它分配口空间,各边的标签会合拢,就当他不存在
visbility:hidden 隐藏对应元素 当标签隐藏时,在文档布局中仍保留原来的空间
7 CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有那些?
id选择符
类选择符
标签选择符
相邻选择符
属性选择符
后代选择符
子代选择符
通配符选择符
伪类选择器
8 CSS3有哪些新特性?
border-radius(圆角)
box-shadow(阴影)
text-shadow(文本特效)
gradient (渐变)
9 谈谈你对重构的理解
在不改变外部行为的前提下,简化结构,添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化
在扩展的同时保持一致的UI
10 对web标准以及w3c的理解和认识
标签闭合,标签小写,不乱嵌套,提高搜索机器人搜索几率。使用外链css和js脚本,结构行为表现分类,内容能被更多广泛的设备所访问,更少的代码和组件,容易维护,改版方便,不需要变动页面内容
11 Html和xhtml有什么区别?
XHMLT元素必须正确被嵌套,元素必须关闭,标签必须小写,必须有根元素
12介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
盒子模型是由内容 padding border margin
他们的不同之处在于内容宽的不同
标准的CSS盒子模型:内容宽+padding左右+border左右+margin左右
低版本的盒子模型:内容宽(padding左右+border左右)+margin左右
13 媒体查询怎么使用?
媒体查询可以为不同尺寸不同大小的媒体定义不同的css样式,适合相应的设备显示,也就是响应式布局
@media screen and(min-width:400px)and(max-width:700px){...}
复制代码
14 margin和padding分别适合什么场景使用?
margin
在边框的外面需要空白的时候
空白处不需要背景的时候(背景色,背景图片)
两个纵向的盒子中间需要间距是选择最大的那一个,使用Margin
padding
在边框里面需要空白的时候
空白处需要背景的时候(背景色,背景图片)
两个纵向的盒子中间间距是两个盒子的padding值的时候
15 如何修改chrome记住密码后自动填充表单的黄色背景**
设置chrome关闭自动填充表单功能,设置表单属性autocomplete="off/on",关闭自动填充表单,自己实现记住密码
16 请写出html5新增的标签,并说明其语义和应用场景
header 标签设置页面或章节的头部
footer 标签设置页面或章节的尾部
aside 标签设置和页面内容关联不大的内容
nav 标签设置用于链接导航的部分
section 定义文档中的一个节
17 描述一下 cookies、sessionStorage 和 localStorage的区别
cookie是由同源HTTP请求携带,在服务端和浏览器之间传递
sessionStorage和localStorage是不会把数据传递到服务端的,只保存在本地
存储大小
cookie的存储大小只有4k,多出来的会被截掉
sessionStorage和localStorage的存储大小也有限制,但是比cookies多,有5M
生命期
cookies在过期时间之前,数据都会保存,即使关闭窗口和浏览器
sessionStorage的数据,只要一关闭浏览器就会自动删除数据
localStorage的数据存储时间长,除非手动删除,即使关闭浏览器也不会删除
18 如何实现浏览器内多个标签页之间的通信?
在seesionStorage或者localStorage中存储数据
19 title与h1的区别、b与strong的区别、i与em的区别?
title标签没有任何语义,只代表是个标题,不会出现在页面上
h1是一个层次明确的标签,也是标题使用
b标签文本加粗
strong标签不止文本加粗,还带有语义化
i标签文本倾斜
em标签不止文本倾斜,还带有语义化
20 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
css盒子模型是由content padding border margin组成
他们的区别在于内容宽
标准的CSS盒子模型宽:内容宽+左右padding+左右border+左右margin
低版本的盒子模型:内容宽(左右Padding+左右border)+左右margin
21 CSS优先级算法如何计算?
标签选择器 1
类选择器 10
id选择器 100
元素标签 1000
比权重,谁的权重大,谁的优先级高
权重相同,遵循就近原则
继承的优先级最小
样式上有!important优先级最高
22 CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后一个元素
p:only-of-type 选择属于其父元素唯一的一个元素
p:only-child 选择属于其父元素唯一的一个子元素
p:nth-chlid(2)选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态
:checked 单选框或复选框被选中
23 position的值?
static 默认 不脱离文档流,按照正常文档流排序
absolute 绝对定位 参照离它最近的不是static的值的父元素的left right top bottom的位置进行定位
relative 相对定位,不脱离文档流,参照静态自身的left top right bottom进行定位
fixed 固定定位 参照可视窗口的位置对自己进行定位
24 css3中制作动画有几个属性?
animation 动画
transtion 过渡
transform 变形
25 常见的兼容性问题
在IE8及以下,如果a标签里面包含一个图片,图片外面会出现一层蓝圈
解决方法:设置border:none
如果一个标签加了float标签,又加了margin标签,在IE6的页面中,会出现双边距问题
解决方法:是指display:inline
图片与图片之间的间距问题
解决办法:使用float为img布局
不同浏览器的内补丁(padding)和外补丁(margin)不同
解决办法:使用*{padding:0,margin:0}
当标签的高度设置小于10px,在IE6,IE7中会超过自己设置的高度
解决办法:设置line-height小于设置的高度,或者overflow:hidden
26 伪元素选择器有哪些?
::selection 设置元素被选中的部分样式高亮显示
::first-letter 设置元素第一个字符的添加特殊样式
::first-line 设置元素第一行文本的样式