如何使用CSS重置

這篇文章中，我們看看這個CSS屬性，最好是使用這個屬性，并給出一些使用CSS的示例。

代碼中的重置提供了一組簡短的規則，可將所有元素的樣式重置為一致的基準。這是需要的，因為樣式在瀏覽器中不一致。你不希望像前樣式那樣的東西，比如表格元素，在你打開的時候就會惹你。

實踐

當我開始使用CSS時，它告訴我，一開始你應該總是寫：

*{
margin:0;
padding:0;
}

這是基本的CSS重置。

一些在不同瀏覽器中風格不同的最常見元素是超鏈接（<a>），圖像（<img>），標題（<h1>到<h6>），以及給各種元素的邊距。眾所周知的事實是，瀏覽器為幾乎所有內容添加了一定數量的填充。

瀏覽器之間結賬按鈕的不同樣式示例：

不同元素（標題，鏈接，跨度，代碼，blockquote）的不同樣式的示例：

每個瀏覽器都有默認的HTML格式，您可以在檢查模式下的“用戶代理樣式表”下看到它。如果為特定元素添加了樣式，則其默認瀏覽器格式將被覆蓋。

重置腳本

我最喜歡的CSS重置腳本是http://html5doctor.com中的一個：

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colors to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colors to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border color to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

一些定義的樣式非常標準（用于<a>和<ul>），一些用于幫助訪問（用于<abbr>和<dfn>），另一些用于額外添加（<hr>）。

一些開發人員不使用CSS重置，而是使用CSS正常化（有些開發人員稱它為 “新重置”）。雖然重置用于清除所有內容并使您的項目成為“tabula rasa”，但規范化會保持良好的實踐，同時消除跨瀏覽器風格的不一致性。我將在未來寫關于CSS正常化的內容。

結論

不需要重置您的CSS，但它需要了解瀏覽器的預設置和CSS重置的存在。

家好，我是 Echa。

當開始一個新的前端項目時，首要任務就是重置 CSS 中的一些默認樣式。下面就來看看在現代 CSS 中如何進行樣式重置。本文將深入研究每條規則，以了解它的作用和使用它的原因！

下面是自定義的 CSS 重置代碼：

/*
  1. 使用更直觀的 box-sizing 模型
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. 移除默認 margin
*/
* {
  margin: 0;
}
/*
  3. 在應用中允許基于百分比的高度
*/
html, body {
  height: 100%;
}
/*
  排版調整
  4. 添加無障礙行高
  5. 改進文本渲染
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. 改進媒體默認設置
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. 刪除內置表單排版樣式
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. 避免文字溢出
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. 創建根層疊上下文
*/
#root, #__next {
  isolation: isolate;
}

這里的代碼不多，但是這個小樣式表中包含了很多內容。下面將逐條介紹！

從歷史上看，CSS 重置的主要目標是確保瀏覽器之間的一致性，并撤消所有默認樣式。這段 CSS 重置代碼并沒有真正做這些事情。
如今，瀏覽器在布局或間距方面沒有太大的差異。總的來說，瀏覽器準確地實現了 CSS 規范，并且一切都如你期望的那樣，所以它不再是必要的了。
這里的 CSS 重置可能不符合“CSS重置”的經典定義，但更具創造性！

1. box-sizing 模型

先來看一段代碼，假設沒有應用其他 CSS，以下場景中的 .box 元素有多寬？

<style>
  .parent {
    width: 200px;
  }
  .box {
    width: 100%;
    border: 2px solid hotpink;
    padding: 20px;
  }
</style>

<div class="parent">
  <div class="box"></div>
</div>

這里的 .box 元素的寬度為：100%。因為它的父級寬度為 200px ，所以 100% 將解析為 200px。但是它在哪里應用了 200px 的寬度呢？默認情況下，它將該大小應用于內容區域，即下圖中白色的區域：

width: 100% 聲明會將 .box 的內容框設置為 200px。而 padding 將增加額外的 40 px（每邊 20 px）。border 將增加額外的 4px（每邊 2px）。當進行計算時，粉紅色矩形的寬度將是 244 px。

當嘗試將 244px 的框放入寬度為 200px 的父級時，就會發生溢出：

我們可以通過設置以下規則來更改這種奇怪的行為：

*, *::before, *::after {
  box-sizing: border-box;
}

應用此規則后，百分比將根據 border-box 進行解析。在上面的例子中，粉色框寬度為 200 px，內部內容框的寬度將縮小到 156 px（200 px - 40 px - 4 px）。

這是一條必須具備的規則，它使 CSS 更好用。這里使用通配符選擇器 (*) 將它應用于所有元素和偽元素。與人們普遍的看法相反，這對性能來說并不壞。

網絡上有一些人建議改為執行以下操作：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

如果i正在嘗試遷移一個大型的已經存在的項目以使用 border-box，這可能是一個有用的策略。如果要從頭開始一個全新的項目，這就是沒有必要的。為了簡單起見，上面的 CSS 重置中省略了它。

