1，让一个input的背景颜变成红
1
<input type="text" />
2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
思路：
(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;
(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->不让浏览器产生滚动条，避免页面出现两个滚动条
(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，
滚动条的宽度我这里假设是20px
这样题目基本就完成了，不过浏览器的兼容性还不是很好。
贴出代码：
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="/TR/html4/loose.dtd%22">/TR/html4/loose.dtd"</a>>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端试题(html3/4)</title>
<style type="text/css">
   html, body {height:100%;width:100%;margin:0;overflow:hidden;}
   #fullDiv {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#eee;border:1px solid red;}
   #body {width:100%;height:100%;overflow:auto;z-index:999;position:absolute;top:0px;left:0px;}
</style>
</head>
<body>
<input type="background:red;position:absolute;left:100px;"></input>
css实现垂直水平居中
<div id="fullDiv"></div>
<div id="body">
<div ></div>
</div>
<script type="text/javascript">
   function getBrowerSize() {
      if(documentpatMode == "BackCompat"){
         cWidth = document.body.scrollWidth;
         cHeight = document.body.scrollHeight;
      }
      else {
         cWidth = document.documentElement.scrollWidth;
         cHeight = document.documentElement.scrollHeight;
      }
      return {width:(cWidth-21)+"px", height:(cHeight - 4)+"px"};
   }
   var floatDiv = ElementById('fullDiv');
   var size = getBrowerSize();
   alert("width:"+size.width+" height:"+size.height);
   floatDiv.style.height = size.height;
   floatDiv.style.width = size.width;
</script>
</body>
</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)
贴出代码：
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="/TR/html4/loose.dtd">/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选中的指
贴出代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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 = ElementById("sel");
    var input = ElementById("input");
    hange = function() {
        input.value = this.value;
    }
</script>
</BODY></HTML>
7，<img>中alt和tittle的区别

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。