读《编写高质量代码:web前端开发修炼之道》一书收获

     最近在看《编写高质量代码:web前端开发修炼之道》，这是一本好书。首先得说这本书绝对不是入门书，个人认为比较适合有半年以上开发经验的人学习，因为你不经历过一点"散漫式"开发以及不曾感受到因为代码写的不规范而导致的维护困难，你很可能不太能体会作者提到的一系列优化代码、代码组织之道、提高代码可维护性的好处。以下我就写一点从本书中获得的一些收获，以便印象深刻：

1.触发ie浏览器hasLayout的方式：zoom:1。这是成本最低的触发方式，但是在极少情况下这个zoom:1可能并不会成功触发hasLayout,这时候考虑用position:relative。

2.行内元素的padding和margin有点奇怪，水平方向的padding-left padding-right margin-left margin-right都是正常显示的，但是竖直方向的margin-top margin-bottom没有任何效果，而padding-top padding-bottom有些奇怪，效果是这样的：边框越界到上下两个div了。

3.ie7下display：inline-block属性问题。该属性在8、9以及其他浏览器下都是正常显示，但是ie7却没能在不触发hasLayout情况下模拟显示display：inline-block。我以前也用过display：inline-block属性，但是都是同时设置width和height属性的（width和height设置能出发hasLayout），我一直以为ie7也是正常显示display：inline-block的，看来只是出发了hasLayout罢了。

4.vertical-align:这个属性针对的是行内元素，块级元素是不支持的。默认值是bottom好像。我们比较常见的值是middle top bottom,但其实也可以设置px值，比如说-20px就把行内元素向下拉20px,20px就把行内元素向上来拉20px。当这个行内元素有一个父元素的时候，情况很好理解，大家可以去w3c的教程去看看，但是我自己发现的另一种情况是，当该行内元素没有父元素或者说它的父元素就是body的时候，你或许要稍微知道一下，这个时候，这个行内元素会把周边的元素的底边作为基线，然后再去根据具体的值来调整。这个可以看上去可以调整上下位置的属性你可以考虑一下怎么利用起来。

5.z-index:这个属性生效是有前提的，即设置了position属性，这一点要切记。我自己试验了一下，采用margin遮盖附近的元素，被遮盖元素并不能通过z-index来重新全部展示出来。

6.设置属性position:absolute和float，能够让一个元素隐式的设置display:inline-block,记住，position:absolute才能有这个效果，relative是没有的。

7.table元素我想大家在coding过程中也用的不少，我这里看到书上写了table这么一个有趣的介绍：table本身并不是块级元素，但是通过设置table的margin-left：auto margin-right：auto，可以让table居中显示！而一般的行内元素是不能这么做的。所以，当你以后需要将一个不确定宽度的元素（比如分页这个功能，你不知道需要展示几个分页按钮，但是又需要把分页的几个按钮居中在页面显示出来的时候）放在页面中间的时候可以考虑table这个特殊的行内元素来做。

8.上一点提到这个分页功能如何在不知道按钮数量的前提下让分页元素居中显示，用table做的确可以做但是比较麻烦，因为增加了table以及其子元素等一些元素。接下来我们就给出另外一套较好的方案，如下：

   ul{
      list-style:none;
   }
   div{
      border:1px solid skyblue;
   }
   ul.test{
      text-align:center;/*让内部的li元素居中显示*/
   }
   ul.test li{
      display:inline;
   }

<div>
    <ul class="test"><li>第一页</li></ul>
    <ul class="test"><li>第一页</li><li>第二页</li></ul>
    <ul class="test"><li>第一页</li><li>第二页</li><li>第三页</li></ul>
  </div>

效果我就不贴上来了，确实是无论你有几个分页按钮，它们都居中显示出来了。ul是块级元素，默认是填充整个div元素的。其下面的li元素也是块级元素默认也是填充其ul父元素，现在通过设置li-->display:inline,可以让每个元素变成行内元素从而并排显示，同时受ul的text-align:center，可以让所有的li元素都居中显示。

