css重置_CSS重置

最新推荐文章于 2024-06-24 16:54:40 发布

cungui5726

最新推荐文章于 2024-06-24 16:54:40 发布

阅读量160

点赞数

文章标签： css html vue javascript web ViewUI

原文链接：https://thenewcode.com/210/CSS-Resets

版权

css重置

It became necessary to destroy the village in order to save it.

为了保存村庄，有必要摧毁村庄。

Unidentified US Army Major

身份不明的美国陆军少校

Each browser inevitably has slightly different default values for appearance when displaying some tags. For example, the default body margin amount is different by 1 pixel between Internet Explorer and other browsers; Firefox will place a space between the top of an <h1> element and the top of the page (assuming the <h1> is the first element in the page), which follows W3C specifications, but IE will not.

每个浏览器在显示某些标签时不可避免地具有略有不同的默认默认外观。例如，Internet Explorer和其他浏览器之间的默认body边距数量相差1个像素； Firefox将在<h1>元素的顶部与页面顶部之间放置一个空格(假设<h1>是页面中的第一个元素)，该位置遵循W3C规范，但IE不会。

In response to these inconsistencies, some web developers have developed “CSS Resets”, a series of style declarations that are intended to “wipe the slate clean”: setting the CSS back to a base layer of default values that are shared between all browsers.

针对这些不一致的情况，一些Web开发人员开发了“ CSS重置”，这是一系列样式声明，旨在“擦净面板”：将CSS设置回所有浏览器共享的默认值的基础层。

Eric Meyer’s CSS Reset is probably the most well-known attempt at this, although Yahoo’s YUI reset is also well-regarded. Many CMS’s and frameworks, such as Wordpress, also employ a CSS reset before applying themes.

埃里克·迈耶(Eric Meyer)的CSS重置可能是最著名的尝试，尽管雅虎(Yahoo)的YUI重置也广为人知。在应用主题之前，许多CMS和框架 (如Wordpress)也采用CSS重置。

Personally, I consider most CSS resets overkill, the equivalent of flattening a building in order to redesign it. CSS reset files tend to be rather long, which increases file size, and the process of building up styles from the state of CSS left after a reset can be arduous. In addition, CSS resets tend to more focused on setting IE straight, which I would tend to deal with using a conditional comment. Finally, one can become so obsessed in making every browser “the same” that the design itself suffers: flexibility in the appearance of content from device to device is a feature of the web, not a bug.

就我个人而言，我认为大多数CSS会重置过大的破坏力，这相当于将建筑物弄平以便重新设计。 CSS重置文件通常很长，这会增加文件大小，并且从重置后剩余CSS状态构建样式的过程可能很艰巨。另外，CSS重置倾向于更侧重于设置IE直，我倾向于使用条件注释来处理。最终，人们会着迷于使每个浏览器“相同”，以至于设计本身遭受痛苦：设备之间内容外观的灵活性是Web的功能，而不是错误。

That being said, there are a few declarations I typically make in a stylesheet that could be considered a “mini-reset”, as the first declarations:

话虽如此，我通常在样式表中有一些声明可以作为“迷你重置”，作为第一个声明：

html { 
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body, figure {
	margin: 0;
}

This makes sizing elements far easier, while allowing you to overwrite the rule if need be. I also reset <body> and <figure> margin to 0.

这使调整元素的大小变得更加容易，同时允许您根据需要覆盖规则。我还将<body>和<figure> margin重置为0 。

This minimal reset allows me to build my CSS without backtracking, avoiding moments of “Oh, I meant to do that”, or the tendency to add “fixes” for individual selectors.

这种最小的重置使我无需回溯即可构建CSS，避免出现“哦，我想这样做”或出现为单个选择器添加“修复”的趋势。