[分享]CSS中常见的复用代码

CSS作为现代网页开发中不可或缺的一部分，经常会使用到大量复用的代码。下面我们就来研究一下CSS中常见的复用代码。/ reset.css / html, body, div, span, applet...

CSS作为现代网页开发中不可或缺的一部分，经常会使用到大量复用的代码。下面我们就来研究一下CSS中常见的复用代码。

/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
} 

上面这些代码既可以直接使用，也可以结合其他代码使用。其中`reset.css`可以在项目开始时引入，重置HTML元素的默认样式，避免浏览器之间的兼容问题。而清除浮动则可以避免在构建布局时因为浮动所产生的问题，使用方式是在需要清除浮动的元素加上`clearfix`的class即可。

/* 字体Icon */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  text-decoration: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  content: "";
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

/* 左对齐 */
.text-left {
  text-align: left!important;
}
/* 右对齐 */
.text-right {
  text-align: right!important;
}
/* 居中对齐 */
.text-center {
  text-align: center!important;
} 

上面这些代码常用于前端开发中。其中字体Icon则是使用Font Awesome字体库来实现，只需要给对应的元素加上`icon-`开头的class即可显示该Icon。而在进行布局时，对齐是非常重要的，我么可以使用上面的三个类来实现对齐，分别对应左对齐、右对齐和居中对齐，同时也提供了`!important`来强制覆盖其他的对齐样式。

综上所述，以上这些CSS代码都属于常见的复用代码，可以在多个地方使用，并可以与其他代码组合使用以达到更好的效果。