常用reset样式

作者: Jiwenjie | 来源:发表于2019-12-26 17:40 被阅读0次
    /* 初始化CSS */
    @charset "utf-8";
    
    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    html {
      color: #000;
      font-size: 14px;
      min-height: 100%;
      background: rgb(248, 247, 247);
    }
    
    body,
    button,
    input,
    select,
    textarea {
      font-family: "Microsoft Yahei", "微软雅黑", "宋体", \5b8b\4f53, Tahoma, Arial,
        Helvetica, STHeiti;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
    }
    
    em {
      font-style: normal;
    }
    
    small {
      font-size: 12px;
    }
    
    ul,
    ol,
    li {
      list-style: none;
    }
    
    a {
      text-decoration: none;
    }
    
    legend {
      color: #000;
    }
    
    fieldset,
    img {
      border: 0;
    }
    
    button,
    input,
    select,
    textarea {
      font-size: 100%;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    /*img标签要清除border。*/
    /*display设为block设置为块级元素,默认为display:inline;
    存在下边线多出4px状况,所以一般设为block*/
    img {
      border: 0;
      display: block;
      -ms-interpolation-mode: bicubic;
    }
    
    textarea {
      resize: vertical;
    }
    
    .fl {
      float: left;
    }
    
    .fr {
      float: right;
    }
    
    .overflow {
      overflow: hidden;
    }
    
    .hide {
      display: none;
    }
    
    .block {
      display: block;
    }
    
    .inline {
      display: inline;
    }
    
    .inline-block {
      display: inline-block;
    }
    
    .error {
      color: #f00;
      font-size: 12px;
    }
    
    label,
    button {
      cursor: pointer;
    }
    
    /*清除浮动影响 和清除margintop塌陷 合在一起的写法*/
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }
    
    .clearfix:after {
      clear: both;
    }
    
    .clearfix {
      /*兼容ie*/
      zoom: 1;
    }
    
    .clear {
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
      visibility: hidden;
      overflow: hidden;
    }
    
    /* dt, margin padding 默认值就是0 */
    /* li,  默认没有margin值padding值*/
    /* fieldset, 使用频率太低 */
    body,
    dl,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    form {
      margin: 0;
      font-family: Arial, "Microsoft YaHei", "宋体";
    }
    ol,
    ul {
      margin: 0;
      padding: 0;
      font-family: Arial, "Microsoft YaHei", "宋体";
    }
    
    a {
      /*去掉下划线*/
      text-decoration: none;
    }
    
    em,
    i {
      /*去掉斜体*/
      font-style: normal;
    }
    
    b,
    strong {
      /*去掉加粗*/
      font-weight: normal;
    }
    
    .pull-left {
      float: left;
    }
    
    .pull-right {
      float: right;
    }
    
    .wordwrap {
      word-break: break-all;
      word-wrap: break-word;
    }
    
    pre.wordwrap {
      white-space: pre-wrap;
    }
    
    body,
    form {
      position: relative;
    }
    
    td {
      text-align: left;
    }
    
    /* 弹性布局兼容性处理 */
    /* 水平布局,禁止换行 */
    .row-flex-nowrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
    }
    
    /* 水平布局,允许换行 */
    .row-flex-wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    
    /* 水平对齐方式--左对齐 */
    .flex-start {
      -webkit-justify-content: flex-start;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
    
    /* 水平对齐方式--居中对齐 */
    .flex-center {
      -webkit-justify-content: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    
    /* 水平对齐方式--右对齐 */
    .flex-end {
      -webkit-justify-content: flex-end;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
    }
    
    /* 水平对齐方式--两端对齐 */
    .flex-between {
      -webkit-justify-content: space-between;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    
    /* 水平对齐方式--等分对齐 */
    .flex-around {
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
    }
    
    /* 垂直对齐方式--向上对齐 */
    .flex-top {
      -moz-box-align: start;
      -ms-flex-align: start;
      -webkit-align-items: flex-start;
      -webkit-box-align: start;
      align-items: flex-start;
    }
    
    /* 垂直对齐方式--居中对齐 */
    .flex-middle {
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;
    }
    
    /* 垂直对齐方式--向下对齐 */
    .flex-bottom {
      -moz-box-align: end;
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      -webkit-box-align: end;
      align-items: flex-end;
    }
    
    /* 等分 */
    .flex1 {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
    
    .flex2 {
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2;
    }
    
    .container {
      display: block;
      max-width: 1920px;
      margin: 0 auto;
      position: relative;
    }
    
    .img-responsive {
      margin: 0;
      display: inline-block;
    }
    
    /* 分页样式 */
    .page_div {
      padding: 50px 0 20px;
      font-size: 13px;
      color: #dadada;
      /* background: #fff; */
      text-align: right;
    }
    
    .page_div a {
      height: 28px;
      border: 1px solid #dadada;
      text-align: center;
      margin: 0 4px;
      cursor: pointer;
      line-height: 28px;
      color: #666;
      font-size: 13px;
      padding: 0 10px;
      display: inline-block;
      border-radius: 5px;
    }
    
    .page_div .current {
      background-color: #d91615;
      border-color: #d91615;
      color: #ffffff;
    }
    
    .page_div label {
      margin: 0;
      font-weight: normal;
      position: relative;
      top: -2px;
      left: 0;
    }
    
    .page_div label input {
      background: none;
      border: 1px solid #dadada;
      border-radius: 5px;
      width: 50px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      color: #666;
      font-weight: normal;
      margin: 0 5px;
    }
    
    .totalPages {
      margin: 0 10px;
    }
    
    .totalPages span,
    .totalSize span {
      color: #dce0e0;
      margin: 0 5px;
    }
    
    @media (min-width: 1200px) {
      .container {
        width: 1190px;
      }
    }
    
    

    相关文章

      网友评论

        本文标题:常用reset样式

        本文链接:https://www.haomeiwen.com/subject/ngjloctx.html