前言

最近在MOOC上学习Busy老师的电商网页项目，巩固了很多关于HTML+div+CSS知识，也踩了很多很多坑。。。有时候一卡几个小时都解决不了。。其中IE6的兼容问题，以及IE8的兼容很是恼人。这里把这几天遇到的兼容问题以及解决方法总结一下。

前言

(之前的一篇漏掉了这里补档一下~)
话不多说。这次我们谈谈JS中的关于作用域,作用域链，还有执行环境以.

前言

这篇其实拖了相当久了。是因为自己很长时间对于原型和原型链的概念不是很清楚。现在已经大抵弄明白了。那么今天来总结一下吧~

一个题目

在总结之前，先放上一道我纠结了很久很久的题目，是在看别人的面试经历里面看到的。下面评论说考察了原型链的知识。经过百度。。发现这道题答案还有不同的声音。遂开始了我的弄懂原型链的历程。

var F=function(){
};
Object.prototype.a=function(){
};
Function.prototype.b=function(){
};
var f=new F();
f能拿到a和b吗？

先公布答案吧~能拿到a不能拿到b，如果我们在浏览器中进行审查的话，会发现报错b未定义。
那么为什么呢？我们先直接来做出解释吧：
拿属性的时候，JS中是通过原型链一层一层向上遍历去拿的。
F的原型链 F→Function.prototype→Object.prototype→null；
f的原型链 f→F.prototype→Object.prototyoe→null；
通过原型链我们可以看到F既可以拿到a也可以拿到b，而f却只能拿到a，不能拿到b。
那么什么是原型链，什么是原型，其中又有什么容易让人混淆导致网上答案有不一样呢？

前言

最近在学习javacript的过程中，看到的一些题目。考到了很多javascript中的知识点。在这里总结一下：

CODE

var a=10;
function test(){
a=5;
alert(a);
alert(this.a);
var a;
alert(this.a);
alert(a);
}
test();
new test();

test和new test分别输出什么？
答案是5 10 10 5 和 5 undefined undefined 5
这题中涵盖的知识点有：函数与变量的提前声明；this的用法；new的含义。

函数与变量提前声明：

Javascript的解析器会将当前作用域内声明的所有变量和函数放到作用域的开始处，但是，只有变量的声明被提到作用域的开始处了，而赋值的操作被保留在了原地！
所以题中的函数内的实际顺序应该是：var a;a=5;alert(a);alert(this.a);alert(a);
那么函数的提前声明呢？
Javascript的解析器允许在函数声明之前使用，也就是说，函数声明不仅仅是函数名被提前了，整个函数的定义也被提前了，下面是个简单的例子：

test();
function test(){
alert("You can use the function first")；
}

还有一种情况是，函数赋值给变量，下面看另外一个例子：

test1();
alert（test2);
function test1(){
alert("I'm test1!");
}
var test2=function(){
alert("I'm test2!")
};

结果是第一个弹出了I’m test1!第二个确是undefined。这里就很明显了，与之前变量声明的提前类似，变量被提前了，而赋值却没有提前，所以提示undefined。

前言

　　什么是瀑布流呢？
　　大家打开百度图片，输入任意关键字，搜索到的图片区域的布局，就是瀑布流啦。不同大小的图片将可视的区域占满。
那么如何去实现它呢？
　　下面就详细的讲解一下~

　　首先我们可以对需要完成的事做一个大概的构想：
　　为了使图片以瀑布流的形式呈现，我们需要怎么做呢？
　　我们先摆放好第一排的图片吧~摆放好了之后，开始摆放第二排的图片，但是该如何去摆放呢？
显然，我们需要把图片放在第一排的图片中，高度最小的一张的下方；紧接下来的图片呢？哈，当然，是用同样的方法去摆放。只是摆放位置要以之前的状况为基础，即第一排的最矮的那一张下方已经摆放了图片的状况。在这种情况下，我们继续找最矮的一张，把图片摆放好。
那么我们反复完成这个工作，最终就能够实现瀑布流的效果了。
好了接下来就用代码来实现它吧~

前言

　　之前对如何用javascript实现图片瀑布流的效果进行了总结。那么这一篇我们来讲解如何实现图片的循环加载。即滚动条拖动到底部时，能够无限的加载想要的图片。

CODE

　　在写CODE之前还是先进行一下构想。为了实现这种循环的加载我们需要完成什么样的事情。
　　首先当滚动条滚动到贴底的一张图片出现时，我们载入新的图片。同时将新的图片也按照瀑布流的形式进行摆放。OK，那么为了完成这些事件，我们需要获得最底部的图片距离顶部的高度。而获得了这个高度后又该如何检测到滚动到了此处呢？接下来看一看code吧~

检测滚动

function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildElement(cparent,"box");//运用我们上一张讲到的函数获得类名为box的DIV
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//得到最底部的图片的距顶高度
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获得隐藏部分的滚动顶高，这个距离我们等会详细讲一下
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//得到可视区域的高度
if(lastContentHeight<scrollTop+pageHeight){//当最底部图片的距顶高度小于滚动顶高加可视区高时，我们返回true的布尔类型
return true;
}
}

