CSS实现文本自动换行
2008-08-20在常规的情况下，当内容超出外部DIV的宽度时，文本会自动换行，但是在非正常情况下，文本可能就会撑出外部DIV的宽度而不能实现自动换行。该非正常情况指的是，连续的英文字母或者数字，因为连续的英文字母或者数字被当做了一个单词，而一个单词内默认是不换行的，于是就造成了撑破外部DIV的问题。
解决这个问题的方法是，在外部DIV的CSS样式属性里设置“word-wrap:break-word;”或者“word-break:break-all;”，即可强制文本在外部DIV宽度之内换行。
但是很不幸的是，这个目前只在IE下有效，在Firefox下依然无法完成换行。
CSS制作圆角导航的另一思路
2008-08-20制作圆角导航其实跟制作圆角边框是一样的道理，有一种很常见的方法就是使用CSS绝对定位，切四个圆角的小图片，然后分别定位在四个角，这样就可以实现自动伸缩。但是这样的代码因为嵌套的DIV过多，而显得有些复杂，这里提供另外一种思路，即是通过CSS背景的定位去制作。
在CSS背景属性中有一项是background-position，即是背景图像的定位，属性值可用英文（top | center | bottom | left | center | right）来定位，也可使用数值来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。通过background-position这个属性可以让背景图像随意定位在需要的位置。
在CSS背景属性中还有另外一项是background-repeat，即背景图像是否平铺。通过这个属性可以决定背景图像的平铺方式，是在纵向上平铺，还是在横向上平铺，或者是不平铺。
CSS布局之浮动（三）
2008-08-15两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。
中间定宽，左右两侧自适应：
左右两侧定宽中间自适应的布局已经完成了，那么是否可以反过来呢？让中间定宽，而左右两侧自适应呢？答案是当然可以！HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head><body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>
CSS布局之浮动（二）
2008-08-15在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。
左侧中间定宽，右侧自适应：
因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head><body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>
CSS布局之浮动（一）
2008-08-14CSS浮动一直是个比较让人郁闷的问题，很多的布局问题都出在浮动上，特别是当浮动的列数很多时，但其实只要理解了两列结构的浮动，面对多列数的浮动也不会再心慌，因为两列结构的左右浮动是最基本的浮动，也是更多浮动的基础，三列、四列等的浮动都是出于此的。
来看一下几种常见的CSS两列浮动，CSS代码见以下各分类，HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head><body>
<div id=”a”>开始我是在左边，后面可能到右边</div>
<div id=”b”>开始我是在右边，后面就可能跑到左边去</div>
</body>
</html>