DIV常见任务(上) 常规任务

作为最常用的布局元素，DIV在Web开发中起着至关重要的作用。这里总结一下我在使用DIV中遇到的各种操作。

1.div显示滚动条
这个是很常见的一个任务了，基本是通过CSS去实现滚动条。
(1)垂直滚动条
设置是否显示滚动条主要是在CSS中设置下列的属性：

overflow： visible | auto | hidden | scroll
overflow-x：横向滚动条
overflow-y：纵向滚动条

参数的意义：
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条
overflow:auto; 这个表示当你内容超过div高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条，可以这么实现：

或者

(2)水平滚动条
如果只想出现水平的滚动条，一般还要配合禁止换行的设置，例如：

(3)滚动条的外观
在IE中，主要是使用各种颜色属性：

scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色；
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色；
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色；
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色

在Chrome中，基本上是使用webkit专用属性设置：

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
    width: 5px;
    background-color: #CCCCCC;
    -webkit-border-radius: 6px;
}

2.禁止div的事件冒泡
这个基本上都是使用标准的event.stopPropagation()方法阻止事件冒泡，当然IE除外：

function BigDiv(event) {
      if (event.stopPropagation) {
          event.stopPropagation();//在基于firefox内核的浏览器中支持做法stopPropagation
      } else {
           event.cancelBubble = true;//基于ie的写法
      }

      // other codes...
  }

3.禁止div执行默认的行为

这个其实是一个普遍的问题，对于具有默认行为的元素，比如提交按钮的提交表单行为,，<a>元素的超链接行为等，我们如果在这些元素上应用事件，同时也往往希望取消它们的默认行为，这个通过在事件的回调函数中调用event.preventDefault();实现。

4.动态计算div的位置(比如常见的计算div弹出层的位置)
(1)DOM属性方式

offsetTop：当前对象到其上级层顶部的距离。不能对其进行赋值，设置对象到父对象顶部的距离需要使用style.top属性。
offsetLeft：当前对象到其上级层左边的距离.。不能对其进行赋值，设置对象到父对象左边的距离需要使用style.left属性。

这里要注意offsetTop与 style.top的区别(offsetLeft与style.left也是一样的道理)：

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px，通常需要使用parseInt转换成数值。
offsetTop 只读，而 style.top 可读写。
如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

注意：在FireFox中，给style.top赋值的时候，也要是字符串(带px)这种形式。

(2)CSS中position属性对位置的影响
position默认的属性值都是static，静态。但是position中最关键的属性值是relative（相对）以及absolute（绝对）。
往往我们会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。其实只要把其上一级的样式属性position设置为relative就可以了。也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。但是如果你在A中的padding="50px"，在A中的其他没有设置postion为absolute的会随着A的padding的值而变化，但是B不会变的它的position是相对上一级的。

这里再稍微啰嗦一下position的四个属性值：relative，absolute，fixed，static。还是以上面的代码为例：

relative
relative值意味着元素要根据它本身的位置进行相对的偏移。例如在上面的代码中，如果设定B设置了relative值，比如设置如下CSS代码：

#B {
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

我们可以这样理解，如果不设置relative属性，B的位置按照正常的文档流，它应该处于某个位置。但当设置B的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
注意：relative的偏移是基于对象的margin的左上侧的。

absolute

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当B的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

当B的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时B按照这个parent来进行定位。
当B不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

(3)Jquery方式
提示类弹出框是常见的一种方式，这个任务最重要的是计算弹出框的位置。通过事件对象获取到事件源, 然后可以使用offset()函数计算事件源相对于document的位置：

var top = $(event.target).offset().top;
var left = $(event.target).offset().left;

因为是相对于document，即页面左上角的位置，所以需要将弹出层放在Body元素中的第一层，即父类就是body。如果包含在其他元素中，需要确定任何一个父类的position样式设置为了relative。计算出来的top和left是事件源的位置，在此位置显示会将事件源对象遮盖住。所以通常需要手工做一些偏移，比如top+20。

5.隐藏div元素

css中隐藏元素可以有两种方式：display:none或者visibility:hidden。两种方式的不同之处在于设置display的值后元素完全隐藏，元素所占的位置也没有了，下面的元素上移。设置visibility后元素所占的位置还在，就是看不见。

6.div的子元素横排，竖排
使用float属性控制。div默认是竖排的，宽度是100%，CSS中设置float:left以后就变成横排了。如果想从横排中间断开，后面的还原成竖排，则需要使用clear:both修改。看下面的例子：

