前端笔试题----html,css部分

HTML部分

1、常用浏览器测试兼容，有哪些内核？

　　IE、FireFox、Safari、Chrome、OperaPresto

　　使用的内核分别是Trident(IE内核)，Gecko,WebKit,WebKit,Presto

2、清除浮动哪些方法，比较好的方式是哪一种？

　　浮动：float，常用的css属性，可以设置左浮动float：left；右浮动float：right；不浮动float：none；

　　浮动会引起父容器塌陷，导致页面布局出错等问题。

　　常用清除浮动的几个方法：

1.父级div定义 伪类:after 和 zoom
代码：

<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
/清除浮动代码/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>

<div class="div1 clearfloat">

<div class="left">Left</div>

<div class="right">Right</div>
</div>

<div class="div2">
div2
</div>
原理：IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

2.父级div定义 overflow:hidden
代码：

<style type="text/css">
.div1{background:#000080;border:1px solid red;98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;98%}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>
</div>

<div class="div2">
div2
</div>
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

3.父级div定义 overflow:auto
代码：

<style type="text/css">
.div1{background:#000080;border:1px solid red;/解决代码/98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;98%}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>
</div>

<div class="div2">
div2
</div>
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器 会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

4.父级div定义 height
代码：

<style type="text/css">
.div1{background:#000080;border:1px solid red;/解决代码/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>
</div>

<div class="div2">
div2
</div>
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

5.结尾处加空div标签 clear:both
代码：

<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
/清除浮动代码/
.clearfloat{clear:both}
</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>

<div class="clearfloat"></div>
</div>

<div class="div2">
div2
</div>
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

第一个方式用途最广，第二个次之，以此类推。还有三个方法很不常用，基本不会用到。

3、box-sizing常用的属性有哪些？分别有什么作用？

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

4、介绍一下你对浏览器内核的理解？

浏览器分为shell和内核，浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

   　　四大主流浏览器内核分别为Trident、Gecko、Presto和Webkit。

       Trident：IE内核，这个浏览器内核是微软IE的排版引擎的名称，首次被应用于IE4。这个引擎被设计成一个软件组件，使其他软件开发人员很容易将网页浏览功能添加到他们自行开发的应用程序里，它的缺点是其对真正的网页标准支持不是很好，存在许多bug。它也有一定的局限性，那就是它只能被应用于Windows平台。

        Gecko：以Mozilla Firefox为代表的，它是一套由自由型开放源代码、以c++编写的排版引擎，它原本由网景通讯公司开发，现在由Mozilla基金会维护，它也是最流行的排版引擎之一，流行程度仅次于Trident。它提供了一个丰富的应用程序接口以供互联网相关的应用程序使用，其缺点是消耗内存资源多。它不像Trident那样局限，它可以跨平台在Windows、Linux、MacOS上都可以使用。

        Presto：Opera浏览器内核，它是由Opera Software开发的网页浏览器排版引擎，它实际上是一个动态内核，它的特点是渲染速度的优化达到了极致，它是目前公认网页浏览速度最快的浏览器内核，而代价是牺牲了网页的兼容性。它的不足之处是它是一个商业引擎，在很大程度上限制了它的发展。它同样可以跨平台使用。

        Webkit：苹果Safari，Chrome浏览器内核，它是一个开放源代码的浏览器引擎，它是一种用来让网页浏览器绘制网页的排版引擎，被用于苹果的Safari。其优点是有清晰的源码结构，渲染速度快，缺点是兼容性不好。

5、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区别HTML和HTML5?

主要是关于图像、位置、存储，多任务等功能的添加

拖拽释放（drag and drop）API

语义化更好的内容标签（header, nav, footer,aside,article,section）

音频、视频API（audio，video）

画布（Canvas）API

地理API（Geolocation）API

本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失

sessionStorage的数据在浏览器关闭后自动删除

表单控件，calender、date、time、email、url、search

新的技术webworker 、websocket、Geolocation

移除的元素

　　纯表现的元素：basefont，big，center，font，s，strike，tt，u

　　对可用性产生负面影响的元素：frame，frameset，noframes