前端试题

最新推荐文章于 2021-11-03 15:43:37 发布

Claire_ljy

最新推荐文章于 2021-11-03 15:43:37 发布

阅读量589

点赞数

文章标签：前端 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/huhaibo/p/3618386.html

版权

1、请实现页面布局，包括页头、内容区域、页脚三部分，其中内容区域为左右分栏，左栏定宽200px、右栏自适应宽度。

知识点 CSS中position属性的应用：

position:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是属于什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。

absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。（left,top,bootom,right）进行规定。

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。（left top rigt bottom）

relative:生成相对定位，相对于其正常位置进行定位。（left:20表示向元素的LEFT位置添加20像素）

static 默认没有定位

<!DOCTYPE HTML>
<html lang="ch-ZN">
<head>
<meta charset="utf-8">
<title>页头中间分栏页脚</title>
<style>
    html,body,header,footer{width:100%;padding:0px; margin:0px;}
    header,footer{background: red;}
    #main{padding-left:200px;}
    #left{width:200px;position:absolute;left:0px;background: green;}
    #right{width:100%;background: yellow;} 
</style>
</head>
<body>
<header> 我是页头
</header>
<div id="main">
<div id="left">我是左边</div>
<div id="right">我是右边</div>
</div>
<footer>我是页脚
</footer>
</body>
</html>

转载自（http://witmax.cn/css-layout-1.html）

最近发现阿里巴巴的Web前端开发面试题，共分三部分：CSS部分，JavaScript部分，紧急处理部分，分享给大家做个参考～

第一部分：用CSS实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

请使用CSS控制3个div，实现如下图的布局。

本题主要考察三个方面，1. IE6 的 3 像素 BUG；2. 清楚浮动；

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>布局</title>
 6     <style>
 7         div{background:#CCCCCC;}  
 8         #first{float:left;width:100px; height:150px}  
 9         #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}  
10         #third{zoom:1; width:200px;margin-left:110px;margin-left:107px; height:310px} 
11 </style>
12 </head>
13 <body>
14 
15     <div id="first"></div>
16     <div id="second"></div>
17     <div id="third"></div>
18 </body>
19 </html>

float:

loat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

clear:

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

点评：这里我们介绍一下CSS中的Zoom属性，这个属性一般不为人知，甚至有些CSS手册中都查询不到

其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

Zoom的使用方法：

zoom : normal | number

normal :　默认值。使用对象的实际尺寸

number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：

复制代码

代码如下:

.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}

_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里
overflow:hidden;和_zoom:1;是连起来用的，作用是清除border内部浮动。

同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。

CSS中zoom:1的作用

兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：
触发IE浏览器的haslayout
解决ie下的浮动，margin重叠等一些问题。
比如，本站使用DIV做一行两列显示，HTML代码：

复制代码

代码如下:

<div class="h_mainbox">
<h2>推荐文章</h2>
<ul class="mainlist">
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li>
</ul>
</div>

CSS代码：

复制代码

