DIV+CSS常见难点解决方案

DIV+CSS难点之经验总结 在本文中，我们将总结一些常见的DIV+CSS难点，并提供相应的解决方案。 **网页居中显示** 在网页设计中，网页居中显示是一个常见的问题。要解决这个问题，需要设置两个地方，一个是body，一个是外边框div。CSS代码如下： body { width: 800px; margin: 0 auto; } .outer { width: 800px; margin: 0 auto; } **文字垂直居中显示** 在DIV中定义一个行高与其高度相同即可实现文字垂直居中显示。CSS代码如下： DIV { height: 200px; line-height: 200px; text-align: center; } **图片垂直居中显示** 在<img>标签中加入align="absmiddle"即可实现图片垂直居中显示。 **清除浮动** 如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码。如果在一行上只是一个DIV，好像不必清除浮动。CSS代码如下： .clear { clear: both; } **三列结构中的DIV写法** 适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。CSS代码如下： .left { width: 100px; float: left; } .right { width: 100px; float: right; } .main { margin: 0 100px; } **textarea在FireFox中不能自动换行的处理** 有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-all;word-wrap:wrap;也没有效果。主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。 **设置<ul>表列缩进值** 默认情况下，<ul>列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。CSS代码如下： ul { margin-left: -20px; } **水平导航条的制作示例** HTML代码如下： <ul> <li>导航1</li> <li>导航2</li> <li>导航3</li> </ul> CSS代码如下： ul { list-style: none; margin: 0; padding: 0; } li { display: inline; float: left; margin-right: 10px; } **FireFox和IE的CSS差异** 在写CSS代码时，需要注意FireFox和IE的差异。例如，FireFox支持@-moz-document，而IE支持*html*。我们可以使用hack来解决这个问题。例如： #1 { color: #333; /* Moz */ *html #1 { color: #666; /* IE6 */ *+html #1 { color: #999; /* IE7 */ } 通过这种方法，我们可以在不同的浏览器中实现不同的样式。