CSS常用的封装方法汇总

1. pc-ret pc样式初始化

/* normalize.css */html {  line-height: 1.15;  /* 1 */  -ms-text-size-adjust: 100%;  /* 2 */  -webkit-text-size-adjust: 100%;  /* 2 */}body {  margin: 0;}article,aside,footer,header,nav,ction {  display: block;}h1 {  font-size: 2em;  margin: 0.67em 0;}figcaption,figure,main {  /* 1 */  display: block;}figure {  margin: 1em 40px;}hr {  box-sizing: content-box;  /* 1 */  height: 0;  /* 1 */  overflow: visible;  /* 2 */}pre {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}a {  background-color: transparent;  /* 1 */  -webkit-text-decoration-skip: objects;  /* 2 */}abbr[title] {  border-bottom: none;  /* 1 */  text-decoration: underline;  /* 2 */  text-decoration: underline dotted;  /* 2 */}b,strong {  font-weight: inherit;}b,strong {  font-weight: bolder;}code,kbd,samp {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}dfn {  font-style: italic;}mark {  background-color: #ff0;  color: #000;}small {  font-size: 80%;}sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}audio,video {  display: inline-block;}audio:not([controls]) {  display: none;  height: 0;}img {  border-style: none;}svg:not(:root) {  overflow: hidden;}button,input,optgroup,lect,textarea {  font-family: sans-rif;  /* 1 */  font-size: 100%;  /* 1 */  line-height: 1.15;  /* 1 */  margin: 0;  /* 2 */}button,input {  /* 1 */  overflow: visible;}button,lect {  /* 1 */  text-transform: none;}button,html [type="button"],/* 1 */[type="ret"],[type="submit"] {  -webkit-appearance: button;  /* 2 */}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="ret"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="ret"]:-moz-focusring,[type="submit"]:-moz-focusring {  outline: 1px dotted buttontext;}fieldt {  padding: 0.35em 0.75em 0.625em;}legend {  box-sizing: border-box;  /* 1 */  color: inherit;  /* 2 */  display: table;  /* 1 */  max-width: 100%;  /* 1 */  padding: 0;  /* 3 */  white-space: normal;  /* 1 */}progress {  display: inline-block;  /* 1 */  vertical-align: baline;  /* 2 */}textarea {  overflow: auto;}[type="checkbox"],[type="radio"] {  box-sizing: border-box;  /* 1 */  padding: 0;  /* 2 */}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {  height: auto;}[type="arch"] {  -webkit-appearance: textfield;  /* 1 */  outline-offt: -2px;  /* 2 */}[type="arch"]::-webkit-arch-cancel-button,[type="arch"]::-webkit-arch-decoration {  -webkit-appearance: none;} ::-webkit-file-upload-button {  -webkit-appearance: button;  /* 1 */  font: inherit;  /* 2 */}details,/* 1 */menu {  display: block;}summary {  display: list-item;}canvas {  display: inline-block;}template {  display: none;}[hidden] {  display: none;}/* ret */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldt,legend,input,button,textarea,menu {  margin: 0;  padding: 0;  box-sizing: border-box;}2. phone-ret/* normalize.css */html {  line-height: 1.15;  /* 1 */  -ms-text-size-adjust: 100%;  /* 2 */  -webkit-text-size-adjust: 100%;  /* 2 */}body {  margin: 0;}article,aside,footer,header,nav,ction {  display: block;}h1 {  font-size: 2em;  margin: 0.67em 0;}figcaption,figure,main {  /* 1 */  display: block;}figure {  margin: 1em 40px;}hr {  box-sizing: content-box;  /* 1 */  height: 0;  /* 1 */  overflow: visible;  /* 2 */}pre {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}a {  background-color: transparent;  /* 1 */  -webkit-text-decoration-skip: objects;  /* 2 */}abbr[title] {  border-bottom: none;  /* 1 */  text-decoration: underline;  /* 2 */  text-decoration: underline dotted;  /* 2 */}b,strong {  font-weight: inherit;}b,strong {  font-weight: bolder;}code,kbd,samp {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}dfn {  font-style: italic;}mark {  background-color: #ff0;  color: #000;}small {  font-size: 80%;}sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}audio,video {  display: inline-block;}audio:not([controls]) {  display: none;  height: 0;}img {  border-style: none;}svg:not(:root) {  overflow: hidden;}button,input,optgroup,lect,textarea {  font-family: sans-rif;  /* 1 */  font-size: 100%;  /* 1 */  line-height: 1.15;  /* 1 */  margin: 0;  /* 2 */}button,input {  /* 1 */  overflow: visible;}button,lect {  /* 1 */  text-transform: none;}button,html [type="button"],/* 1 */[type="ret"],[type="submit"] {  -webkit-appearance: button;  /* 2 */}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="ret"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="ret"]:-moz-focusring,[type="submit"]:-moz-fo计划生育宣传信息cusring {  outline: 1px dotted buttontext;}fieldt {  padding: 0.35em 0.75em 0.625em;}legend {  box-sizing: border-box;  /* 1 */  color: inherit;  /* 2 */  display: table;  /* 1 */  max-width: 100%;  /* 1 */  padding: 0;  /* 3 */  white-space: normal;  /* 1 */}progress {  display: inline-block;  /* 1 */  vertical-align: baline;  /* 2 */}textarea {  overflow: auto;}[type="checkbox"],[type="radio"] {  box-sizing: border-box;  /* 1 */  padding: 0;  /* 2 */}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {  height: auto;}[type="arch"] {  -webkit-appearance: textfield;  /* 1 */  outline-offt: -2px;  /* 2 */}[type="arch"]::-webkit-arch-cancel-button,[type="arch"]::-webkit-arch-decoration {  -webkit-appearance: none;} ::-webkit-file-upload-button {  -webkit-appearance: button;  /* 1 */  font: inherit;  /* 2 */}details,/* 1 */menu {  display: block;}summary {  display: list-item;}canvas {  display: inline-block;}template {  display: none;}[hidden] {  display: none;}/* ret */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldt,legend,input,button,textarea,menu {  margin: 0;  padding: 0;  box-sizing: border-box;}html,body {  /* 禁止选中文本 */  -webkit-ur-lect: none;  ur-lect: none;  font: oswald, 'open sans', helvetic十二年义务教育a, arial, sans-rif}/* 禁止长按链接与图片弹出菜单 */a,img {  -webkit-touch-callout: none;}/*ios android去除自带阴影的样式*/a,input {  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input[type="text"] {  -webkit-appearance: none;}

2. phone-ret

/* normalize.css */html {  line-height: 1.15;  /* 1 */  -ms-text-size-adjust: 100%;  /* 2 */  -webkit-text-size-adjust: 100%;  /* 2 */}body {  margin: 0;}article,aside,footer,header,nav,ction {  display: block;}h1 {  font-size: 2em;  margin: 0.67em 0;}figcaption,figure,main {  /* 1 */  display: block;}figure {  margin: 1em 40px;}hr {  box-sizing: content-box;  /* 1 */  height: 0;  /* 1 */  overflow: visible;  /* 2 */}pre {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}a {  background-color: transparent;  /* 1 */  -webkit-text-decoration-skip: objects;  /* 2 */}abbr[title] {  border-bottom: none;  /* 1 */  text-decoration: underline;  /* 2 */  text-decoration: underline dotted;  /* 2 */}b,strong {  font-weight: inherit;}b,strong {  font-weight: bolder;}code,kbd,samp {  font-family: monospace, monospace;  /* 1 */  font-size: 1em;  /* 2 */}dfn {  font-style: italic;}mark {  background-color: #ff0;  color: #000;}small {  font-size: 80%;}sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}audio,video {  display: inline-block;}audio:not([controls]) {  display: none;  height: 0;}img {  border-style: none;}svg:not(:root) {  overflow: hidden;}button,input,optgroup,lect,textarea {  font-family: sans抚顺月牙岛-rif;  /* 1 */  font-size: 100%;  /* 1 */  line-height: 1.15;  /* 1 */  margin: 0;  /* 2 */}button,input {  /* 1 */  overflow: visible;}button,lect {  /* 1 */  text-transform: none;}button,html [type="button"],/* 1 */[type="ret"],[type="submit"] {  -webkit-appearance: button;  /* 2 */}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="ret"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="ret"]:-moz-focusring,[type="submit"]:-moz-focusring {  outline: 1px dotted buttontext;}fieldt {  padding: 0.35em 0.75em 0.625em;}legend {  box-sizing: border-box;  /* 1 */  color: inherit;  /* 2 */  display: table;  /* 1 */  max-width: 100%;  /* 1 */  padding: 0;  /* 3 */  white-space: normal;  /* 1 */}progress {  display: inline-block;  /* 1 */  vertical-align: baline;  /* 2 */}textarea {  overflow: auto;}[type="checkbox"],[type="radio"] {  box-sizing: border-box;  /* 1 */  padding: 0;  /* 2 */}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {  height: auto;}[type="arch"] {  -webkit-appearance: textfield;  /* 1 */  outline-offt: -2px;  /* 2 */}[type="arch"]::-webkit-arch-cancel-button,[type="arch"]::-webkit-arch-decoration {  -webkit-appearance: none;} ::-webkit-file-upload-button {  -webkit-appearance: button;  /* 1 */  font: inherit;  /* 2 */}details,/* 1 */menu {  display: block;}summary {  display: list-item;}canvas {  display: inline-block;}template {  display: none;}[hidden] {  display: none;}/* ret */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldt,legend,input,button,textarea,menu {  margin: 0;  padding: 0;  box-sizing: border-box;}html,body {  /* 禁止选中文本 */  -webkit-ur-lect: none;  ur-lect: none;  font: oswald, 'open sans', helvetica, arial, sans-rif}/* 禁止长按链接与图片弹出菜单 */a,img {  -webkit-touch-callout: none;}/*ios android去除自带阴影的样式*/a,input {  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input[type="text"] {  -webkit-appearance: none;}

3. 公共样式提取

/* 禁止选中文本 */.usn{    -webkit-ur-lect:none;    -moz-ur-lect:none;    -ms-ur-lect:none;    -o-ur-lect:none;    ur-lect:none;}/* 浮动 */.fl { float: left; }.fr { float: right; }.cf { zoom: 1; }.cf:after {    content:".";    display:block;    clear:both;    visibility:hidden;    height:0;    overflow:hidden;}/* 元素类型 */.db { display: block; }.dn { display: none; }.di { display: inline }.dib {display: inline-block;}.transparent { opacity: 0 }/*文字排版、颜色*/.f12 { font-size:12px }.f14 { font-size:14px }.f16 { font-size:16px }.f18 { font-size:18px }.f20 { font-size:20px }.fb { font-weight:bold }.fn { font-weight:normal }.t2 { text-indent:2em }.red,a.red { color:#cc0031 }.darkblue,a.darkblue { color:#039 }.gray,a.gray { color:#878787 }.lh150 { line-height:150% }.lh180 { line-height:180% }.lh200 { line-height:200% }.unl { text-decoration:underline; }.no_unl { text-decoration:none; }.tl { text-align: left; }.tc { text-align: center; }.tr { text-align: right; }.tj { text-align: justify; text-justify: inter-ideograph; }.wn { /* 强制不换行 */    word-wrap:normal;    white-space:nowrap;}.wb { /* 强制换行 */    white-space:normal;    word-wrap:break-word;    word-break:break-all;}.wp相伴走一生 { /* 保持空白序列*/    overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.wes { /* 多出部分用省略号表示 , 用于一行 */    overflow:hidden;    word-wrap:normal;    white-space:nowrap;    text-overflow:ellipsis;}.wes-2 { /* 适用于webkit内核和移动端 */    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;    overflow: hidden;} .wes-3 {    dis关于中秋节的古诗有哪些play: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3;    overflow: hidden;}.wes-4 {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 4;    overflow: hidden;}/* 溢出样式 */.ofh { overflow: hidden; }.ofs {overflow: scroll; }.ofa {overflow: auto; }.ofv {overflow: visible; }/* 定位方式 */.ps {position: static; }.pr {position: relative;zoom:1; }.pa {position: absolute; }.pf {position: fixed; }/* 垂直对齐方式 */.vt {vertical-align: top; }.vm {vertical-align: middle; }.vb {vertical-align: bottom; }/* 鼠标样式 */.csd {cursor: default; }.csp {cursor: pointer; }.csh {cursor: help; }.csm {cursor: move; }/* flex布局 */.df-sb {    display:flex;    align-items: center;    justify-content: space-between;}.df-sa {    display:flex;    align-items: center;    justify-content: space-around;}/* 垂直居中 */.df-c {    display: flex;    align-items: center;    justify-content: center;}.tb-c {    text-align:center;    display:table-cell;    vertical-align:middle;}.ts-c {    position: absolute;    left: 50%; top: 50%;    transform: translate(-50%, -50%);}.ts-mc {    position: absolute;    left: 0;right: 0;    bottom: 0; top: 0;    margin: auto;}

以上就是css常用的封装方法汇总的详细内容，更多关于css 封装示例的资料请关注www.887551.com其它相关文章！