　　这里讲解一下scollTop和if后面的括号里判断的含义：
首先解释scrollTop:
网上的解释是，“设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离”。这可能乍看之下有点难以理解，那么我们通俗的解释一下。
首选如果页面得高度超过了网页的可视区域即clientHeight的话，多余的部分会被隐藏。我们需要通过滚动条来看到被隐藏的部分。当向下拖动滚动条时，被隐藏的部分一点一点的被展现出来，而展现出来的隐藏部分的高度就是我们scrollTop。这个值是随着滚动条的拖动而变动的。
括号里判断的意思是：
若判断符号取等号的话，即是当拖动滚动条渐渐向下刚好到了最底部图片的顶部，此时我们可视区域的高度加上scrollTop刚好等于最底部图片的距顶高度。继续拖动时，可视区高度加scrollTop就会大于这个值，即滚动到了可以看见最后一张图的地步了~所以当这个距顶高度小于可视区高加csrollTop时，我们返回true，表示：啊！已经到了要加载图片的时候了！

高度自适应

　　自适应我们分为两部分来说。首先是文字内容自适应DIV高度。
在这种情况下，一般有两种途径能够解决。
1：第一种方法是设置最低的高度

_height: 200px;/仅IE6需要设别此属性，假定最低高度是200PX，设置内容超出后会自动撑开行高/
 min-height:200px;/css最小高度为200px，支持除IE6以外浏览器/

2：第二种方法是同时设定两个DIV，最小高度均为200px，当内容较少时DIV盒子的高度是200px，当内容超出时，DIV可以自适应高度，两个DIV进行同样的设置：

div{_height:200px; min-height:200px; border:1px solid #000; width:100px}
/ css注释：设置最小高度，border边框，宽度 / 

　　接下来是图片大小的自适应。
css2中用到的方法是运用判断表达式来进行图片大小的自适应。而在css3中能够用background-size来解决。
background-size语法解析如下：

1. length,percentage。根据跟定长度值或者百分比来调整背景图片大小。auto为默认值。
   冒号后的第一个值是宽度，第二个值是高度。（均不能为负值）
   假如只给一个值，则第二个值自动为”auto”；
   假如指定为百分比值，那么背景图的大小是根据相对的背景区域来作调整。而背景区域是根据background-origin属性来决定的。
   （padding-box 背景图像相对于内边距框来定位
   border-box 背景图像相对于边框盒来定位
   cotent-box 背景图像相对于内容框来定位）
   1. contain。

      div { background-size: contain; }

      它的效果按比例将图片缩放到最大尺寸以使其高宽都在背景区域里面，其主要用在背景图片比容器大的情况下。（使用该值时，图片可能发生扭曲）
   2. cover。

      div { background-size: cover; }

      它的效用是按比例将图片缩放到最小尺寸以使其完整覆盖背景区域，其主要用在背景图片比容器小的情况下。（使用该值也可能是图片扭曲。
      　　通过以上3种设置方法，能够实现图片的自适应。

垂直居中/定位

DIV的垂直居中，能够通过设置外边距的方式来实现。在父级DIV内部的子集DIV可以通过命令：

margin: (calculated value)px  auto;

来实现。
当然也可以通过绝对定位来实现,而代码稍有区别,需要设置父级与子级DIV的定位：

.父级DIV {
  position: relative;
}  

.子集DIV {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
那么我们怎么理解第二种DIV的垂直居中方式呢？
首先从两个定位开始说：
position: relative和position: absolute，即相对定位和绝对定位。
相对定位是没有脱离正常的文档流的，此时，对象原来占有的位置被保留。（移动后会覆盖其他内容）。
绝对定位脱离了正常的文档流，它相当于飞了起来，不在占位置了。
在定义子集绝对定位后，通过 top: 0; left: 0; bottom: 0; right: 0; 使子DIV占满父DIV，之后设置子DIV的高度和宽度为一半。之后定义外边距为auto。由于脱离了正常的文档流，这里我们会给上下和左右编剧相同的值，最终实现居中的效果。
　　文字的垂直居中我们有两种方法。
一种是将行高line-height设置的与DIV的高度一样；
另外一种是将父级的DIV用display来定义框的类型（display如果使用不谨慎，容易违反HTML中已定义的层次结构）：
我们可以将父级的DIV定义为table表格，将子DIV定义为表格单个元素，之后用vertical-align: middle;来实现文字的垂直居中。
但是值得一提的是，我在用这种方法实现垂直居中时发现，如果设置了子级DIV为单元格的话，那么子集的DIV会把父级直接填满（先设置了两个DIV的背景颜色）。所以情况不允许，还是第一种方法比较好。

遗留的问题

下一篇会写到一些遗留的问题，有关自适应，父级塌陷以及DIV嵌套的小BUG。