前端html5+css3面试题（自己会背的就没带答案）

1,3类标签特点以及分类：
块级：div p ul li ol dl dt dd h1-h6
行级span i em b strong sub sup
行块：img input
2：定位实现居中的两种方式：
3，浮动产生的问题以及清浮动方案：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素

4，css盒模型：
5，
6，哪些css属性可以继承：
字体系列属性：
　　font-family：字体系列
　　font-weight：字体的粗细
　　font-size：字体的大小
font-style：字体的风格
line-height：行高
文本系列属性
　　text-indent：文本缩进
　　text-align：文本水平对齐
color：文本颜色
list-style属性
6,选择器优先级以及计算方式
7,单行文本如何垂直水平居中
8,引入css的三种方式
9，常见表单元素有哪些？
input:标签用于搜集用户信息
textarea：标签定义多行的文本输入控件
select：定义一个下拉列表，里面用option定义下拉列表中的选项。
10,简述HTML中Doctpye的作用？
Doctype是一条声明，而不是一个标签；也可以把它叫做“文档类型声明”，或简称为“DTD”。

决定浏览器渲染方式 :告知浏览器当前的HTML或XML是哪一个版本。 :用HTML5的doctype声明文件包含HTML5标记。

11,如何合并表格单元格？rowspan跨行，colspan跨列
12，语义化的理解？
用合适的标签和特有的属性去格式化文档。
易于开发和维护
用户体验比较好
基于SEO,易于爬虫抓取关键字，和搜索引擎建立良好的沟通。
13，精灵图的原理及优缺点：
英文叫法是css sprites,通常被解释为“CSS图片拼合”或“CSS贴图定位”；就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS
“background-image””background-repeat””background-poisition”的组合进行背景定位，background-poisition用数字能精确的定位出背景图片的位置，适用于一般小图标，不适合大背景大布局。
优点：减少网页的http请求，从而大大提高页面的性能
减少图片命名上的困扰
更换风格方便
缺点：必须要限定容器大小符合背景图元素位置，需要计算。
14，等高布局、圣杯布局、双飞翼布局的实现原理？
等高布局：
方法一：
给子盒子设置
padding-bottom:9999px和margin-bottom:-9999px;
利用内外边距相抵消，父盒子设置overflow:hidden;
方法二：
利用内容撑开父元素的特点，给每一列添加相对应的容器。并进行相互嵌套，并在每个容器中设置背景色（有多少列就设置多少个容器，这里有三列，就设置三个容器）
圣杯布局：
按照中间，左，右的方式排列盒子
将三者都左浮动，
中间盒子设置宽度100%，左右都分别设置固定宽度
此时中间盒子占满了，就给left加margin-left:-100%,把left拉到最左边，给right加上margin-left:负自身的宽度。
把左右盒子拉到对应位置之后，就会覆盖中间盒子的左右两侧内容，所以给父盒子设置左右padding值，大小为盒子对应的固定宽度。
因为左右盒子会随着设置的padding值被拉到中间，所以用相对定位left:-200px和right:-220px。把左右盒子还原回去。
缺点：当中间部分小于左侧部分时，布局会发生混乱。
双飞翼布局：前面的和圣杯布局一样，不同之处是圣杯布局加padding，双飞翼布局给中间盒子加子盒，然后给子盒设置margin-left:左边盒子的宽度。margin-right:右边盒子的宽度。
优点：当缩放页面一直缩小时，就算缩小到中间部分为0，盒子也不会变形。缺点是中间盒子多些了一层标签。

15，说说常见的浏览器兼容问题：
（1）在ie8中的图片边框问题
解决方法：img{
border:none;
}
（2）ie8中的背景复合属性写法问题

.bg{
background:url(“images/bg.jpg”) no-repeat center
}
在标准浏览器中均能显示背景图片，但是在ie8中图片显示异常。
解决办法：在url和no-repeat之间加空格。
（3）在ie6及更早版本浏览器中，定义小高度的容器。