web前端技术?css

本文是常用代码的收集，诣在为css学习填坑，无任何技术含量。

css 2.x code

1. 文字换行

/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;

2. 两端对齐

text-align:justify;text-justify:inter-ideogra

3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

使用Webkit核心的浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页引擎，但是在开发中，让人感觉很多余的一个特性就是，在表单项中的控件聚焦时总会出现一个黄色边框，特别是input[text]和textarea，并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能。

有的时候黄色边框很影响页面效果，并且textarea拖动改变大小之后直接影响布局，所以为了不使这些多余的功能和效果影响页面，可以使用一下几句CSS清除掉chrome浏览器的默认效果，代码如下：

取消表单项聚焦时产生的黄色边框：
input,button,select,textarea{outline:none}

取消textarea的拖动改变大小的功能：
textarea{resize:none}

最后把以上两个CSS合并后如下：
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}

4. ie6: position:fixed

.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; }
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
*html{background-image:url(about:blank);background-attachment:fixed;}

5. clearfix

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
.clearfix{*zoom: 1;}
.clearfix:after{clear:both;display:table;content:"”;}
.clearfix{overflow:hidden;_zoom:1;}

6. seperate-table

.tab{border-collapse:separate;border:1px solid #e0e0e0;}
.tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff
#deedf6 #deedf6 #fff;}
.tab th{background:#edf4f0;}
.tab tr.even td{background:#fff;}

<table class="tab" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<th>111</th>
<td>222</td>
</tr>
<tr>
<th>111</th>
<td>222</td>
</tr>
</table>

7. min-height: 最小高度兼容代码

.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}

8. 鼠标不允许点击：

cursor:not-allowed;

9. mac font: osx平台字体优化

font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微软雅黑';

10. 省略号：

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}