对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距：
1.如果父元素的上外边距大于子元素上外边距，此时子元素在父元素中并没有上外边距而是被父元素的上外边距包含住了这个叫做嵌套关系块元素上外边距合并。
2.如果父元素的上外边距小于子元素的上外边距，此时子元素在父元素中也没有上外边距而是作用到父元素的上外边距了这个叫做嵌套关系块元素上外边距塌陷。
2.3 解决方案： 1.给父元素添加：overflow: hidden; 2.给父元素设置伪类，用标签隔开防止塌陷(推荐).div: before{
content: "";
display: table;//使用空的table标签可以隔离父子元素的外边距，阻止外边距重叠塌陷。
}
3.css引入页面的方式有几种，使用link和@import有什么区别？
3.1 有三种
行内样式
内部样式
外部样式
@import方式导入
@import "";
3.2 link和@import有什么区别
link同时加载内容和样式，@import先加载HTML，再加载css
link可以引入除css外其他内容，@import只能引入css
JavaScript操作DOM只能操作link引入的css
@import会增加页面的http请求
link没有兼容性，@import有兼容性(IE5以上支持)
4.介绍一下你对浏览器内核的理解？
4.1 引擎的区别
浏览器内核就是渲染引擎。
主要有两种引擎：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| ie | Trident | |
| Chrome | blink | 以前是webkit,现在是blink,blink是webkit的分支，国产浏览器新版本是blink内核 |
| firefox | Gecko | |
| Safari | webkit | webkit的鼻祖是Safari |
| Opera | blink | 最初是自己的Presto内核，后来是webkit，现在跟随谷歌用bink |
| 浏览器 | 内核 |
|---|---|
| 2345浏览器，360浏览器，猎豹浏览器 | ie + Chrome双内核 |
| 百度，世界之窗 | ie内核 |
| 搜狗浏览器，遨游，qq浏览器 | Triend（兼容模式） + webkit（高速模式） |
特别注意：在form表单中，被display: none; 或 被 visibility: hidden；设置的表单里面有值依然可以被提交
8.1 占用空间问题 display: none; 是彻底消失，不再文档流中占位，浏览器不会解析该元素。 visibility: hidden; 是隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，在文档流中占位，浏览器会解析该元素，仍然会影响布局。 opacity: 0; 和visibility: hidden; 一样还是会占用页面空间的。 8.2 子元素是否显示问题 display: none; 被设置后的元素的子元素也不会被显示出来。 visibility: hidden; 被设置后的元素的子元素可以设置visibility: visible; 显示出来。 opacity: 0; 被设置后和display一样子元素是完全透明。 8.3 是否产生回流问题 display: none; 切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流） visibility: hidden; 不会引起回流。 opacity: 0; 不会引起回流。 8.4 是否可以相应事件 display: none：不会被绑定到事件的，因为它不占用任何空间，不显示在文档流中。 visibility: hidden：无法触发自身绑定的事件，但可以在冒泡阶段响应事件。 opacity: 0; 可以给元素绑定事件。 8.5 遮挡住其他元素，是否影响其他元素事件触发 display: none：不会影响其他元素事件，因为完全不在页面中存在了。 visibility: hidden：不会影响其他元素事件，因为元素已经设置为完全不可见了，所以也没有影响。 opacity: 0：会影响其他元素事件，因为元素只是被设置为透明的了，但是并没有消失。 9.常见浏览器兼容问题浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况
9.1 CSS Hack我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack。
CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。
即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里边的代码
你想要执行的代码
你想要执行的代码
你想要执行的代码
9.3 CSS属性前缀法
给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 “\9”，IE6不能识别!important，FireFox不能识别 * _ \9。
可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6
.type{
color: #111; /* all */
color: #222\9; /* IE */
*color: #333; /* IE6/IE7 */
_color: #444; /* IE6 */
}
所以可以按着优先级就能给特定的版本捎上特定颜色
可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6
.type{
color: #111; /* all */
color: #222\9; /* IE */
*color: #333; /* IE6/IE7 */
_color: #444; /* IE6 */
}
说明：在标准模式中：
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
9.4 选择器前缀法
1、最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善。
2、IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行
①.给float元素添加display：inline 即可正常显示
②就是hack处理了
3、上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合
4、有些浏览器解析img标签也有不同，img是行内的，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距，解决办法是给它来个浮动 float 。
5、很多时候可能会纳闷超链接访问过后 样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A。
6、chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：
-webkit-text-size-adjust: none;
7、png24位的图片在IE6下面会出现背景，所以最好还是使用png8格式的。
10.列举IE 与其他浏览器不一样的特性？ IE支持currentStyle，Firefox使用getComputStyle; IE使用innerText，FireFox使用textContent； 滤镜方面： IE：filter:alpha(opacity= num)； Firefox：-moz-opacity:num； 事件方面：IE：attachEvent：火狐是addEventListener； 鼠标位置：IE是event.clientX；火狐是event.pageX； IE使用event.srcElement；Firefox使用event.target； IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none； 11.cssSprite是什么 ？CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
12.有什么优缺点？其优点在于：
1）减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2）减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
3）减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
4）更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：
1）图片合成比较麻烦；
2）背景设置时，需要得到每一个背景单元的精确位置，；
3）维护合成图片时，最好只是往下加图片，而不要更改已有图片，这样图片字节数就会增加。
分成：
结构层 结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 表示层 表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 行为层 行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。 14.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？css3新增的伪类有哪些？ 14.1 css选择器有哪些 标签选择器 id选择器 类选择器 相邻兄弟选择器（h1+p） 子代选择器（ul>li） 后代选择器（li a） 属性选择器（a[rel=“external”]） 伪类选择器（a：hover，li：nth-child） 全局选择器（*） 14.2 哪些属性可以继承 可以继承的样式：font-size, font-family, color, text-indent（等字体类样式） 不可继承的样式：border, padding, margin, width, height 14.3 优先级算法如何计算 在同权重性的选择器下 优先级就近原则； 有多个相同的选择器，后面的会覆盖掉前面的。 选择器权限| 选择器 | 选择器权重 |
|---|---|
| 继承 ，* ，子选择器，相邻选择器 | 0,0,0,0 |
| 标签选择器，伪元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器（包括结构伪类），属性选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式选择器 | 1,0,0,0 |
| !important 重要的 | 无穷大 |
元素的每个元素。
::selection ::selection 选择被用户选取的元素部分
:empty p:empty 选择没有子元素的每个
元素（包括文本节点）
15.描述css reset的作用和用途 每个浏览器都有自带的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致； 为了页面的兼容性，需要重置css代码覆盖浏览器默认的样式来统一样式。 16.HTML5 存储类型有哪些，以及与他们的区别HTML 5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。
有两种不同的对象可用来存储数据：
| 属性 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
1.document.wirte
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
2.document.innerHTML
innerHTML则是DOM页面元素的一个属性，可以用来读、写给定元素里的HTML内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
3.innerText
获取从起始位置到终止位置的内容,但它去除Html标签。
火狐浏览器不支持该标签，但所有浏览器都支持 innerHTML标签。
总结：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。
write会导致页面重新绘制，而且性能略低于innerHTML,所有推荐使用innerHTML.
20.请说出至少三种减少页面加载时间的方法。（加载时间是指感知的时间或者实际加载的时间） 优化图片 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 优化CSS（压缩合并css，如margin-top,margin-left…) 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） 减少http请求（合并文件，合并图片）。 21.实现 class为test的div 在屏幕宽为400以下的宽度为200，屏幕宽为400~800的情况下宽 度为350；
/*在屏幕宽为400以下的宽度为200*/
@media screen and (max-width: 400px) {
.test{
width: 200px;
}
}
/*屏幕宽为400~800的情况下宽 度为350*/
@media screen and (max-width: 800px) and (min-width: 400px) {
.test{
width: 350px;
}
}
22.实现当屏幕宽度大于700,小于800时引用外部样式style-7-9.css
23.HTML5中input的6个新属性
color：定义调色板
tel：定义包含电话号码的输入域
email：定义包含email地址的输入域
url：定义包含URL地址的输入域
search：定义搜索域
number：定义包含数值的输入域
range：定义包含一定范围内数字值的输入域
date：定义选取日、月、年的输入域
month：定义选取月、年的输入域
week：定义选取周、年的输入域