建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是 CUGGZ。
我們提供的服務(wù)有：成都網(wǎng)站制作、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、東興ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的東興網(wǎng)站制作公司
當(dāng)開始一個新的前端項目時，首要任務(wù)就是重置 CSS 中的一些默認(rèn)樣式。下面就來看看在現(xiàn)代 CSS 中如何進(jìn)行樣式重置。本文將深入研究每條規(guī)則，以了解它的作用和使用它的原因！
下面是自定義的 CSS 重置代碼：
/*
1. 使用更直觀的 box-sizing 模型
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. 移除默認(rèn) margin
*/
* {
margin: 0;
}
/*
3. 在應(yīng)用中允許基于百分比的高度
*/
html, body {
height: 100%;
}
/*
排版調(diào)整
4. 添加無障礙行高
5. 改進(jìn)文本渲染
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. 改進(jìn)媒體默認(rèn)設(shè)置
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
7. 刪除內(nèi)置表單排版樣式
*/
input, button, textarea, select {
font: inherit;
}
/*
8. 避免文字溢出
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
9. 創(chuàng)建根層疊上下文
*/
#root, #__next {
isolation: isolate;
}
這里的代碼不多，但是這個小樣式表中包含了很多內(nèi)容。下面將逐條介紹！
從歷史上看，CSS 重置的主要目標(biāo)是確保瀏覽器之間的一致性，并撤消所有默認(rèn)樣式。這段 CSS 重置代碼并沒有真正做這些事情。
如今，瀏覽器在布局或間距方面沒有太大的差異。總的來說，瀏覽器準(zhǔn)確的實現(xiàn)了 CSS 規(guī)范，并且一切都如你期望的那樣，所以它不再是必要的了。
這里的 CSS 重置可能不符合“CSS重置”的經(jīng)典定義，但更具創(chuàng)造性！
1、box-sizing 模型
先來看一段代碼，假設(shè)沒有應(yīng)用其他 CSS，以下場景中的 .box 元素有多寬？
這里的 .box 元素的寬度為：100%。因為它的父級寬度為 200px ，所以 100% 將解析為 200px。但是它在哪里應(yīng)用了 200px 的寬度呢？默認(rèn)情況下，它將該大小應(yīng)用于內(nèi)容區(qū)域，即下圖中白色的區(qū)域：
width: 100% 聲明會將 .box 的內(nèi)容框設(shè)置為 200px。而 padding 將增加額外的 40 px（每邊 20 px）。border 將增加額外的 4px（每邊 2px）。當(dāng)進(jìn)行計算時，粉紅色矩形的寬度將是 244 px。
當(dāng)嘗試將 244px 的框放入寬度為 200px 的父級時，就會發(fā)生溢出：
我們可以通過設(shè)置以下規(guī)則來更改這種奇怪的行為：
*, *::before, *::after {
box-sizing: border-box;
}應(yīng)用此規(guī)則后，百分比將根據(jù) border-box 進(jìn)行解析。在上面的例子中，粉色框?qū)挾葹?200 px，內(nèi)部內(nèi)容框的寬度將縮小到 156 px（200 px - 40 px - 4 px）。
這是一條必須具備的規(guī)則，它使 CSS 更好用。這里使用通配符選擇器 (*) 將它應(yīng)用于所有元素和偽元素。與人們普遍的看法相反，這對性能來說并不壞。
網(wǎng)絡(luò)上有一些人建議改為執(zhí)行以下操作：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}如果i正在嘗試遷移一個大型的已經(jīng)存在的項目以使用 border-box，這可能是一個有用的策略。如果要從頭開始一個全新的項目，這就是沒有必要的。為了簡單起見，上面的 CSS 重置中省略了它。
那在什么時候，這是有用的呢？下面來看一個可能有用的示例。如果您正在嘗試遷移一個大型的預(yù)先存在的項目以使用 border-box，這可能是一個有用的策略。如果您要從頭開始一個全新的項目，則沒有必要。為了簡單起見，我在 CSS 重置中省略了它。
展開以查看何時可能有用的示例。首先，將 legacy 的 box-sizing 屬性設(shè)置為 content-box，即 box-sizing 屬性的默認(rèn)值：
.legacy {
box-sizing: content-box;
}然后，當(dāng)應(yīng)用有一部分尚未遷移到使用 border-box 時，可以將類這樣放：
這里，
本質(zhì)上，每個元素現(xiàn)在都會從其父元素中找出其 box-sizing 的行為。如果它有一個設(shè)置 legacy 類的祖先，它將是 content-box。否則，最終會繼承 html 標(biāo)簽，即使用 border-box。
2、移除默認(rèn) margin
* {
margin: 0;
}通常，瀏覽器會圍繞 margin 做出常識性假設(shè)。例如，默認(rèn)情況下，h1 將包含比 p 更多的邊距。這些假設(shè)在處理文檔文字的上下文中是合理的，但對于現(xiàn)代 Web 應(yīng)用而言可能并不準(zhǔn)確。
我們可能通常希望元素默認(rèn)是沒有任何邊距的，所以就把默認(rèn)的邊距全部刪除了。當(dāng)確實想為特定標(biāo)簽添加一些邊距時，可以在自定義樣式中來添加。通配符選擇器 (*) 的特異性極低，因此很容易覆蓋此規(guī)則。
3、基于百分比的高度
html, body {
height: 100%;
}你有沒有試過在 CSS 中使用基于百分比的高度，卻發(fā)現(xiàn)它似乎沒有效果？下面來看一個例子：
這里 main 元素具有 100% 的高度，但是元素根本沒有變長。這是行不通的，因為在流式布局（CSS 中的主要布局模式）中，高度和寬度的操作原理完全不同。元素的寬度是根據(jù)其父元素計算的，而元素的高度是根據(jù)其子元素計算的。
當(dāng)應(yīng)用這條規(guī)則時，main 元素就可以增長：
如果使用的是像 React 這樣的 JavaScript 框架，可能還希望在此規(guī)則中添加第三個選擇器：框架使用的根級的元素。
例如，在 Next.js 項目中，將規(guī)則更新如下：
html, body, #__next {
height: 100%;
}那為什么要設(shè)置基于百分比的 height，而不改用 vh 單位呢？問題就在于 vh 單元在移動設(shè)備上無法正常工作；100vh 將占據(jù)超過 100% 的屏幕空間，因為移動瀏覽器會在瀏覽器 UI 出現(xiàn)和消失的地方做這件事。未來，新的 CSS 單位將解決這個問題。在那之前，可以使用基于百分比的高度。
4、調(diào)整行高
body {
line-height: 1.5;
}line-height 控制段落中每行文本之間的垂直間距。默認(rèn)值因瀏覽器而異，通常在 1.2 左右。這個沒有單位的數(shù)字是基于字體大小的，就像 em 單位。行高為 1.2 時，每行高度將比元素的字體大小大 20%。
這就是問題所在：對于有閱讀障礙的人來說，這些行擠得太緊了，很難閱讀。WCAG 標(biāo)準(zhǔn)規(guī)定行高應(yīng)至少為 1.5。這個數(shù)字確實傾向于在標(biāo)題和其他大字體元素上產(chǎn)生相當(dāng)大的行：
你可能希望在標(biāo)題上覆蓋此值。我的理解是 WCAG 標(biāo)準(zhǔn)適用于“正文”文本，而不是標(biāo)題。
5、平滑字體
body {
-webkit-font-smoothing: antialiased;
}在 MacOS 電腦上，瀏覽器默認(rèn)使用“亞像素抗鋸齒”。這是一種旨在通過利用每個像素內(nèi)的 R/G/B 光使文本更易于閱讀的技術(shù)。過去，這被視為可訪問性的勝利，因為它提高了文本對比度。
在 2018 年發(fā)布的 MacOS Mojave 中，Apple 禁用了整個操作系統(tǒng)的亞像素抗鋸齒功能。然而，像 Chrome 和 Safari 這樣的 MacOS 瀏覽器默認(rèn)情況下仍然使用子像素抗鋸齒。我們需要通過將 -webkit-font-smoothing 設(shè)置為 antialiased 來關(guān)閉它。
下圖中，左側(cè)是關(guān)閉之后的效果：
MacOS 是唯一使用子像素抗鋸齒的操作系統(tǒng)，因此此規(guī)則對 Windows、Linux 或移動設(shè)備并沒有影響。如果使用的是 MacOS 計算機(jī)，則可以比較兩者的實時渲染（沒有使用CSS重置）：
p {
-webkit-font-smoothing: subpixel-antialiased;
font-family: sans-serif;
}
.antialiased {
-webkit-font-smoothing: antialiased;
}效果如下：
6. 媒體默認(rèn)值
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}在 HTML 中，圖像被認(rèn)為是內(nèi)聯(lián)元素。這意味著它應(yīng)該用在段落中間，像 或 一樣。這與大多數(shù)時候使用圖像的方式不一致。通常，對待圖像的方式與對待段落、標(biāo)題的方式相同，都是布局元素。
但是，如果嘗試在布局中使用內(nèi)聯(lián)元素，就會發(fā)生奇怪的事情。如果你曾經(jīng)有過一個神秘的 4px 間隙，它不是padding、margin或border，它可能是瀏覽器用行高添加的內(nèi)聯(lián)空間。
通過給圖片設(shè)置 display: block 就避免了這種問題。除此之外，還設(shè)置了max-width: 100%。這樣做是為了防止大圖溢出，如果它們被放置在了一個不夠?qū)挼娜萜髦?。大多?shù)塊級元素會自動增長/收縮以適應(yīng)其父元素，但像 這樣的媒體元素很特殊：它們被稱為替換元素，并且它們不遵循這些規(guī)則。
如果圖像的原始尺寸為 800×600，即使將其放入寬度為 500px 的父元素中，其寬度也將是 800px。這條規(guī)則將防止該圖像超出其容器，這可能是更明智的默認(rèn)行為。
7、繼承表單控件的字體
input, button, textarea, select {
font: inherit;
}默認(rèn)情況下，按鈕和輸入框不會從其父元素繼承排版樣式。相反，它們有自己的怪異風(fēng)格。例如，