web前端开发初学者十问集锦（3）
1.div的height:100%没有效果，如何让元素的高度自动扩充为父元素的高度?
我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度，否则无效。
注意，对父元素显示设置宽度和高度也可以使用n%这种百分比的形式，前提还是如上描述的那样，父元素的父元素的高度和宽度要明确的设置。
2.relative定位bottom:0px;right:0px;没有效果?
relative定位中使用bottom:0px;right:0px;使元素定位于父元素的最下边或者最右面，没有效果是因为relative定位的参考对象是自己。bottom:0px;right:0px;也就没有变化。
如果你想让这个div #demo里的一个div #sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。
3.CSS样式<style>标签在html文件中放置的位置？
现在编写网页都是内容与样式分开，推荐css单独的用一个文件保存，然后在html的<head>标签中进行引用，如下所示：
<head>
<link type="text/css" href="/html/csstest.css" >
</head>样式的声明可以在四个位置完成，其优先级依次为
1.内联样式（在 HTML 元素内部） 优先级最高;
2.内部样式表（一般位于 <head>标签内部）;
3.外部样式表;
4.浏览器缺省设置。
推荐统一使用外部样式表。但是在使用内部样式表的时候，style标签和script标签一样，可以放置在html文件中的anywhere，任何地方。
4.JavaScript如何获取html元素的宽度和高度？
第一种方法：如果宽和高是写在样式表中，则采用obj.offsetWidth;
第二种方法：如果宽和高是写在行内样式，比style="width:120px;"，这种情况既可以采用obj.style.width能拿到宽度，也可以使用第一种方法。
因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
注意：offsetWidth = width + padding + border ； offsetHeight=height + padding + border。
下面可以参考下图，理解元素的各个属性：
假设 obj 为某个 HTML 控件。 obj.offsetTop 指obj距离父容器的上边距，整型，单位像素。
obj.offsetLeft 指 obj距离父容器的左边距，整型，单位像素。
obj.offsetWidth 指obj控件自身的宽度，整型，单位像素，由元素width + padding + border组成。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素，由元素height+ padding + border组成。
offsetWidth 与 style.width 的区别 一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
5.如何获取html元素的样式，如内边距？
我们知道用document.getElementById(‘element’).style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，即内联样式。对于使用了内部样式表（位于 <head>标签内部）和外部样式表，就拿不到我们要的信息了。
我们可以通过getComputedStyle与currentStyle获取元素样式。DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。
但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：
return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft; 6.JavaScript中有double类型吗？
javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number（包括整数和小数）。所以JavaScript中的所有数值类型都是double双精度浮点类型。
7.如何制作图片倒影？
使用css3 box-reflect设计图片倒影效果，参考代码如下：
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>效果如下图：
其中below表示倒影的位置位于下方，5px表示倒影距离图片的距离，-webkit-gradient表示渐变填充。
实测，在Chrome中有效果，在IE9以及Fire Fox中没有效果。
8.js（JavaScript）中单引号和双引号有什么区别？
一个Web大神告诉我说没什么区别，我实验了，还没发现有什么区别？
<!doctype html>
<script type="text/javascript">
var lv=4;
alert('"+lv+"\n');//单引号包含双引号
alert("'+lv+'\n");//双引号包含单引号
alert(''+lv+'\n');//单引号包含双引号
alert(""+lv+"\n");//双引号包含双引号
</script>
</html>上面的代码输出至控制台如下图所示：
从上面的结果我们可以得出两个结论： （1）js单引号和双引号基本上没有区别，只是在同时使用的时候，有些细节要注意上面的细节； （2）js中支持字符串中包含变量，即”+var+”这种运算。
9.js无限循环定时器会执行吗？
这里涉及到window.setTimeOut和window.setInterval的异步性，以及js单线程的单线程问题。经常会出现在面试的过程中。
看一下如下代码：
var t = true;
window.setTimeout(function (){
t = false;
},1000);
while (t){}
alert('end');请问alert会执行吗？
答案是死循环导致setTimeout不执行，也导致alert不执行。
js是单线程是对的，所以会先执行while(t){}再alert，但这个循环体是死循环，所以永远不会执行alert。
至于说为什么不执行setTimeout，是因为js的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等js空闲才会执行，但死循环是永远不会空闲的，所以setTimeout也永远不会执行。
简单的来说就是定时器时异步加载的,而js是单线程的,在声明一个定时器之后,这个定时器会暂时保存在任务队列中,当js的同步代码加载完毕之后再执行任务队列中异步的定时器。
声明多个定时器的情况下, 定时器会按照interval的大小放入任务队列,然后依次执行.如果interval相同,那就按照声明的先后顺序执行.
浏览器有一个内置的间隔，所以即使你设置interval为0,定时器也会间隔一段时间之后再执行。
10.CSS中默认定位，相对定位，绝对定位，固定定位的区别？
默认定位： position:static。就是没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明），会撑开父容器。
相对定位： position:relative。定位的参考对象是元素自己；且不脱离文档流，即默认定位所占用的位置还保留，会撑开父容器；
绝对定位： position:absolute。定位的参考对象是离自己最近的非static定位的父元素。脱离文档流，不会撑开父容器。
固定定位： position:fixed。生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流，不会撑开父容器。
参考文献
[1]关于Div的宽度与高度的100%设定 [2]JS获取各种宽度、高度的简单介绍 [3]setTimeout的异步以及js是单线程的面试题.知乎.杨光 [4]CSS position 属性