分类： 系统运维
2012-10-08 15:59:16
随着经验的积累，你会发现每种标签都有它不一样的特性。就好像88个钢琴键，每种都有不一样的声音，每一种的存在都有它的意义。钢琴师能用这有限的琴键演奏出最美的音乐。使用最合适的标签来构造最美的页面，也是一种艺术。
熟悉标签的属性，是能熟练使用这些标签的前提 ，熟悉了这些音符，在看到曲子的时候，你不需要故意的按下某一个钢琴键，那个音符会召唤你的手指。
我现在要说的是一个最重要的音符：DIV。
经常听到有人说起“div+css技术”。我听到他们这么说，就故意问他们：为什么是div+css？而不是html+css，毕竟我们页面里其它标签还是会占绝大部分。至今为止，我没有听过到一个满意的答案。
DIV是一个没有意义的标签，它的出现并不像ol是有序列表，table是表格，a是超链接。div就是一个无意义的块属性标签。正是因为它没有意义，它才有了超越其他标签的地位，因为DIV为布局而生的默认属性，我们常用div来布局，而很少div直接放内容。我们习惯说的“div+css”实际上就是指的布局思想，是为了和用table布局相区别。（关于我们为什么用div+css而不用table布局，为什么我们要手写代码而不用DW，我会再写一篇文章，这里不赘述）
DIV有以下的特点：
第一：宽度默认扩展到最大限度，高度为内容高度（在高度小于行高时，ie6.7;遨游会有行高撑开高度的情况，请参看前面得浏览器兼容性文章http://hi.baidu.com/kuntakinte/blog/item/395d5b35a86d2d81a71e1262.html）。
下图是默认满屏的情况，在父标签也满屏或者是最外层标签时的情况。
代码如下：
第二：有padding情况下，宽度不会增加，依旧认扩展到最大限度，不会超出。（除非padding大小超过父容器大小）
下图为有padding-left的情况
代码如下：
第三:有margin的情况下，div标签依旧扩展到最大宽度，这时因为margin的限制，宽度会相应变小。
下图为有margin-left：400px的div标签
代码如下：
第四，float后的div，默认内容撑开宽度：
代码如下：
第五：div嵌套时，默认内层div撑开高度，外层div限制宽度。
注：根据盒模型，我们可以知道因为外层的边框占了1像素的一圈，所以子标签会比父标签高和宽分别少2px；如果没有边框的话，3个div大小相同
代码如下：
看到上面这些，大家可能觉得非常简单，但是真正能熟练的应用这些默认属性，做到的人却很少，下面举几个具体的例子
例子一：左边导航宽度固定，右边内容部分大小屏幕自适应。
代码如下：
例子二：宽度可扩展的圆角效果，如：
大家不妨看下前面的文章（http://hi.baidu.com/kuntakinte/blog/item/12be4b443d5c2188b2b7dcb3.html）有详细的介绍。
每一种标签都有它的优势。DIV就说到这里吧
