| 浏览器默认样式重置以及normalize.css的使用 | 您所在的位置：网站首页 › 去掉a的默认样式怎么弄出来 › 浏览器默认样式重置以及normalize.css的使用 |
|
一、为什么要重置 CSS？
在 Web 开发中，不同的浏览器对 CSS 的默认样式有所差异，这可能导致不同浏览器显示同一网页时布局不同、字体大小不同等问题。为了解决这些问题，可以对 CSS 进行初始化，即设置所有元素的默认样式，使得在不同浏览器中呈现的效果尽量一致。 具体来说，初始化 CSS 的目的有以下几点： 去除浏览器默认样式：不同的浏览器对元素的默认样式有所不同，去除这些样式可以使得不同浏览器呈现的效果尽量一致。 避免重置样式带来的问题：重置样式是一种常见的初始化 CSS 的方法，但是它可能会带来一些问题，例如会导致元素的尺寸、边距等属性失效，需要重新设置。 提高开发效率：通过初始化 CSS，可以使得所有元素的默认样式都被设置为开发者所期望的值，这样在开发过程中可以更加高效地编写 CSS，避免重复设置样式。 提高网站性能：通过初始化 CSS，可以减少浏览器对 CSS 文件的解析和渲染时间，提高网站的加载速度和性能。 因此，初始化 CSS 是一种优化 Web 开发的常见方法，可以使得网页在不同浏览器中呈现更加一致的效果，提高开发效率和网站性能。常见的初始化 CSS 的方法包括使用 reset.css、normalize.css 等预定义的样式库，或者手动编写样式进行初始化。 二、自定义重置（博主推荐） html, body { height: 100%; /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */ font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial, '黑体', '宋体', Arial; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 14px; color: #333; } #app { height: 100%; } /* 重置各标签的默认样式 */ a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, textarea, time, td, th, ul { margin: 0; border: 0; padding: 0; font-style: normal; box-sizing: border-box; /* 自动换行 */ word-wrap: break-word; /* 强制英文单词断行 */ word-break: break-all; } /* 设置标签为块级分类 */ article, aside, details, fieldset, figcaption, figure, footer, header, main, nav, section { display: block; } /* 去除input标签的默认样式 */ button, input, textarea { -webkit-appearance: none; font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial, '黑体', '宋体', Arial; border: 0; margin: 0; padding: 0; font-size: 1em; line-height: 1em; outline: none; background-color: transparent; } /* 禁止多文本框手动拖动大小 */ textarea { resize: none; -webkit-appearance: none; } /* 去掉按下的阴影盒子 */ input, textarea, a { -webkit-tap-highlight-color: transparent; } /* 清除a标签下划线 */ a, a:visited { text-decoration: none; } a:focus, a:active, a:hover { outline: none; } /* 清除列表前面的点 */ ol, li, ul { list-style: none; } /* 清除IE下图片的边框 */ img { border-style: none; font-size: 0; } /* 解决chrome浏览器默认黄色背景问题 */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } /* 设置默认滚动条样式 */ ::-webkit-input-placeholder { color: #afbdcc; } :-moz-placeholder { color: #afbdcc; } ::-moz-placeholder { color: #afbdcc; } :-ms-input-placeholder { color: #afbdcc; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background-color: #f5f5f5; } ::-webkit-scrollbar-track-piece { background-color: #f5f5f5; border-radius: 6px; } ::-webkit-scrollbar-thumb { background-color: #cccccc; border-radius: 6px; } ::-webkit-scrollbar-corner { background-color: #f5f5f5; } ::-webkit-resizer { background-repeat: no-repeat; background-position: bottom right; } 三、使用脚手架的方式引入 normalize.css 1、安装 npm install --save normalize.css或 yarn add normalize.css 2、main.js 引入 import 'normalize.css' 3、如果引入报错，可能没有安装 css-loader 和 style-loader npm install css-loader style-loader |
| CopyRight 2018-2019 实验室设备网 版权所有 |