常用的css-fix

把经常用到的css属性设置为class,需要的时候引入即可。

  • 将元素设置为block并且水平居中
    .center-block {
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
    
  • 让文字不可换行,超越边界的文字显示为省略号
    .text-nowrap {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    
  • 让文字隐藏
    .text-hide {
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }
    
  • 清除浮动,并且禁止margin重叠
    .clearfix:after,
    .clearfix:before {
      content: "";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }
    
  • 淘宝的CSS reset
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

你可能感兴趣的:(常用的css-fix)