二、绝对定位和浮动的区别和运用

　　学习到现在，定位和浮动也都涉及到了，但有些朋友可能还在迷惑，两者都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？

　　当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

　　而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

　　一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。

　　三、 css自适应宽度滑动门菜单

　　CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿上边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。下面我们讲一下自适应宽度按钮，和菜单原理是一样，因为自适应宽度菜单在《新手常见问题》中已经讲过了，如果学会自适应按钮，你还不会制作自适应菜单的话，请阅读http://www.aa25.cn/div_css/898.shtml。

　　你是否还记得在第五章时学习的css按钮实例（如下图），当时只做了一个按钮，它这里是三个按钮，而且宽度不一样，今天我们还以这个按钮为基础，制作宽度自应适应的按钮。

　　那么它的实现原来是什么？我们看下边一张图。要想实现自适应宽度，需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐，如下的原理图，

　　四条辅助线内为一个按钮元素，绿色部分为span，然后定义它的背景图片靠右侧对齐，而左侧的部分为a的背景图片，定义靠左侧对齐。当文字多时，会把span撑开，这实现了自适应宽度的按钮了。这里需要一张如下的图片，它的宽度要宽于你所应用的最宽宽度，这样才能显示正常，同时根据以前学习的css Sprites技术，把背景图片和鼠标经过图片放到一张图片上。

　　拿第五章css按钮的例子代码进行修改，先改为背景图片使用上图，再增加两个字数不等按钮，并在文字上增加span标签

　　提示：可以先修改部分代码后再运行

　　预览显示效果如下所示，因背景图片比较长，所以右侧显示不太友好，下一步就需要把a的宽度给去掉，设置span的背景，使右侧显示正常，另外把三个按钮横向排列

　　在a上增加如下代码：

　　float:left; margin:5px;

　　横向排列，并增加5px的外边距，现在看下效果吧。为了美观，下一步需要a的左侧增加填充，使文字不死贴左侧，同理span右侧需要增加一个同样的填充。

　　a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

　　a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}

　　a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}

　　a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}

　　对比以上代码，可能你已经发现，原来a顶部的3px给去掉了，把高度改为37px了，行高也改为37px了，为什么这么做，大家动手试下就明白了。然后设置a下span的背景图片，span默认是内联元素，所以需先转换为块级元素；另外需增加鼠标经过时span的样式。显示效果如下，对比一下实例图，是不是实现了这样的效果。