baseCss/resetCss(转)

原文链接：https://github.com/hangyangws/baseCss#basecss

baseCss

• 意义

  统一各个浏览器差异、统一团队开发起始标准、弥补浏览器的“缺点”、提供频繁使用的原子类名。

• 友情提示

  • 前端开发中如果不是UI特别要求，颜色值采用web安全色最佳，像素以偶数最佳。
  • 移动端开发，量度可以尝试rem为单位（什么是rem，请自行Google）。
  • 使用rem为量度单位时，浏览器会是基于html节点而不是body节点计算大小。

• 代码解释

  @charset 'utf-8';
  
  /**
   * base.css
   * 航洋无声(hangyangws@foxmail.com、hangyangws.win、github.com/hangyangws、weibo.com/hangyangws)
   */
  
  /*标准字体大小（rem参照对象）设置为14像素*/
  
  html {
      font-size: 14px;
  }
  
  /**
   * 当`body`宽度大于`html`宽度时，某些浏览器会出现内部滚动条，所以给`html、body`设置宽度100%。
   * 取消部分浏览器点击有阴影。
   * 优化移动端滚动事件。
   */
  
  html,
  body {
      width: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
  }
  
  /**
   * 移除常用标签的浏览器默认的`margin、padding`
   * pre、code、legend、fieldset、blockquote……等其他标签不是很常用，所以本css都不会一一列举出来，为了简化。如果项目中用到，可以自己单独写。
   */
  
  body,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dl,
  dd,
  ul,
  ol,
  th,
  td,
  button,
  figure,
  input,
  textarea,
  form {
      margin: 0;
      padding: 0;
  }
  
  /*不同浏览器的input、select、textarea的盒子模型宽度计算方式不通，统一为最常见的content-box*/
  
  input,
  select,
  textarea {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
  }
  
  /**
   * `table`相邻单元格的边框间的距离设置为0。
   * 设置`table`的边框为合并模式。
   */
  
  table {
      border-spacing: 0;
      border-collapse: collapse;
  }
  
  /**
   * 移除浏览器部分元素的默认边框。
   * acronym、fieldset……等其他标签不是很常用，所以本css都不会一一列举出来，为了简化。如果项目中用到，可以自己单独写。
   */
  
  img,
  input,
  button,
  textarea {
      border: none;
  }
  
  /*因为`input`默认不继承父元素的居中样式，所以让`input`元素继承父元素的文本居中方式*/
  
  input {
      text-align: inherit;
  }
  
  /*让`textarea`默认不可以放缩*/
  
  textarea {
      resize: none;
  }
  
  /**
   * 因为部分浏览器默认的`q`标签的前后伪元素有多余样式，所以置空`q`标签前后伪元素。
   * q标签不是很常见，如果开发者需要可以使用。
  /*
  q::before,
  q::after {
      content: '';
  }
  */
  
  /**
   * 由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性。
   * 取消这些元素的`outline`样式。
   */
  
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  input,
  select,
  button,
  option,
  textarea,
  optgroup {
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      font-style: inherit;
      line-height: inherit;
      color: inherit;
      outline: none;
  }
  
  /**
   * 如果绝对定位元素找不到被设置过定位信息的上级元素，那么此元素基于根节点定位，所以给`body`设置相对定位，让这些元素基于`body`定位。
   * 设置网页基本字体颜色为`#666`(深灰色)。
   * 设置网页背景颜色颜色为`#fff`（纯白色）。
   * 使字体渲染更顺滑。
   */
  
  body {
      font: 14px 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'STHeiti Light [STXihei]', 'Microsoft Yahei', sans-serif;
      position: relative;
      color: #666;
      background: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
  }
  
  /**
   * 取消超链接元素的默认文字装饰（下划线）。
   * 灵位del、ins标签的中划线、下划线还是挺好的，就不去掉。
   */
  
  a {
      text-decoration: none;
  }
  
  /**
   * 开发中UI设计的列表都是和原生的样式差太多，所以直接给取消ol，ul默认列表样式。
   */
  
  ol,
  ul {
      list-style: none;
  }
  
  /*使如下元素默认鼠标经过是`小手`的形状（一般表示可以点击，在PC端挺好）*/
  
  button,
  input[type='submit'],
  input[type='button'] {
      cursor: pointer;
  }
  
  /*取消火狐浏览器部分版本`input`聚焦的时候默认的`padding、border`*/
  
  input::-moz-focus-inner {
      padding: 0;
      border: 0;
  }
  
  /*取消部分浏览器`input[type='number']`的默认样式*/
  
  input[type='number'] {
      -moz-appearance: textfield;
  }
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none;
  }
  
  /*输入控件的`placeholder`颜色设置为`#999`（浅灰色）*/
  
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
      color: #999;
  }
  
  input:-moz-placeholder,
  textarea:-moz-placeholder {
      color: #999;
  }
  
  input::-moz-placeholder,
  textarea::-moz-placeholder {
      color: #999;
  }
  
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
      color: #999;
  }
  
  /*由于部分浏览器`template`直接显示出来，所以要隐藏`template`元素*/
  
  template {
      display: none;
  }
  
  /**
   * 清楚浮动`c ==> clear`，原子类
   */
  
  .clear {
      zoom: 1;
  }
  
  .clear::after {
      display: block;
      visibility: hidden;
      clear: both;
      height: 0;
      content: '.';
  }
  
  /*position: fixed的缩写，原子类*/
  
  .pf {
      position: fixed;
      /*chrome 内核 浏览器 position: fixed 防止抖动*/
      -webkit-transform: translateZ(0);
  }
  
  /*利用绝对定位宽高拉升原理，中心居中元素，原子类*/
  
  .middle {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
  }
  
  /*利用相对定位于`CSS3`使元素垂直居中，原子类*/
  
  .middle-v {
      position: relative;
      top: 50%;
      -webkit-transform: -webkit-translateY(-50%);
      -moz-transform: -moz-translateY(-50%);
      -o-transform: -o-translateY(-50%);
      transform: translateY(-50%);
  }
  
  /*元素计算宽高德盒子模型以`border`为外界限，原子类*/
  
  .bb {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  /*单行文本溢出显示省略号`to==>text-overflow`，原子类*/
  
  .to {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

• 其它

  • 原子类的优缺点
    1. 维护困难（缺）
    2. 阅读困难（缺）
    3. 便于抽出复用代码，提高代码复用程度（优）
  • 本base.css涉及的原子类解释 才接触开发的时候，我也特别喜欢使用原子类，比如：m10 w10 p10 …。后来我发现其中的很多弊端，比如难以维护、修改样式还要去修改HTML文件等等。所以本base.css包含的c middle middle-v bb to原子类都是我自己平时开发中用的最多不易变动的原子类。