前端开发之路--关于CSS的若干个小技巧（四）

1、table布局td内容换行。

使用table布局时，经常会遇到这样的问题，td标签中的文字内容过长导致将table的宽度撑到变形，影响正常显示，这里就要考虑到对td标签里的内容进行换行，这里借助CSS的两个样式：word-wrap和work-break。

给td设置如下样式：

word-wrap:break-word;

word-break:break-all;

2、但有的时候，你会发现即使设置了上一步的样式，依然是没有效果，这时候你可以考虑再给td标签添加一个样式：

white-space:normal;

它的设置是影响着td内容换行的效果的。

3、CSS的编码设置。

一般是推荐“utf-8”,这里要注意的在CSS文件中，编码的设置是要写在最前面的，包括在注释之上，否则设置是会失效的。

4、命名空间的规范。

对于类的命名开头，要突出其特性（见名知意），可以将特性简单分为以下几类：布局（排版），状态（交互），工具（较为独立的），组件（多复用的），钩子（方便js操作）；

不太推荐类名字过长，需要连接符的时候可以考虑“-”（JS的连接符通常使用“_”）。

5、类的书写规则。

定义的选择器名，属性以及属性值，推荐统一小写；

当一个样式包含若干个选择器时，每个选择器可以独占一行（不用考虑空间浪费的问题，这只是开发版本，后期项目打包自动压缩即可）；

选择器的命名不可以太随意，比如123，abc这里类的不推荐使用；

每条样式独占一行，以分号结尾；

6、样式的数值设置。

对于颜色的设置普遍使用三种：rgb模式，hex(16进制)模式，关键字模式。

关键字模式（就是常见的white，black等）使用方便，但颜色种类较少；

hex模式和rgb模式可以满足颜色颗粒化选择的需求，但是浏览器存在差异性，在某版本的IE浏览器中，浏览器会将hex模式的颜色解析为rgb模式呈现；

rgb模式可以拓展为rgba模式，提供了透明度的选择。