那在什么時候，這是有用的呢？下面來看一個可能有用的示例。如果您正在嘗試遷移一個大型的預先存在的項目以使用 border-box，這可能是一個有用的策略。如果您要從頭開始一個全新的項目，則沒有必要。為了簡單起見，我在 CSS 重置中省略了它。

展開以查看何時可能有用的示例。首先，將 legacy 的 box-sizing 屬性設置為 content-box，即 box-sizing 屬性的默認值：

.legacy {
  box-sizing: content-box;
}

然后，當應用有一部分尚未遷移到使用 border-box 時，可以將類這樣放：

<body>
  <header class="legacy">
    <nav>
      <!-- 遺留的內容在這里 -->
    </nav>
  </header>
  <main>
    <section>
      <!-- 現代的內容在這里 -->
    </section>
    <aside class="legacy">
      <!-- 遺留的內容在這里 -->
    </aside>
  </main>
</body>

這里，<header> 被賦予了 legacy 類，因此它使用 box-sizing: content-box。它的子元素 <nav> 具有 box-sizing: inherit。因為它的父級設置為 content-box，所以 nav 也將設置為 content-box。

<main> 標簽沒有 legacy 類，因此它繼承自其父類 <body>。<body> 繼承自 <html>。<html> 被設置為了 border-box。

本質上，每個元素現在都會從其他元素中找出其 box-sizing 的行為。如果它有一個設置 legacy 類的祖先，它將是 content-box。否則，最終會繼承 html 標簽，即使用 border-box。

2. 移除默認 margin

* {
  margin: 0;
}

通常，瀏覽器會圍繞 margin 做出常識性假設。例如，默認情況下，h1 將包含比 p 更多的邊距。這些假設在處理文檔文字的上下文中是合理的，但對于現代 Web 應用而言可能并不準確。

我們可能通常希望元素默認是沒有任何邊距的，所以就把默認的邊距全部刪除了。當確實想為特定標簽添加一些邊距時，可以在自定義樣式中來添加。通配符選擇器 (*) 的特異性極低，因此很容易覆蓋此規則。

3. 基于百分比的高度

html, body {
  height: 100%;
}

你有沒有試過在 CSS 中使用基于百分比的高度，卻發現它似乎沒有效果？下面來看一個例子：

這里 main 元素具有 100% 的高度，但是元素根本沒有變長。這是行不通的，因為在流式布局（CSS 中的主要布局模式）中，高度和寬度的操作原理完全不同。元素的寬度是根據其父元素計算的，而元素的高度是根據其子元素計算的。

當應用這條規則時，main 元素就可以增長：

如果使用的是像 React 這樣的 JavaScript 框架，可能還希望在此規則中添加第三個選擇器：框架使用的根級的元素。

例如，在 Next.js 項目中，將規則更新如下：

html, body, #__next {
  height: 100%;
}

那為什么要設置基于百分比的 height，而不改用 vh 單位呢？問題就在于 vh 單元在移動設備上無法正常工作；100vh 將占據超過 100% 的屏幕空間，因為移動瀏覽器會在瀏覽器 UI 出現和消失的地方做這件事。未來，新的 CSS 單位將解決這個問題。在那之前，可以使用基于百分比的高度。

4. 調整行高

body {
  line-height: 1.5;
}

line-height 控制段落中每行文本之間的垂直間距。默認值因瀏覽器而異，通常在 1.2 左右。這個沒有單位的數字是基于字體大小的，就像 em 單位。行高為 1.2 時，每行高度將比元素的字體大小大 20%。

這就是問題所在：對于有閱讀障礙的人來說，這些行擠得太緊了，很難閱讀。WCAG 標準規定行高應至少為 1.5。這個數字確實傾向于在標題和其他大字體元素上產生相當大的行：

你可能希望在標題上覆蓋此值。我的理解是 WCAG 標準適用于“正文”文本，而不是標題。

5. 平滑字體

body {
  -webkit-font-smoothing: antialiased;
}

在 MacOS 電腦上，瀏覽器默認使用“亞像素抗鋸齒”。這是一種旨在通過利用每個像素內的 R/G/B 光使文本更易于閱讀的技術。過去，這被視為可訪問性的勝利，因為它提高了文本對比度。

在 2018 年發布的 MacOS Mojave 中，Apple 禁用了整個操作系統的亞像素抗鋸齒功能。然而，像 Chrome 和 Safari 這樣的 MacOS 瀏覽器默認情況下仍然使用子像素抗鋸齒。我們需要通過將 -webkit-font-smoothing 設置為 antialiased 來關閉它。

下圖中，左側是關閉之后的效果：

MacOS 是唯一使用子像素抗鋸齒的操作系統，因此此規則對 Windows、Linux 或移動設備并沒有影響。如果使用的是 MacOS 計算機，則可以比較兩者的實時渲染（沒有使用CSS重置）：

p {
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: sans-serif;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
}

效果如下：

6. 媒體默認值

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

