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