點滴筆記
记录点滴 / 记忆生活 / 工作笔记
Henry
All Rights Reserved.

CSS常用代码解决方案

清除浮动

.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;}

文字换行

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

两端对齐

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

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

input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}

去掉chrome记住密码后自动填充表单的黄色背景

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;}

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

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

全站变灰

html{
filter: grayscale(100%); 
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);    
-webkit-filter: grayscale(1);
}

取消textarea右下角可拖动手柄

resize:none

取消chrome form表单的聚焦边框

input,button,select,textarea{outline:none}
textarea{resize:none}

取消a链接的黄色边框

a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

取消input,button焦点或点击时蓝色边框

input{outline:none;}

限制字数

text-overflow:ellipsis; /*溢出时出现省略标识*/
white-space:nowrap;  /*强制文本在一行内显示*/
overflow:hidden; /*溢出隐藏*/

禁止选中文本

-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;

外阴影:box-shadow:X Y Npx #color;

内阴影:box-shadow:inset X Y Npx #color;

注:此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用来设置文字阴影 如果设置文字阴影请参考:text-shadow

鼠标经过,过渡效果

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */

transition: property/*名称*/ duration/*时长*/ timing-function/*速度曲线*/ delay/*开始时间*/;

2016-09-02