刚进入前端开发这个行业，菜鸟一枚，在这几个月的学习当中，给我最真实地感受就是：前端进入容易，深入难。下面发下自己这段时间收集的一些问题，希望以后能不断改善，越做越好。
1、类的命名最好用横杠，不是下划线，因为这样会让IE外的大部分浏览器忽略这个样式的定义。
2、text-indent不能随便乱用哦，这样很容易出问题的（一般的话首行缩进程序会设置）
3、尽量不要在css里面用（@import url（"base.css"）;）来导入其他css文件，因为比较耗内存；可以选择在HTML文件中用<link>标签来导入
css文件
4、底部的话尽量不要把高度设定死了，因为有时候友情链接可能会变多，这时候就会出现问题
5、logo最好加个链接（利于优化）;面包屑（类似：list1>list2>list3 这样的结构）的最后一个list3最好加个h1标签（一样利于优化）
但是因为h1是块级元素，为了兼容，又不想使用float，那么可以直接inline行元素化。
6、JavaScript 放置在文档的最后面可以使页面加载速度更快
7、为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
8、 slidedown和slideup不停触发解决方法：利用stop（）方法来解决 http://caibaojian.com/sliderdown-slideup.html 但还是会有问题。
//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
9、jQuery国内的几个常见cdn加速点 http://www.douban.com/note/371586251/?qq-pf-to=pcqq.c2c
8、定位问题：(absolutely和relative之间的关联要理解)绝对定位的话relative要定位到父级元素，absolutely定位在子级元素上，这样才不会错乱（屏幕缩小会错乱掉）。
9、ie6下鼠标放到二级菜单不显示问题：解决办法：在二级菜单上加背景色
10、a:hover在ie6下无效果：原因：a标签没加href=“JavaScript：void（0）；”属性； JavaScript：void（0）和#是一样的都是空连接但前者没有返回值。
11、 z-index问题：（http://blog.sina.com.cn/s/blog_72c6cfa90100vfui.html） 如果父元素没有设定z-index而子元素设定了，那么子元素设定是无效的（因为子元素会被父元素重置掉）
解决办法：直接在父元素上设定z-index （如果子元素想高于父元素再对子元素设置高于父元素的z-index值就可以了）
12、 ie6 ie7 ie8 bug兼容解决网站 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/
13、 css引进顺序：先引入的css会优先解析，所以框架引用到的css一般先用link导入，而自己写的css后面导入，这样当重写框架样式的时候才起到覆盖作用。
2015年10月29日
14、（1）inline元素的display属性设置为inline-block时，所有的浏览器都支持；
（2）block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性）
IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE6下块元素如何实现display:inline-block的效果？
有两种方法：
1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
15、 瀑布流 http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
16、教你学编程的5款游戏： http://blog.jobbole.com/92553/ http://cn.codecombat.com/
17、bootstrap附加导航：注意事项：一定要在body上加data-spy="scroll" data-target="#myaffix" 话说附加导航真难用，还得好好研究啊。
18、fullpage.js 运用及自定义导航参考：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201481504334743/
2016-1-15
19、bootstrap附加导航：注意事项：一定要在body上加data-spy="scroll" data-target="#myaffix"
20、float：right；在IE7等下自动换行？ 解决方法：网上找了下有三种（1）：调换顺序，把浮动的放到非浮动的前面；（2）一左一右浮动
（3）利用绝对定位解决 本次第三种方法解决了我的需求所以用了第三种。
21、li在ie7下高度莫名增加了？ 参考：http://blog.csdn.net/a9254778/article/details/7234719 或者http://bbs.blueidea.com/thread-2893330-1-1.html
解决方法：里面加上vertical-align：bottom；就可以了。 测试了下貌似是由于li设定了宽和高，然后里面的子元素又浮动了而引起的，所以li跟着浮动也可以解决这个问题。
但是还是推荐上面的方法比较简单方便，后续问题可能也会比较少。
22、inline是行内元素，可以一行排，但是不具备width、height等特性的，
但是如果我变成inline-block作用：就是将a、span等行内元素变成行内块元素，意思就是我可以一行排，又具有width、height这些属性（这就是inline-block的作用）
但是ie67由于他本身浏览器问题，我们必须【*:inline】触发他的haslayout，来使a标签在这些浏览器下面有宽高又可以一行排。而且这个hack必须单独设置，如果你在同一个样式里面设定也无法触发成功。
23、jQuery 实现文本框数量加减微调，并且保证文本框只能输入纯数字：http://www.jb51.net/article/49960.htm
2017-11-21
一、js深度复制的方式
1、使用jq的$.extend(true,target,obj)
2、var newobj = Object.create(sourceobj);
注意：这个方法有个问题就是newobj的更改不会影响sorceobj，但是sourceobj的更改会影响到newobj
3、var newobj = JSON.parse(JSON.stringify(sourceobj));
二、图片预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片预览</title>
<style>
*{padding: 0; margin: 0;}
.main-box{width: 600px; margin: 100px auto;}
</style>
</head>
<body>
<div class="main-box">
<input type="file" name="file" id="file" onchange="showPreview(this)" />
<img id="preview" src="" width="400px" height="250px" />
</div>
</body><strong>
</strong></html> function showPreview(source){
var file = source.files[0];
//console.log(file)
if(window.FileReader){
var fr = new FileReader();
console.log(fr);
fr.onloadend = function(e){
document.getElementById('preview').src = e.target.result;
}
}
fr.readAsDataURL(file);
} 2017-12-07
1、伪类和伪元素
特性及区别
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
二、offsetWidth和clientWidth等
1、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
2、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；
3、clientLeft: 获取对象的border宽度
4、clientTop：获取对象的border高度
5、offsetWidth （width+padding+border)：当前对象的宽度
6、offsetHeight :(Height+padding+border)：当前对象的高度。
7、offsetLeft : 当前对象到其上级层（文档）左边的距离。
8、offsetTop :当前对象到其上级层（文档）顶部边的距离。
2017-12-15
var a = new Foo(); new做了以下的事情
var o = new Object();//创建了一个新的空对象o
o.__proto__ = Foo.prototype;//让这个o对象的` __proto__`指向函数的原型`prototype`
Foo.call(o);//this指向o对象
a = o;//将o对象赋给a对象
2018-6-27
导航跳转添加样式
//导航跳转，添加样式
$('#nav li a').each(function(){
var href = window.location.href,hrefLen = href.length-1;
if(window.location.href==this.href){
$(this).addClass("on");
}
if(href.lastIndexOf('/')===hrefLen){
$('.nav li a').eq(0).addClass('on');
}
})