css图片文字水平垂距中
父级标签属性:display:table-cell;vertical-align:middle;
距中标签元素:vertical-align:middle;display: inline-block;
两端对齐
text-align:justify;text-justify:inter-ideogra
文字不换行与超出时显示省略标记(…)
word-wrap: break-word;
.text-overflow{
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
浮动闭合 clearfix
.clearfix{overflow:hidden;_zoom:1;}
鼠标不允许点击
cursor:not-allowed;
渐变
.ui-btn{color:#fff;border:0;font-size: 16px;text-align: center;padding:10px; display:inline-block; cursor:pointer;box-sizing:border-box;border-radius: 1.5rem;
background: -webkit-linear-gradient(left, #24e9f0 , #2564ef);
background: -o-linear-gradient(right, #24e9f0 , #2564ef);
background: -moz-linear-gradient(right, #24e9f0 , #2564ef);
background: linear-gradient(to right, #24e9f0 , #2564ef);
outline:none;}
投影/阴影
.ui-btn-active{box-shadow:0 5px 17px rgba(0,0,0,.1); color: #fff;}
页面变灰 gray
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
input,button,select,textarea{outline:none}
textarea{resize:none}
取消a链接的黄色边框
a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
手机版本网页a标记虚线框问题
a:focus { outline:none; -moz-outline:none; }
input:-moz-placeholder { color: #369; }
::-webkit-input-placeholder { color:#369; }
ie不支持html5标签的解决方案
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
css 初始化
@charset "utf-8";
html{background:#fff;overflow:auto;}
body{min-width:1200px;font:12px/18px "Microsoft Yahei";font-weight:lighter;color:#333; -webkit-font-smoothing: antialiased; }
a{color:#333; text-decoration:none; cursor:pointer; outline: 0 none;}
a:hover{ text-decoration:none;color:#ff4f20;}
a:focus{-moz-outline-style:none; border:0px;blr:expression(this.onFocus=this.blur());}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td{margin:0; padding:0;}
header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}
ol,li,ul,dl,dt,dd{list-style:none;}
fieldset,img {border:0}
button,submit,input,select { vertical-align:middle;}
button,submit { cursor:pointer;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:lighter;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
select,button{font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; padding: 0; margin: 0;}
b,em,i{display:inline-block; font-weight:normal; font-style:normal;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix{ zoom:1;}
.container { width:1200px; position:relative; margin:0 auto;}
.fl{float:left;}
.fr{float:right;}