9.谈完水平居中，我们也得谈谈垂直居中吧。垂直居中我们首先探讨一种情况：父元素高度不确定的情况下如下垂直居中。问题其实比较简单，只要为父元素设置相同值的padding-top和padding-bottom即可，因为父元素高度不确定，可以根据padding来自适应。后一种情况稍微复杂点，也就是说当父元素高度确定的时候垂直居中如何做。分为两种情况，如果只是文字一类的话可以通过设置line-height和height一样高来解决，如果是图片或者块级元素的话我们接着看。我们先再补充点知识，我们知道其实是有一个属性叫vertical-align能够垂直居中，但是这个属性只有td和th可以使用，其他块级元素是没用的。但是为父元素设置display:table-cell,也就是说像table里面的td一样布局，就可以利用vertical-align:middle来居中对齐，但是ie7及以下是不支持的，我们需要另想办法。先贴上代码吧：

.mb10{
  margin-bottom:10px;
 }
 .wrap{
  background:#000;
  color:#fff;
  height:150px;
  width:400px;
  display:table-cell;/*这里是关键，在需要居中的元素的父元素上设置这个属性及值，你就可以模拟td那样的布局，我也是才知道table-cell是这样使用的*/
  vertical-align:middle;/*这里也很关键，不要忘了，否则前功尽弃*/
  position:relative;/*这里是为内嵌的html准备的*/
 }
 .verticalWrap{/*如果是7及以下的浏览器，这个html就开始派上用场了，用处我下面有简单解释*/
  *position:absolute;
  *top:50%;/*让目标居中元素的祖父元素向下滑动一半的距离，那么也就是说这个祖父元素的上边框就在整个大div的中线上，是不是，你好好想想*/
 }
 .vertical{//*和它的父元素一样，这个元素也是在7及以下的浏览器中有用处*
  *position:relative;/*在上面，我们提到，目标居中元素的祖父元素，也就是这个div的父元素已经向下滑动一半的距离了，那么这里这个元素再向上滑动自己一半高度的距离就刚好居中了*/
  *top:-50%;/*如果你开发经验不多的话会感觉不是很好懂，那你再好好想想是不是这样子的*/
 }
 .inner{
  width:200px;
  height:30px;
  background:red;
 }

　　

<div class="mb10">
   <div class="wrap">
    <div class="verticalWrap">
	 <div class="vertical">
	   hello,world<br />hello,world<br />hello,world
	 </div>
	</div>
   </div>
  </div>

  <div class="mb10">
   <div class="wrap">
    <div class="verticalWrap">
	 <div class="vertical">
	   <img src="test.png"/>
	 </div>
	</div>
   </div>
  </div>

  <div class="mb10">
   <div class="wrap">
    <div class="verticalWrap">
	 <div class="vertical">
	   <div class="inner"></div>
	 </div>
	</div>
   </div>
  </div>

　　说实话，我一看到这么多html就感觉不爽，不就为了一点居中嘛，干嘛用这么多html 啊，但是后来我就发现这也是迫不得已的，因为这么多html就是为兼容低版本的浏览器所设置的。你可以看到table-cell这个属性是设立在.wrap这个div上的，如果不是为了兼容低版本浏览器的话，verticalWrap和vertical是没有必要的，而这里嵌套了两层html就是为低版本浏览器准备的。你可以看到verticalWrap和vertical属性前面都有*,这个只有7及以下才能识别，他们对table-cell不认识，于是通过position来模拟。为什么这里可以模拟成功呢？这两个嵌套html借助的好，首先，外层html向下滑动到50%的地方，这个时候上边框就贴在中线上，也就是说需要居中的元素再向上滑动自身一半的距离就能把自己刚好垂直居中起来，你想想看是不是这样的？所以最好是各个浏览器完美居中了。

      好了，今天暂时先写到这里。貌似快要看到js部分了吧，我还是希望继续写写，我的逻辑不是特别强，文章写出来可能也有点语言不通的地方，那就劳烦各位多自己动手实现实现，这样的学习是最好的，如果你也像我一样比较空的话不妨也像我这样通过博客记录自己学习的轨迹，这对自己的学习应该是特别有好处的。