前端开发曾经遇到的那些小困惑

1.如何区分CSS样式中Display与Visibility

今天我要和大家来区分一下:CSS样式属性中Display与Visibility和区别,两者貌似相同,其实质确完全不同.
首先来讲一下visibility:
    visibility属性用来确定元素是显示还是隐藏，这里 visibility="visible/hidden"来表示，visible表示显示，hidden不能再接收到其它事件了，所以当其被设为"hidden"的时候，就不能再接收响应到事件了
    display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像div元素一样，它会在那个点被放入到页面中。(实际上你可以设置span的display:block，使其可以像div一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元， 如div，它也将会被组合成像span;那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素
就会被自动跟上填充。

2.Jscript 中数据类型null

在Jscript 中数据类型null只有有一个值：null。关键字 null 不能用作函数或变量的名称。包含 null 的变量包含“无值”或“无对象”。
换句话说，该变量没有保存有效的数、字符串、boolean、数组或对象。可以通过给一个变量赋null值来清除变量的内容。
在Jscript中，null 与0不相等(与在C和C++中不同).同时应该指出的是，Jscript中type运算符将报告null值为Object类型，而非类型null。这点潜在的混淆是为了向下兼容。但是 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

alert(null==undefined);//true

在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined

如果定义的变量准备用来保存对象，那么最好将该变量初始化为null，这样检查null值就可以知道对应的变量是否已经保存了一个对象的引用。这样做不仅可以体现null作为空对象指针的惯例，而且要有助于进一步区分null和undefined。

if （car!=null）{
}

3.栈内数据

javascript引用数据类型是保存在堆内存中的对象，JavaScript不允许直接访问堆内存空间中的位置和操作堆内存空间，只能通过操作对象在栈内存中的引用地址。所以引用类型的数据，在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。

 <script type="text/javascript">
       var obj1 = new Object();
       var obj2 = obj1;
       obj2.name = "Song";
       alert(obj1.name); // Song
 </script>

由上面例子，我们声明了一个引用数据类型变量obj1，并把它赋值给了另外一个引用数据类型变量obj2。当我们obj2添加了一个name属性并赋值"Song"。
obj1同样拥有了和obj2一样的name属性。说明这两个引用数据类型变量指向同一个对象。obj1赋值给obj2，实际只是把这个对象在栈内存的引用地址复制了一份给了obj2，但它们本质上共同指向了堆内存中的同一个对象。

自然，给obj2添加name属性，实际上是给堆内存中的对象添加了name属性，obj2和obj1在栈内存中保存的只是堆内存对象的引用地址，虽然也是拷贝了一份，但指向的对象却是同一个。故而改变obj2引起了obj1的改变。

4.逻辑非：

逻辑值为1的值为：布尔值true，任何非空字符串，非零数字，任何对象
逻辑值为0的值为：布尔值false，空字符串，0和NaN，null，undefined
可以调用转型函数Boolean()将一个值转换为其对应的Bolean值
逻辑非：
如果运算数是对象，返回 false
如果运算数是数字 0，返回 true
如果运算数是 0 以外的任何数字，返回 false
如果运算数是 null，返回 true
如果运算数是 NaN，返回 true
如果运算数是 undefined，返回 true

特别注意，NaN的逻辑值是false，并且NaN与任何值都不相等，包括NaN本身。isNaN()函数会确定这个参数是否“不是数值”，这里要注意字符串数字可转化成数值。

alert（NaN==NaN）；//false

5.==和===的区别

   "1" == true类型不同，"=="将先做类型转换，把true转换为1，即为 "1" == 1；此时，类型仍不同，继续进行类型转换，把"1"转换为1，
即为 1 == 1；此时，"==" 左右两边的类型都为数值型，比较成功！

　　 “1” === true 左侧为字符型，右侧为bool布尔型，左右两侧类型不同，结果为false；

　　 “1” === 1 左侧为字符型，右侧为int数值型，左右两侧类型不同，结果为false；

6.CSS之Position

注意：TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。

当设定position:absolute
分两种情况：

   如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以*浏览器左上角*为原始点进行定位 
   如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性*以父级（最近）的左上角为原始点进行定位*。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。
   绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将 不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK吧，注意不要混用即可。

fixed：是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

当设定position: relative

    relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置（按照它理应所在的位置进行偏移）

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

7.offsetLeft

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的，区别在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置

8.执行环境及作用域

每个函数都有自己的执行环境，当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途就是保证对执行环境有权访问的所有变量和函数的有序访问。内部函数可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

有两个方法延长作用域链：
try-catch语句的catch块
with语句
WEB前端js捕捉异常处理是使用try catch方式。

try {
     foo.bar();
    } catch (e) {
         if (e instanceof EvalError) {   //result=variable instanceof constructor 变量variable是constructor吗？
             alert(e.name + ":" + e.message);
         } 
         else if (e instanceof RangeError) {
             alert(e.name + ": " + e.message);
         } 
}

with语句会将指定的对象添加到作用域链中：

function build（）{
    var qs="?debug=true";
    with(location){
      var url=href+qs;  }
    return url
}

但是在js中，没块级作用域的if语句中的声明变量会将变量添加到当前的执行环境中，区别有块级作用域的for语句。

9.浮动float
浮动具有破坏性，会让父元素产生高度塌陷（display：none，abosolute，fixed同样）
当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
那么，如何降低破坏影响呢？

清除浮动（带来的影响）：
1.clear：both
a.在父元素内容的底部插入一个空div如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
缺点：需要添加大量无语义的html元素，代码不够优雅
b.给浮动元素的父元素添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

2.给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

10.CSS里定义body{ }和定义*{ }的区别
* 代表所有元素
所以对*设置了属性 也就是对xhtml标签的所有元素设定了属性
而body只是一个标签
但是他是结构标签的开始
所以给他设置的属性 如果之后的标签 有继承属性 那么他就会或者body标签允许继承的属性，比如背景颜色 字体大小 字体颜色等。
至于听谁的 JAVA中文网(www.javaweb.cc)
按照规则 听父元素的。
比如结构如下：

*{ color:#FF0000;（红色）} 
body{ color:#000066;（蓝色）}
<body> 
321 
<p>123</p> 
</body> 

这里的 321 是什么颜色呢？
这里的 123 会是什么颜色呢？
分析一下
第一句*{color:#FF0000;}告诉我们 所有标签下面的字体颜色都是红色的。
那么body 就有color:#FF0000;的属性了 而P 也一样有。
这个时候我们设置body{ color:#000066;}，那么根据规则 如果属性重复，那么就取最近设置的。那么body的颜色就会是蓝色的。而P 标签如果没有颜色设置就会继承body的蓝色 但是开始的时候 *已经给P标签设置了红色。那么
这里 的 321 会使用body的蓝色
而123会使用P 标签的红色