css重置_CSS重置

css重置

Thinking beyond the first three lines of code.

思考超出代码的前三行。

I start just about every project with a few lines of code in my top-level CSS file that look something like this:

我几乎在每个项目中都从顶层CSS文件中的几行代码开始，如下所示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This ensures that my website will look the same across browsers.

这样可以确保我的网站在所有浏览器中看起来都一样。

In this write-up, I am going touch on how CSS works, why a reset is important for the web developer, and a few additions one might make once we have a better understanding.

在本文中，我将探讨CSS的工作原理，为什么重置对Web开发人员很重要，以及一旦我们有了更好的理解后，可能会有一些补充。

At the heart of CSS (Cascading Style Sheets) is the cascade algorithm. It defines how to combine property values originating from different sources.

级联算法是CSS(层叠样式表)的核心。 它定义了如何组合源自不同来源的属性值。

CSS stylesheets can come from three different origins.

CSS样式表可以来自三个不同的来源。

• Browsers: Each browser has its own basic level stylesheet that gives a default style to any document.

  浏览器：每个浏览器都有其自己的基本级别样式表，该样式表为任何文档提供默认样式。

• User: The user is the reader of a website. Users may override styles or use stylesheets designed to tailor a custom experience.

  用户：用户是网站的读者。 用户可以覆盖样式或使用旨在定制定制体验的样式表。

• Author: These are the stylesheets for a given website, written by the web developer.

  作者：这些是由Web开发人员编写的给定网站的样式表。

浏览器>用户>作者 (Browser > User > Author)

By default, cascade prioritizes Browser stylesheets over User, and User stylesheets over Author. (See MDN for how !important, animations, and transitions are prioritized)

默认情况下，层叠优先于浏览器样式表优先于用户，而用户样式表优先于作者。 (有关如何对!important ， animations和transitions设置优先级的信息，请参见MDN )

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

作为Web开发人员，您的样式表中可以包含零行代码，并且HTML外观会有所不同，具体取决于您在哪个浏览器中进行查看。

That’s why we reset it. We override any styling that you would otherwise inherit.

这就是我们重置它的原因。 我们会覆盖您原本会继承的所有样式。

Look again at our reset.

再次查看我们的重置。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Resetting margin and padding are intuitive.

重置边距和填充很直观。

You don’t want the spacing around the screen or around elements to look differently on different browsers.

您不希望屏幕或元素周围的间距在不同的浏览器上看起来有所不同。

What does box-sizing do?

box-sizing什么用？

By default, an element’s height and width are determined in the following way:

默认情况下，元素的高度和宽度是通过以下方式确定的：

width + padding + border = actual width of an elementheight + padding + border = actual height of an element

宽度+填充+边界=元素的实际宽度高度+填充+边界=元素的实际高度

If you have two divs with the same dimensions but with different padding and border settings, the ones with the larger accumulative size of border and padding will appear larger on the screen.

如果两个div具有相同的尺寸，但具有不同的填充和边框设置，则边框和填充的累积大小较大的div将在屏幕上显示较大。

box-sizing: border-box; includes the width and height of the border/padding in element, so you can think of your element width/height as an absolute value instead of a starting value. For a lot of people, this is a lot easier to keep track of.

box-sizing: border-box; 包括元素边框/填充的宽度和高度，所以你可以把你的元素宽度/高度的绝对值，而不是初始值。 对于很多人来说，这很容易掌握。

我们还能做什么？ (What else can we do?)

Now that we know our reset is overriding the Browser stylesheet, we can think about what other styles we are inheriting and remove or reset our base settings.

现在我们知道我们的重置将覆盖浏览器样式表，我们可以考虑继承哪些其他样式并删除或重置我们的基本设置。

Examples:

例子：

• Set a default font family.
  设置默认字体系列。

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',    'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

• Set a scalable base font-size. Using em in * ensures all components inherit the same base size and that it is scalable. 62.5% in HTML will make the base font 10 pixels. Now, you can scale font size site-wide using a 10 based number system. ex: 140%.

  设置可缩放的基本字体大小。 在*使用em可以确保所有组件继承相同的基本大小并且可伸缩。 HTML中的62.5%将使基本字体为10像素。 现在，您可以使用基于10的数字系统在整个站点范围内缩放字体大小。 例如： 140% 。

* {
    font-size: 1em;
}html {
    font-size: 62.5%;
}

• Make images easier to work with. This gets rid of some bottom spacing and makes them work more like blocks.
  使图像更易于使用。 这消除了一些底部间距，并使它们更像块一样工作。

img {
  max-width: 100%;
  display: block;
}

Remember these are just examples, and they barely scratch the surface of what you can do. Play around with them, experiment, and have fun!

请记住，这些只是示例，它们几乎触手可及。 与他们一起玩耍，实验并享受乐趣！

你会加什么？ (What will you add?)

Check out some of my other guides and write-ups; Recoil.js & simple global state, or A guide to creating a React app without create-react-app.

查看我的其他一些指南和文章； Recoil.js和简单的全局状态，或者创建不带create-react-app的React应用程序的指南。

Contact me at joshuagauthreaux@gmail.com or through joshgotro.com.

通过joshuagauthreaux@gmail.com或通过joshgotro.com与我联系。

Thank you for reading and be well!

感谢您的阅读，身体健康！

翻译自: https://medium.com/swlh/css-reset-2b4831d4664e

css重置