XHTML+CSS整站网页建立 > 我所遇到的一些问题及其解决方案

XHTML+CSS整站网页

所遇到的一些坑及填坑方案

一、清楚浮动的几种方法及其优略分析

为什么要清楚浮动？

浮动元素会影响它的兄弟元素的位置，并且因为置浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。

（1）空div法

ps:在 W3C 中，所有的 HTML 标签 display 的默认值都为 inline

<div class="box">

    <div class="main left">我设置了左浮动 float: left</div>

    <div style="clear: both;"></div>

    <div class="aside">我是页脚，我的上面添加了一个设置了 clear: both 的空 div</div>

</div>  

缺点：违背结构与表现分离原则，且后期维护不方便。

（2）overflow 方法

在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。另外在 IE6 中还需要触发 hasLayout （类似BFC），例如为父元素设置容器宽高或设置 zoom：1

<div class="box" style="overflow: hidden; *zoom: 1;">

    <div class="main left">我设置了左浮动 float: left</div>

    <div class="aside left">我是页脚，但是我也设置了左浮动。</div>

</div>

原理：overflow:hidden触发了父元素的BFC使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

缺点：当元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条。

（3） 使用 :after 伪元素的方法

结合 :after 伪元素（这个伪元素代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器。

<style>

    .clear_float {/* 触发IE6 hasLayout */ zoom: 1; }

    .clear_float:after { content:" "; display: block; width:0; height: 0; clear: both; visibility: hidden; }

</style>

<div class="clear_float">

    <div class="main left">我设置了左浮动 float: left</div>

    <div class="aside left">我是页脚，但是我也设置了左浮动。</div>

</div>

clear:both是清除新增的空div的浮动。整个过程，叫做闭合浮动。

二、inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距

去除inline-block元素间间距有很多种方法。

我所采用的方法是将父元素的font-size设为0。

其他解决方法：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

#### 三、如何去除按钮点击时出现的边框

默认的按钮有边框，可以通过border:none去除，可是当点击按钮的时候边框又会出现。

只需加入以下代码即可解决

*:focus {
    outline: none;
}

四、表单提交按钮鼠标放在上边为什么不显示小手？

这是因为它的cursor属性在作怪。有的浏览器默认是光标，所以为了统一，我们最好将它统一设为cursor:pointer，这样一来所有按钮鼠标移上去时就可以都显示为一只手了。

#### 五、大部分边框可以通过CSS来生成，不必在设计图中再切一个背景

视频中的很多盒子的背景都是在设计图中切出来通过背景平铺来实现的，其实有的地方的背景完全没必要去切图，直接通过CSS生成就可以99%地还原设计。

比如下面的这个滚动栏的背景

直接可以设置盒子的边框再给边框加上阴影即可，简单高效。

.item_container {
    width: 688px;
    height: 180px;
    border: 1px solid #c0c0c0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 0 20px #c0c0c0;
    -moz-box-shadow: 0 0 20px #c0c0c0;
    box-shadow: 0 0 20px #c0c0c0;
}