常用的css的技巧

1.在做项目当中，由静态页面来载入到项目中，作为动态数据的部分，若是这个动态数据，前面或者后面有需要图片显示（图片是用background来显示的），一般不用float:left或者right,而是padding。

例如：预览

2、做瑞祥装饰的手机端时，遇到一个问题，

3、很多时候我们写导航的时候，导航每个li之间可能会有间隔线，但是我们经常会去要设置最后一个间隔线为无，一般会使用 li:last-child。

li:last-child{border-right:none;}

4、经常会遇到需要强制不折行，但是因为不常用，总是不记得.

p{word-break:break-all; white-space:nowrap;}

5.还有一个相当不常用，就是关于汉字注音 — 使用ruby标签和ruby-align属性,可以利用ruby-align设置对齐方式。

<ruby style="ruby-align:right">注音<rt>zhuyin</rt></ruby>

6.常用的超过宽度的内容自动截断，并且显示省略号。(定义一个宽度，再加上 text-overflow:ellipsis; white-space:nowrap; overflow:hidden;)

<ul>
        
        <li>CSS实战精萃 - Pro CSS Techniques </li>
        <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败</li>
        <li>CSS布局实例：CSS标签切换代码实例教程</li>
        <li>Web标准：改变您的网页制作思维方式</li>
        <li>解决IE7以下版本不支持无A状态伪类的几种方法！</li>
        <li>CSS去除表格td默认间距及制作1px细线表格  </li>
</ul>


ol{300px; margin:50px auto;}
li {100px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

7.平时写table时，经常在表格中因为文字过多，而导致挤压临近数据，如下图

所以一般在平时写table的时候，还是要有习惯，给table中每个td一定的宽度，或者宽度比，然后再加上word-wrap: break-word

如下面代码：

 <tr>
                                        <th width="2%">
                                            <input id="chkAll" name="chkAll" runat="server" type="checkbox" onclick="Check(this, 'chkItem')" title="全选" /></th>
                                        <th width="4%">编号</th>
                                        <th width="4%">地区</th>
                                        <th width="8%">材料名称</th>
                                        <th width="4%">品牌</th>
                                        <th width="4%">规格</th>
                                        <th width="12%">所属材料</th>
                                        <th width="5%">原供价</th>
                                        <th width="5%">现供价</th>
                                        <th width="5%">原配送</th>
                                        <th width="5%">现配送</th>
                                        <th width="7%">申请理由</th>
                                        <th width="7%">打回理由</th>
                                        <th width="7%">详细状态</th>
                                        <th width="7%">审核状态</th>
                                        <th width="7%">申请时间</th>
                                        <th width="7%">执行时间</th>
                                    </tr>



.tbl_2 td,.tbl_2 th {
    height: 35px;
    line-height:35px;
    border-bottom:1px dashed #f0f0f0;
    color:#18191B;
    font-size:13px;   
    word-wrap: break-word; 
}
.tbl_2 td span {
    99%;
    padding:0 2px;
}

效果如下图所示：