Css Reset -Css样式重置

在网页实际开发过程中，如果将来网页的浏览者存在使用不同的浏览器(IE, Google, FireFox, Opera, Safari等)对网页进行解析展示的可能，那么我们就不得不从完美的理想预期中转回到本真的现实情况。在设计师们的梦想中都存在着一个十分完美的世界：所有的浏览器都能够理解和适用所有的CSS规则，并且呈现相同的视觉效果(不存在兼容性问题)。但是在实际环境中，在很多情况中事与愿违，很多的css样式在不同内核的浏览器中有着不同的解释和呈现，这就导致了您所期望的预期效果和浏览器解释的实际效果略有差异，这是因为HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别所造成。
为了去除不同的浏览器的默认样式之间存在的差异，尽量能让不同的css样式在不同的浏览器下遵循同一解析标准，我们现在提到的css reset就是用来重置（复位）元素在不同核心浏览器下的默认值。
那么reset css 究竟怎么写，都写些什么？这个规则没有统一标准，也没有权威指导，都是个人在开发过程中遵照自己的开发习惯以及元素样式的一些宏观表现酌情进行设置，形成一些个人的总结，具有明显的个人特点。**不论您有什么特别的特点，建议不要使用通配符（*）这样近乎破坏性的行为进行样式复位 **，浪费资源暂放其后，对于HTML默认的一些UI展示简直是一种侮辱。
在网上搜索css reset有好多关于样式复位的结果，拿来就可以使用（前提是对于自己正在写的结构没有不良影响）。再此不一一展示。就我个人在使用过程本人比较倾向于Eric Meyer这套初始化样式；
具体代码内容如下：

/* http://meyerweb.com/eric/tools/css/reset/v5.0.1 | 20191019License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {display: none;
}
body {line-height: 1;
}
menu, ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

reset.css npm 地址：reset.css
另附大佬对于css架构的分享：《我是如何对网站CSS进行架构的》作者：张鑫旭

都是本人在开发过程中积累的一些知识内容，形成一些记录方便后续学习。欢迎各位优秀的同行分享高见，能够让有需要的小伙伴借鉴学习，共同提升技术水平。

Css Reset -Css样式重置相关推荐

CSS Reset（样式重置）
CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子: 1.淘宝(CSS ...
代码：CSS——reset.css
代码:CSS--reset.css http://www.cnblogs.com/qq21270/p/5577856.html 图片列表 A链接标签: /*链接样式.文字颜色*/a{color:#66 ...
[css] Reset CSS和Normalize CSS的区别是什么？
[css] Reset CSS和Normalize CSS的区别是什么? Reset:将所有浏览器的默认样式都统一化,注重的是跨浏览器统一样式,用户还要自行添加一些默认样式. Normalize:会根 ...
CSS Reset(css的初始化)
不同的浏览器对每种的标签都有默认的样式.大部分浏览器的样式还有点区别.为了保证让所有的标签的样式清零,也就是重置,以便于我们后续的开发和管理,一般都会在网站一开始对所有的标签做一下样式的重置操作,为 ...
拉勾网主页面HTML+CSS布局代码，commen.css+reset.css代码部分
HTML页面布局位置:链接: link. commen.css .fl {float: left; }.fr {float: right; }a {text-decoration: none;colo ...
Vue @import ‘~@/css/reset.css’；报错，解决方案
这个问题简单,不做过多描述,如题所述,如果因为这个导致错误,请安装 npm install stylus-loader css-loader style-loader -D
常见网站CSS样式重置
腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea, ...
html5公共样式css,css常用公共样式
/*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...
如何做默认样式重置？RESETTING 和 NORMALIZING 之间有什么区别？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何做默认样式 ...

Css Reset -Css样式重置

Css Reset -Css样式重置相关推荐

最新文章

热门文章