<div>
  <div style="float:left">aaaaaaaaaaaaaa</div>
  <div style="float:left">bbbbbbbbbbbbbb</div>
  以上这两个div就是横向排列。
  <div style="clear:both"></div>这个东西很重要，它清除上两个层的浮动，也就是说以下的层就继续垂直排列了。
  <div>这个层就垂直排列了</div>
  <div>这个层就垂直排列了</div>
</div>

上面只是float属性的一个简单应用。

float属性主要是用于控制元素的流向，也就是向右靠拢，还是向左靠拢。这里看一下float属性的语法：

float : none | left | right
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边

为了达到某些效果，通常我们需要在某个时候取消浮动以免对别的对象造成影响，这是通过上面介绍过的那个clear属性实现的：
clear属性有四个值：

clear:both|left|right|none;

简单来说呢，clear属性的作用就是“清除”浮动。如果某元素设置clear:left;表示该元素左边不存在浮动元素；相应的，clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。

7.设置div中文字的字体
先看一下CSS中控制文本的属性列表：

Word-spacing：定义了各个单词之间的间距，取值：Normal|<length>。

Letter-spacing：定义了每个字母之间的间距，取值：Normal|<length>。

我们可以从上面看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。举个例子来看看吧：

<p style="letter-spacing:5px;text-align:justify;text-indent: 4em;line-height：17pt">我们看到经过文本属性处理的文本字与字之间多了间距，行与行之间多了行高，对齐方式变成了两端对齐，并且段首又多缩进了两格。</p>

letter-spacing设置了字间距为5px，其中5px为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt。从上面的例子，我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。

行间距取决于字体的大小，一般来说，小的字号需要大一点的行间距来便于阅读，中文字体在网页上如果没有行间距的设定，对于阅读大段文字来说是读者的灾难，所以适当设定line-height是非常必要的。一般地， line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里，一般设定字体的120%作为缺省的行间距。css里的 line- height 设定，是均分后加在每一行的上下，也就是说，如果 line-height 设定为 20px 的话，那么每一行文字的上下各有10px的间距。

8. 设置div的tooltip分行显示
在html种对于链接和图片，我们可以通过添加title属性以显示一些说明文字，一般情况下，这些文字都是显示成一行，那么有没有办法让它以多行的方式显示呢？解决的方法有两种：
(1).将title属性分成几行来写，例如：

(2).第一行相对来说不够直观，我们还可以在需换行的地方添加
（&为半角)或来实现：

9.鼠标中键控制水平滚动条

在Chrome和FireFox中，一般都是鼠标中键控制垂直滚动条，如果你的DIV只有水平控制条，默认情况下，鼠标中键是不起滚动作用的，这个时候需要自己实现。

首先，挂接鼠标滚轮事件：

// Mouse wheel event for Non FireFox
element.onmousewheel = fireElementScrolled;
// Mouse wheel event for FireFox
element.addEventListener('DOMMouseScroll', fireElementScrolled, false);

这里FireFox的特殊一点，需要使用addEventListener这种方式挂接。

然后，实现fireElementScrolled方法：

fireElementScrolled = function(event) {
  var rolled = 0;
  if (event.wheelDelta) {
     rolled = event.wheelDelta;
  }
  else {
    // Firefox:需要处理一下下

    rolled = -event.detail * 30;
  }
  var htmlElement = document.getElementById('test');
  htmlElement.scrollLeft = htmlElement.scrollLeft - rolled;
  event.preventDefault();
  return false;
};

原理很简单，就是拿到滚轮滚动的距离，处理后给div元素的scrollLeft 属性赋值即可。

10. 子元素居中
(1)水平居中

普通的文字和图片居中很好办，设置父容器的CSS样式包含text-align:center;即可。
当子元素是DIV等元素的情况稍微复杂一点，以子元素为div为例，如果只有一个子div，则可以通过设置子元素的CSS样式包含margin: 0 auto;实现居中。例如下面的例子：

<div id="a" style="400px;height:300px;border:1px solid green;">
　　<div id="b" style="margin: 0 auto;200px;border:1px solid blue;">简单的一个子DIV居中问题</div>
</div>

如果含有多个子元素，我通常是多加一层div来实现，看例子：

(2)垂直居中
垂直居中麻烦一点，有一种做法很简单，可以同时实现水平和垂直居中。首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外面去。接下去，写上子元素的height和width，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。当然，这里父元素也要先写上width和height。看例子：

实用参考
一个不错的JS博客：http://www.zhangxinxu.com/wordpress/
JavaScript标准Selection操作：http://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html
CSS资料，非常不错：http://htmlcss.wikia.com/wiki/Category:CSS_Properties
JS中与位置和尺寸相关的属性介绍http://hi.baidu.com/yangyimingbd/item/dc02db0f469ed21eacdc702c
CSS中position详解：http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html