DIV常见任务有哪些

当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的位置：

代码如下:

vartop=$(event.target).offset().top;
varleft=$(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修改。看下面的例子：

代码如下:

上面只是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|。
Letter-spacing：定义了每个字母之间的间距，取值：Normal|。
Text-decoration：定义文字的"装饰"样式，取值范围：None|underline|overline|line-through|blink。
Vertical-align：定义了元素在垂直方向上的位置，取值：Baseline|sub|super|top|text-top|middle|bottom|text-bottom|。
text-transform：使文本转换为其它形式，取值：Capitalize|uppercase|lowercase|none。
Text-align：定义了文字的对齐方式，取值：Left|right|center|justify。
Text-indent：定义了文本的首行的缩进方式，取值：|。
Line-height：定义了文本的行高，取值：Normal|||。

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

代码如下:

我们看到经过文本属性处理的文本字与字之间多了间距，行与行之间多了行高，对齐方式变成了两端对齐，并且段首又多缩进了两格。

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属性分成几行来写，例如：

代码如下: