CSS 原来可以这样写(一)

CSS 原来可以这样写(一)

 

今天不说华而不实的东西,给大家分享实实在在的关于CSS的常见问题解决方法,有心的小伙伴记得收藏起来(记在脑子里哦)。

废话少说了,两个项目让我遇到一些问题关于css可以解决的问题。总结了一下分享给大家吧。分为三篇文章给大家看吧,估计一篇文章太长了会引起反感的。

树懒闪电

树懒闪电(ps: 哈哈哈)

 

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}

 

未经允许不得转载:小月博客 » CSS 原来可以这样写(一)
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