具體參考https://www.csdn.net/tags/NtzaYgzsMTcwOTMtYmxvZwO0O0OO0O0O.html
擔心鏈接失效，直接復制粘貼，非個人文章。
2020-07-21 05:29:42
I've been wanting to write this article for alongtime - sinceAugust 25, 2015to be exact. It's been in the back of my mind and bugging me forever. I'm glad I'm finally going to sit down and bang this post out despite there probably being a ton of great resources out there on this.
我一直想寫這篇文章很久了-確切地說，自2015年8月25日以來。 它一直在我的腦海中，永遠困擾著我。 我很高興我終于可以坐下來把這個帖子扔了，盡管那里可能有很多很棒的資源。
If you don't already know,Bootstrapis an awesome front-end framework! I've been using it for a really long time, and I think it helps out all types of developers. It doesn't matter if you are front-end or back-end developer, complete noob or an advanced coding robot from the future. Bootstrap is a robust and flexible set of tools that helps you code awesome websites for all use cases.
如果您還不了解，Bootstrap是一個很棒的前端框架！ 我已經(jīng)使用了很長時間了，我認為它可以幫助所有類型的開發(fā)人員。 無論您是前端還是后端開發(fā)人員，將來的完整菜鳥還是高級編碼機器人，都沒有關系。 Bootstrap是一組強大而靈活的工具，可幫助您為所有用例編寫出色的網(wǎng)站。
Bootstrap 4recently came out ofalphaand intoBetaafter being in it that super-early build for like a year. If you're thinking, "Wow, it's taking forever and is still in beta...",don't. What theBootstrap core teamis doing is no small task. They're literally pushing out code that is used by *gazillions* ofpeople and websites(seriously, like over 20% of the web)! On top of that, CSS exist in a land where every individual developer is super opinionated about the right and wrong way to do things. It's no easy task.
引導4日前在其在于超早期建設的像一年后，來到α，β，進入了。 如果您在想：“哇，它永遠都在使用中，并且仍處于測試階段...”，請不要。Bootstrap核心團隊正在做的任務不小。 他們從字面上推出了*數(shù)百萬億*的人和網(wǎng)站使用的代碼（嚴重的是，超過20％的網(wǎng)絡）！ 最重要的是，CSS存在于每個開發(fā)人員都對做事的正確和錯誤方式都持超級看法的國家。 這不是一件容易的事。
話雖這么說...(With all that being said...)
Let's talk about a really neat new feature in Bootstrap 4 calledReboot. In this post, I'll blab a bit about the history of resets, Bootstrap, some cool features of Reboot, and how you can start using it today.
讓我們談談Bootstrap 4中一個真正好的新功能，稱為Reboot。 在這篇文章中，我將對重置的歷史，Bootstrap，Reboot的一些很酷的功能以及今天如何開始使用它進行一些探討。
Reboot in the simplest terms possible is Bootstrap 4's "reset". It's a little bit different than your typical reset though.
用最簡單的方式重啟是Bootstrap 4的“重置”。 但是，它與典型的重置略有不同。
埃里克·梅耶（Eric Meyer）重置(The Eric Meyer Reset)
I'm pretty sure the term "reset" first came around when Eric Meyer, a guy who is kind of like the godfather of CSS, came out with a stylesheetto literallyresetall browsers to look the exact same. The problem with this is, it really reset things. Literally everything looked the same regardless of the element. Elements likeh1s were the same ash2s. This meant front-end people would have to build their own base styles. This is both a good and bad thing.
我敢肯定，“重設”一詞最早是在Eric Meyer（他有點像CSS的教父）出來時提出的，該樣式表可以將所有瀏覽器重置為完全相同的樣式。 問題在于，它確實使事情復位。 從字面上看，無論元素如何，一切看起來都是相同的。 像h1s這樣的元素與h2s相同。 這意味著前端人員將必須建立自己的基本樣式。 這既是好事，也是壞事。
Many front-end people in the early days would build out their own "resets" on top of this since their base styles stayed consistent.** This also unfortunately left some noobs / beginners in the dust who never really grasped the importance of having a base.** For example, people who would do something like this:
早期，許多前端人員會在此基礎上建立自己的“ resets”，因為他們的基本風格保持一致。**不幸的是，這也使一些菜鳥/初學者陷入了塵土，他們從未真正掌握過擁有它們的重要性。 **。例如，會執(zhí)行以下操作的人：
/* Heading 2 Base Styles */h2 {color:#13335f;font-weight:700;margin:10px020px;font-size:30px;FLOAT:LEFT;/* Just kill me. why.......... */}
This went on for what felt like forever. If you're old enough to have lived through these small hustle projects, congratulations on being a survivor.In my humble opinion, a lot of back-end developers hate CSS to this day because of dealing with things like this.
這種感覺一直持續(xù)到永遠。 如果您足夠大，可以經(jīng)歷這些小小的忙碌項目，那么祝賀您成為幸存者。以我的拙見，許多后端開發(fā)人員至今都討厭CSS，因為它處理這樣的事情。
Normalize.css(Normalize.css)
So after thesedark-agesof having to deal with some really messed up stylesheets, a lot of people's personal "base" resets started becoming popular and shared. The most popular was definitelynormalize.css.
因此，在這些不得不處理一些真正混亂的樣式表的黑暗時代之后，許多人的個人“基礎”重置開始變得流行和共享。 最受歡迎的肯定是normalize.css。
Normalize was different because it reset yourbrowser stylesand gave you some dead-simple, super prettybase styles. It made building some nice projects a breeze. It gained serious popularity.
規(guī)范化有所不同，因為它會重置您的瀏覽器樣式，并為您提供一些簡陋，非常漂亮的基本樣式。 它使構建一些不錯的項目變得輕而易舉。 它得到了嚴重的普及。
Normlalize.css doesn't useborder-boxby default though, requiring that you add it somehow.I can't imagine doing any front-end development without this property.Normalize.cssis still active today, widely used, and you can you can still easily swap this. I honestly don't know why it's not default for all elements, but I'm sure there's some good reason since many projects still use normalize as their go-to reset.
Normlalize.css默認情況下不使用border-box，要求您以某種方式添加它。沒有這個屬性，我無法想象進行任何前端開發(fā)。 今天，Normalize.css仍然處于活動狀態(tài)，并被廣泛使用，您仍然可以輕松地進行互換。 老實說，我不知道為什么不是所有元素都不都是默認值，但是我敢肯定有一個很好的理由，因為許多項目仍然使用normalize作為重置。
傳入的Reboot.css(Incoming Reboot.css)
Now comesReboot.css. Reboot.css is like a normalize.css 2.0 in my opinion. It has some awesome "reset" type features:
現(xiàn)在是Reboot.css。 我認為Reboot.css就像normalize.css 2.0。 它具有一些很棒的“重置”類型功能：
It usesbox-size: border-box;by default on all elements.
它使用box-size: border-box;默認情況下在所有元素上。
"Resets" browser styles for consistent cross-browser development.
“重置”瀏覽器樣式以實現(xiàn)一致的跨瀏覽器開發(fā)。
Keeps a simple and natural base-style on elements.
在元素上保持簡單自然的基本樣式。
Carries a little bit of an opinion on how to write your CSS for the modern web.
對如何為現(xiàn)代Web編寫CSS提出一點意見。
Made by the Bootstrap people (lots of trust)
由Bootstrap員工制作（很多信任）
Bootstrap 4puts all this into a single page making it dead-simple to use.
Bootstrap 4將所有這些都放在一個頁面中，使其使用起來非常簡單。
框架的最終未來(The Eventual Future of Frameworks)
CSS is becoming more and more featured-pack by the day. Things like "Flexbox" or "Grid" are getting wider browser-adoption making frameworks less necessary for doing complex layouts easily.
CSS每天都變得越來越功能強大。 諸如“Flexbox”或“Grid”之類的東西正越來越廣泛地被瀏覽器采用，這使得框架對于輕松進行復雜的布局變得不必要了。
On top of that, you have some ridiculously cool tools likeLESS,SASS/SCSS, andPostCSSbecoming the default go-to for writing styles making it easier to automate tedious tasks such as creating a set of button styles.
最重要的是，您擁有諸如LESS，SASS/SCSS和PostCSS類的荒謬酷炫的工具，成為編寫樣式的默認工具，使自動化繁瑣的任務（例如創(chuàng)建一組按鈕樣式）變得更加容易。
In enough time, I can easily see frameworks becoming 95% smaller or the birth of a new, super simple, bare-naked frameworkthat gains massive popularity. We're not quite there yet, but, heck, that might be even be Reboot one day.
在足夠的時間內(nèi)，我可以輕松地看到框架縮小了95％，或者誕生了一種新的，超級簡單的，裸露的框架，該框架獲得了廣泛的歡迎。 我們還沒有到那兒，但是，哎呀，有一天甚至可能要重啟。
立即開始Reboot.css(Get Started with Reboot.css Now)
So, how can we testReboot.cssout now and actually see what the heck it is?
那么，我們?nèi)绾尾拍芰⒓礈y試Reboot.css并真正了解它到底是什么呢？
You could go to theOfficial Bootstrap 4 Documentationand just dig through the docs and get going, or you can just mess with this codepen I made. It hasevery single elementon a single webpage and lets you easily swap out different resets to see the difference.
您可以轉到Official Bootstrap 4 Documentation，然后仔細閱讀文檔并繼續(xù)進行操作，也可以將我制作的這個Codepen弄亂。 它在單個網(wǎng)頁上包含所有單個元素，可讓您輕松換出不同的重置以查看差異。
If you want to just find the CSS and test yourself, check these resources:
如果您只想查找CSS并進行測試，請檢查以下資源：
Box-Sizing：邊框框默認(Box-Sizing: Border-Box Default)
If you read the intro paragraphs, you'll already know this.Reboot.cssusesbox-sizing: border-box;by default for all elements. This in my opinion is the most distinguished difference betweennormalize.css.
如果您閱讀介紹性段落，您將已經(jīng)知道這一點。Reboot.css使用box-sizing: border-box;默認情況下，所有元素。 我認為這是normalize.css之間最明顯的區(qū)別。
So, it's safe to say it's "responsive ready" out-of-the-box. Here's what it looks like at the top of the file:
因此，可以肯定地說它“響應就緒”。 這是文件頂部的外觀：
*,
* ::before ,
* ::after? {
? ? box-sizing : border-box ;
}
If you're familiar with this, it's taken fromPaul Irish's arguably super famous post.
如果您對此很熟悉，則摘自Paul Irish的超級著名文章。
使用“ rems”調(diào)整大小和間距(Use "rems" for Sizing and Spacing)
快速REM演示(A Quick REM Demo)
REMs are just not for font-sizing, it can be used for all spacing. To show you just how muchReboot.cssembraces this, checkout the demo below:
REM并非僅用于字體大小調(diào)整，它可用于所有間距。 為了向您展示Reboot.css對此有多少支持，請Reboot.css以下演示：
解釋的計量單位差異(Unit of Measurement Differences Explained)
CSS3 introduced a new unit of measurement calledrem. There's kind of a huge debate amongst us nerds on the best use for sizing on the web. Theserems have a pretty darn good solution to the whole debate. It all comes down to accessibility for users (resizing of font-sizes / screen-sizes) and maintainability / consistency for front-end developers.
CSS3引入了一種新的度量單位，稱為rem。 在我們的書呆子之間，關于在Web上調(diào)整大小的最佳用途方面存在著巨大的爭論。 這些rem■找一個相當不錯的解決了整個辯論。 所有這些都歸結為用戶的可訪問性（調(diào)整字體大小/屏幕大小的大?。┮约扒岸碎_發(fā)人員的可維護性/一致性。
Here it is summarized:
這里總結一下：
px:Good for consistency, bad for accessibility
px：一致性好，可訪問性差
em:Good for accessibility, just okay for maintainability / consistency
em：對于可訪問性很好，對于可維護性/一致性也很好
rem:Good for accessibility, really good for maintainability / consistency
rem：有利于可訪問性，確實有利于可維護性/一致性
That's a hugeTL;DR:of the whole debate, but there's atonofgood resourcesto learn a bit more about units of measurement.
在整個辯論中，這是一個很大的TL; DR：但是有大量的好資源可以學到更多關于度量單位的知識。
REM如何工作(How REMs Work)
Let's assume you know nothing more than pixels as a unit of length. Going to try to break this down in laymen terms without code.
假設您只知道像素作為長度單位。 試圖用外行術語將其分解為無代碼。
So, you know that 100 pixels is always going to be 100 pixels long regardless if you're have your operating system show large fonts, are on a 4k monitor, or those 100 pixels are in a 1000 or 5000 pixel sized container. It doesn't matter. 100 pixels is 100 pixels. This is good for consistency but bad for usability since it doesn't scale well to user-specifc preferences.
因此，您知道無論您的操作系統(tǒng)顯示大字體，在4k顯示器上還是在100或5000像素大小的容器中，這100像素總是會長100像素。 沒關系 100像素等于100像素。 這對一致性有好處，但對可用性不利，因為它不能很好地適應用戶指定的首選項。
The unitemwas first introduced to try and help with this "scaling" issue by being acomputed unit of measurement. This means the sizing is alwaysrelativeto something, in this case the parent. So in a basic example, you could say: "Instead of being100pxlong, be 10% of the1000pxlong container" or0.1em". This way if the container was resized by the user / device / system / whatever it would remain consistent inperceivedlength.
最初引入單位em是通過計算的度量單位來嘗試和幫助解決“縮放”問題。 這意味著大小總是相對于某物（在這種情況下為父物）。 因此，在一個基本的例子，你可以說：“而不是被100px長，是10％的1000px長的集裝箱”或0.1em?！边@樣，如果容器是將用戶/設備/系統(tǒng)調(diào)整/不管它會保持感知長度一致。
This is cool, except it gets real crazy when you have anembe relative to anotherem. Or worse, anemthat is relative to anemthat is relative to anem. Things get complicated and messy and become impossible to deal with overtime.
這很酷，除了當您將一個em相對于另一個em變得非常瘋狂時。 或者更糟的是，一個em是相對于em是相對于em。 事情變得復雜和混亂，無法處理加班。
I like to think ofrems as a simpleem. Everything isalwaysrelative to the root (aka, thebodytag orhtmltag). So if your root was1000px, your length is0.1remregardless of container, settings, whatever.
我喜歡將rem視為一個簡單的em。 一切總是相對于根（aka，body標記或html標記）。 所以，如果你的根是1000px，你的長度是0.1rem不管容器，設置什么的。
Have you ever designed a website to see slight differences between operating systems? Mac's probably look the best but sometimes fonts will look not ascrispon Windows?
您是否曾經(jīng)設計過一個網(wǎng)站，以查看操作系統(tǒng)之間的細微差別？ Mac可能看起來最好，但有時字體在Windows上看起來不那么清晰？
This is because of how systems render fonts.Reboot.cssembraces using whatever their native font stack is to the operating system.
這是因為系統(tǒng)如何渲染字體。Reboot.css包含使用其操作系統(tǒng)的本機字體堆棧。
This actually means 2 things.
這實際上意味著兩件事。
Near-zero load time for the default font
默認字體的加載時間接近零
Uses the font the user wants / looks best for them
使用用戶想要/最適合他們的字體
Here's the code. Check-out all the fallbacks!
這是代碼。 查看所有后備廣告！
/* SCSS Variable */$font-family-sans-serif:// Safari for OS X and iOS (San Francisco)-apple-system,// Chrome >= 56 for OS X (San Francisco), Windows, Linux and Androidsystem-ui,// Chrome < 56 for OS X (San Francisco)BlinkMacSystemFont,// Windows"Segoe UI",// Android"Roboto",// Basic web fallback"Helvetica Neue", Arial, sans-serif!default;/* CSS */font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue", Arial, sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
Okay, maybe it's notdead, butreboot.cssmakes the following elements no longer have any top margin:
好吧，也許它沒有死，而是reboot.css使得以下元素不再有頂邊距：
h1
h1
h2
h2
h3
h3
h4
h4
h5
h5
h6
h6
p
p
ul
ul
ol
ol
dl
dl
pre
pre
This actually makes a ton of sense. I can vouche for this method. I never use margin-top in any of my base css that I have ever done. It makes thingsfall into placea lot easier when things are CMS powered and the content can be anything. I would even suggest addingtableto this list.
這實際上很有意義。 我可以擔保這種方法。 我從來沒有在我做過的任何基本CSS中使用margin-top。 這讓事情變得明朗起來輕松了很多當事情CMS供電，內(nèi)容可以是任何東西。 我什至建議將table添加到此列表中。
干凈，簡單的基本元素(Clean, Dead-Simple Base Elements)
Reboot also provides a clean and naked style to all common elements. Things likeblockquote,tables,formsand much more. This goes a bit more to be able to have clean and simple form fields to get up and running with.
重新啟動還為所有常見元素提供了干凈裸露的樣式。 諸如blockquote，tables，forms等之類的東西。 為了使它具有干凈且簡單的表單字段來啟動和運行，還需要做更多的工作。
By default Reboot.css usestouch-action: manipulationto speed up any delay that might exist for touch users.
默認情況下，Reboot.css使用touch-action: manipulation來加快觸摸用戶可能存在的任何延遲。
Here's the full code:
這是完整的代碼：
a,area,button,[role="button"],input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation;}
You can see that clicking links, buttons, and form fields will be a lot quicker and responsive on touch devices.
您會看到單擊鏈接，按鈕和表單字段將更快并且在觸摸設備上響應Swift。
Overall, I would sayReboot.cssis a great project and continuation of standardizing the modern web with familiar web practices. You can learn more aboutreboot.cssat the following links:
總的來說，我會說Reboot.css是一個偉大的項目，并且是通過熟悉的網(wǎng)絡實踐對現(xiàn)代網(wǎng)絡進行標準化的延續(xù)。 您可以通過以下鏈接了解有關reboot.css更多信息：
Introduction to the Reboot Stylesheet in Bootstrap 4
https://epatr.com/blog/2017/bootstrap-4-reboot-variables/
https://epatr.com/blog/2017/bootstrap-4-reboot-variables/
Bootstrap’s Reboot?—?Next Evolutionary Step for CSS Reset
翻譯自:https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss
