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; } 

转载于:https://www.cnblogs.com/timmer/p/6409193.html