在 HTML 中，圖像被認為是內聯元素。這意味著它應該用在段落中間，像<em> 或 <strong>一樣。這與大多數時候使用圖像的方式不一致。通常，對待圖像的方式與對待段落、標題的方式相同，都是布局元素。

但是，如果嘗試在布局中使用內聯元素，就會發生奇怪的事情。如果你曾經有過一個神秘的 4px 間隙，它不是padding、margin或border，它可能是瀏覽器用行高添加的內聯空間。

通過給圖片設置 display: block 就避免了這種問題。除此之外，還設置了max-width: 100%。這樣做是為了防止大圖溢出，如果它們被放置在了一個不夠寬的容器中。大多數塊級元素會自動增長/收縮以適應其父元素，但像 <img> 這樣的媒體元素很特殊：它們被稱為替換元素，并且它們不遵循這些規則。

如果圖像的原始尺寸為 800×600，即使將其放入寬度為 500px 的父元素中，其寬度也將是 800px。這條規則將防止該圖像超出其容器，這可能是更明智的默認行為。

7. 繼承表單控件的字體

input, button, textarea, select {
  font: inherit;
}

默認情況下，按鈕和輸入框不會從其父元素繼承排版樣式。相反，它們有自己的怪異風格。例如，<textarea> 將使用系統默認的等寬字體。input 輸入將使用系統默認的無襯線字體。兩者都將選擇很小的字體大小（在 Chrome 中為 13.333px）。在移動設備上閱讀 13 px 的文本會很困難。當聚焦一個小字體的 input 時，瀏覽器會自動放大，讓文本更容易閱讀。

這是一個不太好的體驗：

如果想要避免這種自動縮放行為，輸入的字體大小至少需要 1rem / 16px。下面是解決該問題的一種方法：

input, button, textarea, select {
  font-size: 1rem;
}

這的確解決了自動縮放問題，但這這是表面上的。這個問題的根本原因是：表單輸入不應該有自己的排版樣式。

input, button, textarea, select {
  font: inherit;
}

font 是一種很少使用的速記，它設置了一些與字體相關的屬性，如 font-size、font-weight、font-family。通過將其設置為 inherit，就指定這些元素與其周圍環境中的排版相匹配。只要不為正文設置很小的字體，這樣做就可以解決這些問題。

8. 自動換行

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

在 CSS 中，如果一行中沒有足夠的空間容納所有字符，文本將自動換行。默認情況下，算法會尋找“軟換行”的機會，這些是算法可以拆分的字符。在英語中，唯一的軟換行機會就是空格和連字符，但這因語言而異。

如果一行中沒有任何軟換行機會，并且它不適合換行，就會導致文本溢出：

這可能會導致出現水平滾動條，也可能會導致文本與其他元素重疊，或者滑到圖像/視頻后面。

overflow-wrap 屬性可以調整換行算法，并允許它在找不到軟換行機會時使用硬換行：

除此之外，還可以嘗試添加 hyphens 屬性：

p {
  overflow-wrap: break-word;
  hyphens: auto;
}

hyphens: auto 使用連字符（在支持它的語言中）來指定硬換行，它使硬換行更加普遍。如果文本列非常窄，這可能是值得的，但它也可能有點分散注意力。所以并沒有將其包含在重置中，但值得一試！

9. 根層疊上下文

#root, #__next {
  isolation: isolate;
}

這一項是是可選的。通常只有在使用像 React 這樣的 JavaScript 框架時才需要它。isolation 屬性允我們創建一個新的層疊上下文，而無需設置 z-index。這就可以保證某些高優先級元素（例如模態框、下拉菜單、tooltip）將始終顯示在應用中的其他元素之上。

我們需要根據使用的框架來調整選擇器，該選擇器選擇的是應用中渲染的頂級元素。例如，create-react-app 使用的是 <div id="root">，所以應該使用選擇器#root。

最后，再來看一下這些重置樣式的完整代碼，可以將其復制/粘貼到自己的項目中：


*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

參考文章：https://www.joshwcomeau.com/css/custom-css-reset/

次寫了篇pc端的css重置樣式，需要注意的一些事。好多xd留言，馬上開動，說說移動端的css樣式重置需要注意的一些事。

1、和pc端不同的是，pc需要兼容低版本的瀏覽器，而移動端這方面的工作就小多了。

2、移動端大膽的用css3吧

那么重置移動端的樣式有哪些注意點呢？

容器的大小：
-webkit-box-sizing:border-box; /*webkit核心*/
box-sizing:border-box; /*容器的大小為邊框的大小*/
去除input的默認樣式：
-webkit-appearance:none;
去除a鏈接點擊菜單時區域高亮
第二種清除浮動(第一種見另一篇css重置樣式的那些事)：
說完了。下篇說說bootstrap的滾動監聽插件的使用。

在線咨詢

上一篇：Chrome/Safari都輸了：新Edge瀏覽器率先實現100%支持HTML5
下一篇：怎樣自己實現一個web前端分頁