一些面试题目的总结

Doctype?严格模式与混杂模式-如何触发这两种模式？区别他们的意义？

Doctype是文档类型，用于说明web浏览器使用的xhtml或者是html的版本类型，将以何种版本进行编译的指令。浏览器根据doctype是否存在或者是使用何种dtd来决定是什么模式。意义是决定浏览器渲染网站（用何种规范去解析网页）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素：a, code, lable, img, input, span, small, b等。块级元素：div, h1~h6, p, table, ul, ol, pre等。可变元素：button, iframe, ins等。注意：块级元素可以设置padding和margin，但是行内元素在水平方向上产生边距效应，但是垂直方向上没有效果(水平方向上有效，垂直方向上无效)。 CSS模型是内容(content)、填充(padding)、边框(border)、边界(margin)组成，主要用于块级元素，默认的width和hight是auto（自适应）。

CSS引入的方式有哪些？link与@import的区别？

引入的方法，行内式：直接在标签的style属性里面设置（不推荐）。嵌入式：存在网页的head标签之间的style标签对中（适合简单的网页）。导入式：将一个单独的.css文件引入到HTML中同嵌入式的位置相同，@import url(文件地址);先装载整个网页，再装载CSS文件，可能会出现先显示无样式的页面，闪烁一下后再显示样式。链接式：也是存在于标签对中使用标记来引入外部样式表，，在网页主体装载前装载CSS文件。

CSS的选择器？那些属性可以继承？优先级算法如何计算？内联和import那个优先级高？

CSS的选择器有基础选择器：通用选择器 ””匹配所有的元素{margin：0;padding:0;} 标签选择器 ”E”匹配所有标签元素 p{font-size:2px;}类选择器 “.” 匹配所有class属性中包含特定名称的元素.myClass { background:#f00}（选择包含类名为myClass的所有元素）。id选择器”#” 匹配所有具有特定id的元素。多元素选择器：E,F 匹配所有的E元素或者是F元素。后代选择器：E F表示E元素后面的F元素。子元素选择器：E > F表示E元素后面的所有的F元素.毗邻元素选择器E + F 匹配E元素后面的所有同等级元素。请参考http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html

前端页面有那三层构成？分别是什么？作用是什么？

结构层(HTML)：架构网站的骨架，网页文档包含有哪些标签和内容。表现层( CSS)：定义网页文档的外观视觉如何展现。行为层(Javascript)：网页中的元素具有怎样的行为动作。

CSS的基本语句构成是？

每一条样式规则可以看做是一条CSS基本语句，每条规则包含一个选择器（如body，div等）和写在花括号里面的声明，这些声明由属性与值组成，选择器{ 属性1:值1; 属性2:值2;…… }

你的页面测试的一般用哪些浏览器测试？这些浏览器的内核是什么？经常遇到的兼容性问题是什么？为什么会出现？解决方案是什么？

IE内核：360、IE、遨游、搜狗、QQ浏览器

非IE浏览器：Firefox、Opera、Safari、chrome

(1) IE6在使用float时候的双边距问题，解决方案是：在css中用display:inline;。

(2) 文字本身大小不兼容（不同浏览器默认占空间不同），解决：设置文字的line-height。

(3) Firefox只要限定容器高度height，容器边框不会被内容撑大，但是IE是自动适应的，解决：不要轻易设置容器的高度height。

(4) 如果float容器未定义高度，Firefox会尽可能撑开宽度，而IE则优先考虑换行，解决：内容可以撑破的容器要设置宽度width。

如何居中一个浮动元素？


你有没有关注CSS3和HTML5 ,请简要说明你对他们的了解情况！

增加了一些属性如CSS中的高级选择器，border-radius(圆角框)RGBa色彩和透明度设计等http://club.topsage.com/forum.php?mod=viewthread&tid=2494157

HTML中的代替以前的div中一部分功能，将一些功能明确的模块分离出来footer、header、nav(导航)、article(文章)、aside、音频audio、视频(video)、画布(Canvas)API等：http://www.yixieshi.com/ucd/9859.html。

如何管理一个访问量很高的大型网站的CSS文件，JS文件和图片？

把所有的CSS文件都放入一个样式表中,通过把所有的脚本放到一个文件中来减少HTTP请求的方法。 js文件也采用同样的方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分。

你对前端界面工程是这个职位是怎样理解的？它的前景如何？

(1). 与交互设计师、视觉设计师协作，根据设计图完成页面制作。

(2). 维护及优化网站前端性能。前景:长期以来，国内前端开发在整个软件开发行业内占得比重较小，发展较晚。网站也多倾向于赢利最大化而轻视用户体验。前后端比例悬殊大。近几年来，随着以用户为中心的思想普及发展。前端开发呈现出强劲的发展态势，前端开发人员在项目中的重要性日益突出。前端开发人员呈现出严重的人员短缺现象。

块级元素（Block element）

简单的说就是元素显示为矩形区域或者是圆角矩形区域（CSS3），默认情况下块级元素会是占据一行（不会出现并列显示），块级元素都可以定义自己的高度和宽度。常见的元素有div、h1-h6、p、table和ul。

内联元素（inline element）

基于语义级的基本元素，表现为行内布局的形式。任何不是块级元素的可见元素都可以统称为内联元素。内联元素犹如水，居无定所，随行移动，嵌入行内，不会排斥其他同行元素，没有自己的形状，不能定义高度和宽度。会随着内容的变化而变化。常见的内联元素有span、img、a等。

元素div（division分割）

可以用div实现网页的总体布局。

元素span（范围）

是常见的内联元素，无明确语义，但可以作为文本挥着内联元素的容器。

元素h1-h6(header)

序号越大，字题越小，常见的块级元素

元素p（paragraph）

段落一词的缩写，用来设置段落。每个文段默认状态下定义了上下边界，不同浏览器会有不同却别。

ul、ol、li、dl、dt、dd（块级元素）

上面的元素用来实现项目列表,

li是item in a list短语的缩写，表示列表中的项目。

ol是order list短语的缩写，表示顺序的列表

ul是unordered list短语的缩写，表示无顺序的列表

dl是definition list短语的缩写，表示定义列表

dt是definition term短语的缩写，表示定义列表标题

dd是definition in a definition list短语的缩写，表示列表项

table tr td（块级元素）

用来实现表格化数据显示。

table 用来表示表格，定义数据表格的包含框。而td用来数据表数据中的显示样式。

tr 是a row in a table短语的缩写，表示是表格的一行。

td 是a diamonds in a table 短语的缩写，表示表格中的一个方格。

position的值与其用法？

(1).absolute(绝对定位) 脱离了文本流（即在文档中已经不占据位置），absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的(图1)，当设定TRBL值后则根据浏览器的左上角作为原始点(图2)。



(2). relative（相对定位）相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。



蓝色的div相对于红色（原来位置）向上移动20px。

(3).static(静态定位)，如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他值。

(4) fixed(固定定位), 元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

(5) inherit(继承定位)，规定应该从父元素继承 position 属性的值。

(6) initial(还原定位)，initial的作用是把属性设置回默认值。

2.display的值与用法？

(1)none此元素不会被显示。

(2)block此元素将显示为块级元素，此元素前后会带有换行符。

(3)inline属性默认值，此元素会被显示为内联元素，元素前后没有换行符。

(4)inherit规定应该从父元素继承 display 属性的值。

(5) table此元素会作为块级表格来显示（类似
），表格前后带有换行符。

(6) inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。