CSS 经常使用样式提升网页编写速度

时间 2020-01-06

标签 css 经常使用样式提升网页编写速度栏目 CSS 繁體版

原文原文链接

*{margin:0px;padding:0px;}
/内外边距初始化/
html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr { margin: 0;padding: 0;}
/去除 list 默认样式/
ul, ol {list-style-type: none;}
/去除 a 标签默认样式/
a {text-decoration: none;}
/左右浮动/
.fl {float: left;}
.fr {float: right;}
/清除浮动/
.clear{clear:both;}
.clearfix::after {display: block; height: 0; content: ""; clear: both; visibility: hidden;}
/不一样字号/
.f-13 {font-size: 13px;}
.f-14 {font-size: 14px;}
.f-16 {font-size: 16px;}
.f-18 {font-size: 18px;}
.f-20 {font-size: 20px;}
/元素类型/
.inline {display: inline;}
.block {display: block;}
.inline-block {display: inline-block;}
/box-sizing/
.border-box {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
}
/外边距/
.mar20 { margin:20px auto;}
.mar15 { margin:15px auto;}
.mar10 { margin:10px auto;}
/内边距/
.pad20 { padding:20px;}
.pad15 { padding:15px;}
.pad10 { padding:10px;}
/省略号/
.slh {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slhm {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/变灰/
/*html {
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);//谷歌浏览器
}*/
/*防复制
<body unselectable="on" onselectstart="return false;"></body>*/
/*表单对齐
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/ie6-8/
/ text-align-last:justify; ie9/
/ -moz-text-align-last:justify;ff/
/*-webkit-text-align-last:justify;chrome 20+
}
/* @media screen and (-webkit-min-device-pixel-ratio:0){ chrome
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}*/
/透明度/
.opacity{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
/首行缩进/
.shsj { text-indent:2em}
/字体对齐/
.textl {text-align:left}
.textc {text-align:center}
.textr {text-align:right}
/强制换行/
.qzhh {word-wrap:break-word; word-break:break-all; padding:0px;}
/图片连接边框/
.borimg{border:0 none;}
/ 鼠标样式 /
.pointer{ cursor:pointer;}
/ 定位关系 /
.absolute{ position:absolute;}
.relative{ position:relative;}
转载于猿2048:➣《CSS 经常使用样式提升网页编写速度》php

CSS 经常使用样式 提升网页编写速度

CSS 经常使用样式提升网页编写速度