前端面试题系列
2015-09-08 13:23
483 查看
<!DOCTYPE>标签的定义与用法。
<!DOCTYPE> 声明必须位于 HTML 5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签； 它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）
2.块级元素和行内元素都有哪些？
内联元素(inline element)*
a - 锚点*
big - 大字体*
br - 换行*
cite - 引用*
code - 计算机代码(在引用源码的时候需要)
em - 强调* font - 字体设定(不推荐)*
i - 斜体*
img - 图片*
input - 输入框*
label - 表格标签*
select - 项目选择*
small - 小字体文本*
span - 常用内联容器，定义文本内区块*
strong - 粗体强调*
sub - 下标*
sup - 上标*
textarea - 多行文本输入框*
块级元素
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组*
form - 交互表单*
h1 - 大标题* h2
- 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题*
hr - 水平分隔线*
isindex - input prompt* menu - 菜单列表
ol - 排序表单*
p - 段落*
pre - 格式化文本*
table - 表格*
ul - 非排序列表可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。
button - 按钮*
3.你真的了解HTML吗
样式分离，标签使用，xhtml和html的区别（标签闭合）
4.css
hack技巧
百度百科：http://baike.baidu.com/link?url=k9_sexJW0BcTi8zGEQ07mr2rmbzg23sOy49DuHHDW4n1ycyBaaC7NJUPwPQbGba0dsGvCYq6eX1t5dpJNGNPy_#2
1：!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
以下为引用的内容：
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：
2：*
IE都能识别*；标准浏览器（如火狐）不能识别*
区别IE6与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7，IE6与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3：_
IE6支持下划线，IE7和firefox均不支持下划线
区别IE7，IE6与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/
4：*+html 与 *html
*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签
以下为引用的内容：
.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */
5.介绍ccss的盒模型
内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；
6.css层叠是什么，介绍一下
CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个color：black），就会产生冲突，而解决冲突的方案就是CSS选择器的权重，权重高的来覆盖权重低的。
另外，继承的属性是权重重最轻的，会被上面的四个定义方式覆盖。
7.css浏览器兼容问题
1. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
2.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{
display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
8.有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...
<!DOCTYPE> 声明必须位于 HTML 5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签； 它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）
2.块级元素和行内元素都有哪些？
内联元素(inline element)*
a - 锚点*
big - 大字体*
br - 换行*
cite - 引用*
code - 计算机代码(在引用源码的时候需要)
em - 强调* font - 字体设定(不推荐)*
i - 斜体*
img - 图片*
input - 输入框*
label - 表格标签*
select - 项目选择*
small - 小字体文本*
span - 常用内联容器，定义文本内区块*
strong - 粗体强调*
sub - 下标*
sup - 上标*
textarea - 多行文本输入框*
块级元素
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组*
form - 交互表单*
h1 - 大标题* h2
- 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题*
hr - 水平分隔线*
isindex - input prompt* menu - 菜单列表
ol - 排序表单*
p - 段落*
pre - 格式化文本*
table - 表格*
ul - 非排序列表可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。
button - 按钮*
3.你真的了解HTML吗
样式分离，标签使用，xhtml和html的区别（标签闭合）
4.css
hack技巧
百度百科：http://baike.baidu.com/link?url=k9_sexJW0BcTi8zGEQ07mr2rmbzg23sOy49DuHHDW4n1ycyBaaC7NJUPwPQbGba0dsGvCYq6eX1t5dpJNGNPy_#2
1：!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
以下为引用的内容：
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：
2：*
IE都能识别*；标准浏览器（如火狐）不能识别*
区别IE6与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7，IE6与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3：_
IE6支持下划线，IE7和firefox均不支持下划线
区别IE7，IE6与火狐
以下为引用的内容：
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/
4：*+html 与 *html
*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签
以下为引用的内容：
.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */
5.介绍ccss的盒模型
内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；
6.css层叠是什么，介绍一下
CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个color：black），就会产生冲突，而解决冲突的方案就是CSS选择器的权重，权重高的来覆盖权重低的。
另外，继承的属性是权重重最轻的，会被上面的四个定义方式覆盖。
7.css浏览器兼容问题
1. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
2.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{
display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
8.有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 程序员能看懂的笑话
- 最老程序员创业开发实训7---Cocoa Touch Framework实现Splash屏幕功能
- 面试题 20
- 黑马程序员—————Java基础--------正则表达式
- 剑指offer——面试题：47不用加减乘除做加法
- 面试题36数组中的逆序对
- 由一道腾讯面试题引发的关于递归函数使用的各种情况总结
- 剑指Offer:面试题3 二维数组中的查找
- 人事面试题目总结
- 剑指offer——面试题47：圆圈中最后剩下的数字
- Java面试题：如何对HashMap按键值排序
- Java程序员应该知道的10个调试技巧
- 面试题 19
- 黑马程序员——多线程+单例设计
- 【.Net码农】初试T4模板
- 一些面试常考知识点
- 二分查找，递归与非递归实现
- 面试题摘选
- OSChina 周二乱弹 —— 程序员如何转行卖烧烤
- 面试题 18