| 实用

开发中的各种小问题及解决方法

1.在写css样式的时候经常遇到例如

  • 标签之间有几个像素的解析（浏览器同，解析出来空的像素大小也不同）让人在写宽度的时候摸不着头脑，几经百度找到了一些方法。

    在这些办法里，我之前最常用的是
    1
    2
    3
    4
    5
    6
    <li>
    	xxxx
    </li><!--
    --><li>
    	xxx
    </li>

    但是不得不说这个方法不优雅，放眼望去HTML里好多注释很丑陋而且写的时候也不方便，所以个人来说觉得最值得推荐的就是这个方法
    1
    font-size:0;

    这个怎么用呢，就是给
  • 的父级加上这个样式，然后再在
  • 的样式里重新写一个字体大小，完美~

    • 2.

  • 的父级有一个
    1
    display:inline-block;

  • 本身也设成了内联元素，然后问题来了。在Chrome下，我给
  • 加一个
    1
    border-bottom:1px solid #000;

    居然没有效果，但是在360浏览器就可以，一度以为是Chrome炸了，后来把
  • 改成
    1
    float:left;
    再在父级清除浮动之后，问题解决了。（至于原因，尚不明确…）

    • 3.关于

    1
    display:inline-block;

    的一些小问题及解决办法。
    question:两个div在用内联的时候如果同没有内容，那么他们是底对齐，如果只给一个div加东西或者两个div里的东西不一样多都会造成排列混乱，如：

    answer:
    (1)如果给两个div都加上
    1
    vertical-align:middle;

    垂直居中，这样如果两个div高度一样，那么自然就对齐了。
    (2)如果给两个都加上
    1
    overflow:hidden;

    那么就可以直接底对齐。

    4.在一次执行任务的过程中，真的被onclike坑的要死要死的（流下了没有技术的泪水）。问题是这样的我在一个onclick事件里面对一个div做了

    1
    display:none;
    和另一个div做了
    1
    display:block;
    的处理，意图是局部刷新。我一点了那个按钮，讲道理，就应是之前那个div被none掉了，出来另一个div，但是应该出来的div一出来就闪退，然后又出现原来的那个div，我在css和js里周旋了long time,整个人都不是很好了=。=后来在Chrome调试器里调试的时候发现了个问题，每次执行了onclick事件过后，他都要去window.onload走一遍，那岂不是又刷新了整个页面？！哎哟我去，我马不停蹄的去百度一下onclick事件执行之后会刷新一次，结果发现好多小伙伴也着了道。当然聪明的摸摸大人肯定会想办法的呀，于是就是
    1
    return:false;
    出场的时候了。只需要在onclick事件函数最后加上一个这个，就拒绝刷新了，那岂不是美滋滋~
    *补充：
    我终于知道为什么点击事件触发后js会被重新加载一遍，原来是因为添加点击事件的
  • 标签外面有个标签，并且有href属性，只不过href的值是空的！！！！

    • 5.在用hexo写mark文档的时候，想用表格条理清晰的表达些东西，咋整呢？百度了一个一个比较好用的办法。
    效果图：

    很叼呀！~
    *但是要注意！第一排哪里的|线前有一个空格，如果不写，这个就不能被正常解析并且要与上一排内容空一行，不然也不能正常解析

    6.关于清除浮动
    (1).最常用的方法

    1
    2
    3
    .parent{
    	overflow:hidden;
    }

    (2).在浮动元素的父元素内部的最后加一个空的div给一个类名，然后用

    1
    2
    3
    .clear{
    	clear:both;
    }

    (3).after伪类+zoom法
    给要清除浮动的所有元素统一一个类名(减少css代码的冗杂)，如：clearfloat

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clearfloat:after{
    	clear:both;
    	content:"";
    	display:block;
    	visibility:hidden;
    	height:0;
    }
    .clearfloat{
    	zoom:1;
    }

    最兼容和优雅的方案

    (4).

    1
    2
    3
    .parent{
    	overflow:auto;
    }

    *父级是一个块级元素或有固定宽度才可以

    7.关于如何对一个数组进行除去重复的并且按降序排列
    因为需要去重并且排序，所以先排序再去重会减少时间的消耗。
    排序的话，用快速排序是最快的。给Array对象的原型添加块数排序的方法，这样每个引用的数组都可以使用此方法。
    方法一：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    Array.prototype.quickSock = function () {
    	if (this.length <= 1) {
    		return this;
    	}
    	else{
    		var leftArray = [],
    			rigthArray = [],
    			num = Math.floor((this.length)/2),
    			midValue = this.splice(num,1);

    			for (var i = 0; i < this.length; i++) {
    				if (this[i] > midValue) {
    					leftArray.push(this[i]);
    				}
    				else{
    					rigthArray.push(this[i]);
    				}
    			}
    			return leftArray.quickSock().concat(midValue,rigthArray.quickSock());
    	}
    }

    方法二：（利用js数组对象的方法：sort排序）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function sortNum01(a,b){
    	return a-b;
    }
    function sortNum02(a,b){
    	return b-a;
    }
    var arr = [2,3,5,3,6,8,6,52,579,8,56,56,51,68,96,95,4];
    //从小到大排列
    alert(arr.sort(sortNum));   
    ----> 2,3,3,4,5,6,6,8,8,51,52,56,56,68,95,96,579
    //从大到小排序
    alert(arr.sort(sortNum));
    ----> 579,96,95,68,56,56,52,51,8,8,6,6,5,4,3,3,2


    接下来就是给Array对象在原型里添加去重的方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Array.prototype.checkHeavy = function(){
    	var newArray = [this[0]];
    	for (var i = 0; i < this.length; i++) {
    		if (newArray.indexOf(this[i]) == -1) {
    			newArray.push(this[i]);
    		}
    	}
    	return newArray;

    }

    用法如下：
    1
    2
    3
    4
    5
    var newArray = [2,3,5,3,6,8,6,52,579,8,56,56,51,68,96,95,4];

    alert(newArray.quickSock().checkHeavy());

    //579,96,95,68,56,52,51,8,6,5,4,3,2

    ESC