代码如下:

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}
.h_mainbox h2 span { float:right; font-weight:normal;}
.h_mainbox ul { padding:6px 0px; background:#fff;}
.mainlist { overflow:auto; zoom:1;}
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常显示效果了。

css中的zoom的作用

1、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

　　2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

　　3、模块确认法
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

　　4、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

　　5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读蓝色上的转帖）
快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

　　6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^
最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ，生活越来越美好。

第二部分：用javascript优化布局

由于我们的用户群喜欢放大看页面

于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，

并且其他的区块仍然固定不动。

提示：

也许，我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码，包括曾经你自己写的。

关键字：javascript、封装、复用

惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；

所以样式改成了这样

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>页头中间分栏页脚</title>
 6 <style>
 7 body{ margin:0; padding:0}  
 8 div{background:#CCCCCC; position:absolute}  
 9 #first{width:100px; height:150px}  
10 #second{top:160px;width:100px;height:150px}  
11 #third{ width:200px; height:310px; left:110px}
12    
13    
14 </style>
15 </head>
16 <body>
17 
18     <div id="first"></div>
19     <div id="second"></div>
20 
21     <div id="third"></div>
22 <script type="text/javascript">
23         function zoom(id,x,y){
24          // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）  
25          var obj=document.getElementById(id); // 获取元素对象值  
26         var dW=obj.clientWidth; // 获取元素宽度  
27         var dH=obj.clientHeight; // 获取元素高度  
28         //var oTop=obj.offsetTop;  
29         //var oLeft=obj.offsetLeft;  
30         obj.onmouseover=function(){ // 鼠标移入  
31             this.style.width=dW*x+"px"; // 横向缩放  
32             this.style.height=dH*y+"px"; // 纵向缩放  
33             this.style.backgroundColor="#f00"; // 设置调试背景  
34             this.style.zIndex=1; // 设置z轴优先  
35         }  
36         obj.onmouseout=function(){ // 鼠标移出，设回默认值  
37             this.style.width="";  
38             this.style.height="";  
39             this.style.padding="";  
40             this.style.backgroundColor="";  
41             this.style.zIndex="";  
42         }  
43 }  
44         zoom("first",1.25,1.25);  
45         zoom("second",1.25,1.25);  
46         zoom("third",1.25,1.25); 
47 </script>
48 
49 </body>
50 </html>

第三部分：处理紧急情况

好了，我们的页面完成了。

于是我们将页面发布上网。

突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？

面试题到此为止，你是否能够对答如流呢，仔细想一下，然后在翻页看一下答案。

第三题也许是JS代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面地址出错了。

这种情况下，先查看页面的源代码，看看有没有什么问题，然后找后台技术人员，看是不是服务器或技术方面的问题。

（个人认为 1 自己所输的路径是否错误，查看源代码看看有没有代码没写好导致浏览器无法加载出页面，js代码是否正确加载，这些都查看正确之后找后台人员看是不是服务器问题还是路径问题。）

以下为Web前端开发笔试题集锦之HTML/CSS篇，移步Javascript篇

1，让一个input的背景颜色变成红色

 
    
         < 
         input 
         type 
         = 
         "text" 
         style 
         = 
         "background:red;" 
         /> 
        
 
  

2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域

div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域.思路：
(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;
(position:absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。)
(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条
(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->
(overflow:元素内容溢出元素框时如何呈现。visible,hidden,scroll,auto)不让浏览器产生滚动条，避免页面出现两个滚动条
(5)编写JavaScript，令div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px
（z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明该属性设置一个定位元素沿 z 轴的位置轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远）

 1 <!DOCTYPE HTML>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>前端试题</title>
 6     <style>
 7     
 8     html,body{height:100%;width:100%;margin: 0px;padding: 0px;overflow: hidden;}
 9     #fullDiv{width:100%;height: 100%;position: absolute;left:0px;top:0px;background: #eee;border: 1px solid red;}
10     #mainDiv{width: 100%;height: 100%;overflow: auto;z-index:999;position: absolute;top: 0px;left: 0px;}
11     #innerDiv{height: 1000px;border:1px solid black;background: #ee0;position: absolute;}
12 
13 
14 
15     </style>    
16 </head>
17 
18 <body>
19     <div id="fullDiv"></div>
20     <div id="mainDiv">
21         <div id="innerDiv">
22         </div>
23     </div>
24     <script >
25         function getBrowerSize(){
26             if(document.compatMode=="BackCompat"){
27                 cWidth=document.body.scrollWidth;
28                 cHeight=document.body.scrollHeight;
29             }else{
30                 cWidth=document.documentElement.scrollWidth;
31                 cHeight=document.documentElement.scrollHeight;
32             }
33             return {width:(cWidth-21)+"px",height:(cHeight-4)+"px"};
34         }
35 
36         var floatDiv=document.getElementById("fullDiv");
37         var size=getBrowerSize();
38         floatDiv.style.height=size.height;
39         floatDiv.style.width=size.width;
40 
41 
42         
43     </script>
44 
45 
46 
47     
48 </body>
49 </html>

js中的文档模式-document.compatMode

Posted on 2009年08月13日 by 愚人码头

今天在看框架的时候无意间看到了document.compatMode，经过一番资料查找，终于搞懂了。

文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth；CSS1Compat：标准兼容模式开启。浏览器客户区宽度是document.documentElement.clientWidth。

那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：

[code="javascript"]

if (document.compatMode == "BackCompat") {
   cWidth = document.body.clientWidth;
   cHeight = document.body.clientHeight;
   sWidth = document.body.scrollWidth;
   sHeight = document.body.scrollHeight;
   sLeft = document.body.scrollLeft;
   sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
   cWidth = document.documentElement.clientWidth;
   cHeight = document.documentElement.clientHeight;
   sWidth = document.documentElement.scrollWidth;
   sHeight = document.documentElement.scrollHeight;
   sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
   sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

[/code]

参考网址：http://hi.baidu.com/%C9%AE_%CC%C6/blog/item/a323a9df5a67c45d95ee3701.html

3，IE、FF下面CSS的解释区别

（1）让页面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的设置+text-align:center

（2） ff：不支持滤镜

ie：支持滤镜

（3） ff：支持!important

ie支持*，ie6支持_

（4） min-width,min-height

FF支持，IE不支持，IE可以用css expression来替代

（5） Css Expression

FF不支持，IE支持

（6） cursor：hand

IE下可以显示手指状，FF下不行

（7） UL的默认padding和margin

IE下ul默认有margin，FF下ul默认有padding

（8） FORM的默认margin

IE下FORM有默认margin，FF下margin默认为0

4，一个定宽元素在浏览器（IE6，IE7，Firefox）中横向居中对齐的布局，请写出主要的HTML标签及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)

贴出代码：

 
    
         <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "< 
         a 
         href 
         = 
         "http://www.w3.org/TR/html4/loose.dtd" 
         >http://www.w3.org/TR/html4/loose.dtd</ 
         a 
         >"> 
        
 
         < 
         html 
         > 
        
 
         < 
         head 
         > 
        
 
         < 
         meta 
         http-equiv 
         = 
         "Content-Type" 
         content 
         = 
         "text/html; charset=UTF-8" 
         /> 
        
 
         < 
         title 
         >让页面元素居中（兼容各个浏览器）</ 
         title 
         > 
        
 
         < 
         style 
         > 
        
 
         html,body{width:100%;height:100%;margin:0px;padding:0px;} 
        
 
         .centerAlign {margin-left:auto;margin-right:auto;text-align:center;width:400px;height:100px;border:1px solid red;} 
        
 
         </ 
         style 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
         < 
         div 
         >this div will be centerd!</ 
         div 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
  

5，CSS中margin和padding的区别

margin是元素的外边框，是元素边框和相邻元素的距离

Padding是元素的内边框，是元素边框和子元素的距离

6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。

思路：

（1）布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择

（2）编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指

贴出代码

 
    
         < 
         HTML 
         > 
        
 
         < 
         HEAD 
         > 
        
 
         < 
         META 
         http-equiv 
         = 
         'Content-Type' 
         content 
         = 
         'text/html; charset=utf-8' 
         > 
        
 
         < 
         TITLE 
         >可输入的下拉框</ 
         TITLE 
         > 
        
 
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
 
              
         .container {position:relative;margin:10px;} 
        
 
              
         .container .sel {width:120px;} 
        
 
              
         .container .input {width:100px;height:20px;position:absolute;} 
        
 
         </ 
         style 
         > 
        
 
         </ 
         HEAD 
         > 
        
 
         < 
         BODY 
         > 
        
 
         < 
         div 
         > 
        
 
              
         < 
         input 
         type 
         = 
         "text" 
         id 
         = 
         "input" 
         ></ 
         input 
         > 
        
 
              
         < 
         select 
         id 
         = 
         "sel" 
         > 
        
 
                  
         < 
         option 
         value 
         = 
         "选项1" 
         >选项1</ 
         option 
         > 
        
 
                  
         < 
         option 
         value 
         = 
         "选项2" 
         >选项2</ 
         option 
         > 
        
 
                  
         < 
         option 
         value 
         = 
         "选项3" 
         >选项3</ 
         option 
         > 
        
 
                  
         < 
         option 
         value 
         = 
         "选项4" 
         >选项4</ 
         option 
         > 
        
 
              
         </ 
         select 
         > 
        

            
        
 
         </ 
         div 
         > 
        
 
         < 
         script 
         type 
         = 
         "text/javascript" 
         > 
        
 
              
         var sel = document.getElementById("sel"); 
        
 
              
         var input = document.getElementById("input"); 
        
 
              
         sel.onchange = function() { 
        
 
                  
         input.value = this.value; 
        
 
              
         } 
        
 
         </ 
         script 
         > 
        
 
         </ 
         BODY 
         ></ 
         HTML 
         > 
        
 
  

7，<img>中alt和tittle的区别

alt：图片显示不出来了就提示alt

title：鼠标划过图片显示的提示

8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。

 
    
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
 
         < 
         html 
         xmlns 
         = 
         "http://www.w3.org/1999/xhtml" 
         > 
        
 
         < 
         head 
         > 
        
 
         < 
         meta 
         http-equiv 
         = 
         "Content-Type" 
         content 
         = 
         "text/html; charset=gb2312" 
         /> 
        
 
         < 
         title 
         >双列布局，右侧定宽</ 
         title 
         > 
        
 
         < 
         style 
         > 
        
 
             
         html,body{width:100%;height:100%;margin:0px;padding:0px;} 
        
 
             
         #left {background:#F00; width:100%;position:absolute;padding-right:-200px;} 
        
 
             
         #right {background:#0F0; width:200px;position:absolute;right:0px;} 
        
 
             
         div {height:100%;} 
        
 
         </ 
         style 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
             
         < 
         div 
         id 
         = 
         "left" 
         ></ 
         div 
         > 
        
 
             
         < 
         div 
         id 
         = 
         "right" 
         ></ 
         div 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
  

9，解释document.getElementById(“ElementID”).style.fontSize=”1.5em”

em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被指定，则相对于浏览器的默认字体尺寸。

该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍

10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？

DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来

DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。

严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模式都支持，但是IE5只支持混杂模式。

可那个过DOCTYPE声明来判断哪种模式被触发

（1）没有DOCTYPE声明的网页采用混杂模式解析

（2）对使用DOCTYPE声明的网页视不同浏览器进行解析

（3）对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析

（4）在ie6下，如果在DOCTYPE声明之前有一个xml声明比如

<?xml version=”1.0” encoding=”utf-8”?>，采用混杂模式解析，在IE7，IE8中这条规则不生效。

(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：

<!-- STATUS OK -->

区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。

常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的是边框，包围边框的是外边距。内边距，外边距，边框默认为0。

11，CSS引入的方式有哪些? link和@import的区别?

引入css的方式有下面四种

（1）使用style属性

（2）使用style标签

（3）使用link标签

（4）使用@import引入

Link和@import区别：

（1） link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS外，还可以做很多事情，如定义RSS，rel连接属性等；@import只能加载CSS

（2）加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引用的CSS会等到页面完全下载完之后才会加载

（3）兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列的浏览器IE5以上才能识别，而link没有这个问题

使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，@import不可以被DOM操作。

12，如何居中一个浮动元素?

一个浮动元素里面包含的元素可以水平居中，原理如下：

让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中

垂直居中类似，不过操作的不是left而是top

贴出代码：

 
    
         <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
        
 
         < 
         html 
         > 
        
 
         < 
         head 
         > 
        
 
         < 
         meta 
         http-equiv 
         = 
         "Content-Type" 
         content 
         = 
         "text/html; charset=UTF-8" 
         /> 
        
 
         < 
         title 
         >让浮动元素居中</ 
         title 
         > 
        
 
         < 
         style 
         > 
        
 
         html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} 
        
 
         .container {width:100%;height:100%;position:relative;} 
        
 
         .left {width:400px;height:400px;background:#00F;float:left;position:relative;left:50%;top:50%;} 
        
 
         .left div {position:relative;left:-50%;top:-50%;background:#F00;width:100%;height:100%;} 
        
 
         .clear {clear:both;} 
        
 
         </ 
         style 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
         < 
         div 
         > 
        
 
         < 
         div 
         >< 
         div 
         >这是一个浮动的元素</ 
         div 
         ></ 
         div 
         > 
        
 
         < 
         div 
         ></ 
         div 
         > 
        
 
         </ 
         div 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
  

13，HTML5和CSS3的了解情况

有所了解

HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也开发出了不少基于他们的应用。

HTML5相对于原来的HTML规范有一些变化：

（1）DOCTYPE更简洁

（2）新增了一些语义化标签，如article,header,footer,dialog等

（3）新增了一些高级标签，如<vedio>,<audio>,<canvas>

CSS3相对于CSS2也新增了不少功能

（1）选择器更加丰富

（2）支持为元素设置阴影

（3）无需图片能提供圆角

14，你怎么来实现下面这个设计图

（1）切图

（2）布局，采用两栏布局，分别左浮动

（3）编写css代码

贴出代码：

 
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "< 
          a 
          href 
          = 
          "http://www.w3.org/TR/html4/loose.dtd" 
          >http://www.w3.org/TR/html4/loose.dtd</ 
          a 
          >"> 
         
          < 
          html 
          > 
         
          < 
          head 
          > 
         
          < 
          meta 
          http-equiv 
          = 
          "Content-Type" 
          content 
          = 
          "text/html; charset=UTF-8" 
          /> 
         
          < 
          title 
          >品致页面制作</ 
          title 
          > 
         
          < 
          style 
          > 
         
          html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} 
         
          ul,li,span,div,img{padding:0px;margin:0px;} 
         
          li {list-style:none;margin:0px;padding:0px;} 
         
          .wrapper {} 
         
          .fl {float:left;} 
         
          .nav {width:90px;} 
         
          .article {width:270px;padding-left:10px;padding-top:8px;} 
         
          .title {font-size:12px;color:#3366cc;margin:8px 0px;} 
         
          .title span {margin:0px 2px;} 
         
          .btn {background:url(img/btn.jpg) no-repeat;width:61px;height:17px;display:block;} 
         
          .article-list {font-size:12px;zoom:1;} 
         
          .article-list li.tip{background:url(img/title-bg.jpg) 0px 3px no-repeat ;padding-left:15px;list-style:none;color:#000;} 
         
          .article-list li.separator{background:url(img/separator.jpg) no-repeat;width:250px;height:3px;margin:4px 0px;display:block;_margin:0px;line-height:3px;_background:url(img/separator.jpg) 0px 5px no-repeat;} 
         
          .clear {clear:both;overflow:hidden;height:0px;} 
         
          </ 
          style 
          > 
         
          </ 
          head 
          > 
         
          < 
          body 
          > 
         
          < 
          div 
          > 
         
          < 
          div 
          > 
         
          < 
          div 
          > 
         
          < 
          img 
          src 
          = 
          "img/logo.jpg" 
          alt 
          = 
          "logo" 
          /> 
         
          </ 
          div 
          > 
         
          < 
          div 
          align 
          = 
          "center" 
          > 
         
          < 
          span 
          >品&bull;致</ 
          span 
          > 
         
          < 
          span 
          >第11期</ 
          span 
          > 
         
          </ 
          div 
          > 
         
          < 
          div 
          align 
          = 
          "center" 
          > 
         
          < 
          span 
          ></ 
          span 
          > 
         
          </ 
          div 
          > 
         
          </ 
          div 
          > 
         
          < 
          div 
          > 
         
          < 
          ul 
          > 
         
          < 
          li 
          >老虎伍兹为何被女人“吃掉”？</ 
          li 
          > 
         
          < 
          li 
          ></ 
          li 
          > 
         
          < 
          li 
          >你必须告诉一声的九件事</ 
          li 
          > 
         
          < 
          li 
          ></ 
          li 
          > 
         
          < 
          li 
          >男人，被时尚抛弃的一群？</ 
          li 
          > 
         
          < 
          li 
          ></ 
          li 
          > 
         
          < 
          li 
          >30天牛奶养生让你焕发青春肌肤</ 
          li 
          > 
         
          < 
          li 
          ></ 
          li 
          > 
         
          < 
          li 
          >你是否曾经关注过你的心脏？</ 
          li 
          > 
         
          < 
          li 
          ></ 
          li 
          > 
         
          </ 
          ul 
          > 
         
          </ 
          div 
          > 
         
          < 
          div 
          ></ 
          div 
          > 
         
          </ 
          div 
          > 
         
          </ 
          body 
          > 
         
          </ 
          html 
          >

15，css 中id和class如何定义,哪个定义的优先级别高?

id：#***，***为HTML中定义的id属性

class:.***，***为HTML中定义的class属性

id比class的优先级高

16，用html实现如下表格(不如嵌套实用表格)

三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)

使用表格嵌套，源码如下：

 
    
         <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "< 
         a 
         href 
         = 
         "http://www.w3.org/TR/html4/loose.dtd" 
         >http://www.w3.org/TR/html4/loose.dtd</ 
         a 
         >"> 
        
 
         < 
         html 
         > 
        
 
         < 
         head 
         > 
        
 
         < 
         meta 
         http-equiv 
         = 
         "Content-Type" 
         content 
         = 
         "text/html; charset=UTF-8" 
         /> 
        
 
         < 
         title 
         >品致页面制作</ 
         title 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
             
         < 
         table 
         cellspacing 
         = 
         "0" 
         cellpadding 
         = 
         "0" 
         border 
         = 
         "1" 
         style 
         = 
         "width:500px;text-align:center;" 
         > 
        
 
                
         < 
         tr 
         > 
        
 
                   
         < 
         td 
         width 
         = 
         "33%" 
         >1</ 
         td 
         > 
        
 
                   
         < 
         td 
         colspan 
         = 
         "2" 
         > 
        
 
                         
         < 
         table 
         cellspacing 
         = 
         "0" 
         cellpadding 
         = 
         "0" 
         style 
         = 
         "width:100%;text-align:center;" 
         border 
         = 
         "1" 
         > 
        
 
                            
         < 
         tr 
         > 
        
 
                               
         < 
         td 
         width 
         = 
         "55%" 
         >2</ 
         td 
         > 
        
 
                               
         < 
         td 
         >3</ 
         td 
         > 
        
 
                            
         </ 
         tr 
         > 
        
 
                            
         < 
         tr 
         > 
        
 
                               
         < 
         td 
         colspan 
         = 
         "2" 
         >4</ 
         td 
         > 
        
 
                            
         </ 
         tr 
         > 
        
 
                         
         </ 
         table 
         > 
        
 
                   
         </ 
         td 
         > 
        
 
                
         </ 
         tr 
         > 
        
 
                
         < 
         tr 
         > 
        
 
                   
         < 
         td 
         width 
         = 
         "33%" 
         >5</ 
         td 
         > 
        
 
                   
         < 
         td 
         width 
         = 
         "33%" 
         >6</ 
         td 
         > 
        
 
                   
         < 
         td 
         >7</ 
         td 
         > 
        
 
                
         </ 
         tr 
         > 
        
 
             
         </ 
         table 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
  