不让padding影响元素的宽度
box-sizing: border-box;
div {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 10px;
}
box-sizing: border-box;
则 div 的实际宽度为 100px。
css图片文字水平垂距中
//父级标签属性:
display:table-cell;
vertical-align:middle;
//距中标签元素:
display: inline-block;
vertical-align:middle;
两端对齐
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; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
多行文本溢出显示省略号(…)
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
- 对于表格,定义有点不一样:
table{
width:30em;
table-layout:fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
去掉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); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #24e9f0 , #2564ef); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #24e9f0 , #2564ef); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #24e9f0 , #2564ef); /* 标准的语法 */
/* box-shadow: 0 0.3rem 0.566666666666rem rgba(112,206,232,0.3); */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
取消chrome form表单的聚焦边框
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 -placeholder占位符颜色自定义
input:-moz-placeholder { color: #369; }
::-webkit-input-placeholder { color:#369; }
ie不支持html5标签的解决方案
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
css 初始化
/* reset.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;}