CSS 原来可以这样写(一)
今天不说华而不实的东西,给大家分享实实在在的关于CSS的常见问题解决方法,有心的小伙伴记得收藏起来(记在脑子里哦)。
废话少说了,两个项目让我遇到一些问题关于css可以解决的问题。总结了一下分享给大家吧。分为三篇文章给大家看吧,估计一篇文章太长了会引起反感的。
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的黄色焦点框
input,button,select,textarea{ outline:none;} textarea{ font-size:13px; resize:none;}
注:去掉chrome记住密码后自动填充表单的黄色背景
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}