最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】什么是CSS重置reset/restyle

CSS crifan 19浏览 0评论

Poll Results: What CSS Reset Do You Use? | CSS-Tricks

“In a nutshell, a CSS reset removes default styling from page elements so that you are “starting fresh” with the attributes you choose to apply. 

This is important for two reasons. One, puts all browsers on a level playing field. Different browsers apply different default styling to elements, so if you are looking to have your website look the same in all the different browsers (you are), a CSS reset is important. Two, it allows you to “think forwards” as far as applying attributes like margin and padding to page elements. Instead of having to “think backwords” in removing attributes from elements, you can only apply them to elements you know need them.”

-》

What’s a CSS Reset

CSS Tools: Reset CSS

What Is A CSS Reset? | CSS Reset

CSS reset – What exactly does it do? – Stack Overflow

Universal Selector ‘*’ Reset | CSS Reset

Which CSS Reset Should I Use? | CSS Reset

https://cssreset.com/which-css-reset-should-i-use/

HTML5 Doctor CSS Reset and all others on CSSReset.com

Killer Collection of CSS Resets | Perishable Press

【总结】

如果没有css时,最开始的浏览器对于元素默认值不同,导致了同样的内容,显示效果不同:

每种浏览器都提供了一个user agent的样式表,可以理解为每个浏览器都有套默认的css

比如你常看到的:

这些默认值,对于css人员来说就是个困扰了。

导致了同样的css样式,对于不同浏览器的显示效果却不完全一样

而用了CSS Reset后,就相当于把不同浏览器的默认css样式清空,或者统一设置为某个基本的样式。

所以为了减少浏览器的预设值的差异,所以才有了css reset,css重置。

比如:

   v2.0 | 20110126
   License: 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, 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,
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, menu, nav, section {
     display: block;
}
body {
     line-height: 1;
}
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;
}

就是其中一个例子。

这里整理了常见的CSS reset样式供参考:

CSS Reset | 2017’s most common CSS Resets to copy/paste, with documentation / tutorials

其中就有:

Normalize.css

Normalize.css: Make browsers render all elements more consistently.

Normalize.css不同于CSS Reset,其保留了有用的默认样式,并且确保了主流浏览器都兼容,显示效果都一致。被大家用的也比较多。

去看了看,我此处当前所用的Vue的后台管理页面模板

https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control

中,已经用上了normalize.css

“normalize.css”: “7.0.0”,

【后记】

对于其中的CSS Reset来说,(很多人为了省事)常常会用

Universal Selector ‘*’

比如:

* {
     margin: 0;
     padding: 0;
}

甚至:

<code>* {
    border: 0;
    outline: 0;
}
</code>

等等,要提醒等是:

你要确保你知道自己在干什么,否则不要轻易使用这种全局选择器,否则会有其他没想到的影响。

转载请注明:在路上 » 【已解决】什么是CSS重置reset/restyle

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.245 seconds, using 10.33MB memory