20個(gè) CSS 快速 提升技巧

網(wǎng)友投稿 842 2022-05-30

1、使用CSS重置（reset）

css重置庫(kù)如normalize.css已經(jīng)被使用很多年了，它們可以為你的網(wǎng)站樣式提供一個(gè)比較清晰的標(biāo)準(zhǔn)，來(lái)確保跨瀏覽器之間的一致性。

大多數(shù)項(xiàng)目并不需要這些庫(kù)包含的所有規(guī)則，可以通過(guò)一條簡(jiǎn)單的規(guī)則來(lái)應(yīng)用于布局中的所有元素，刪除所有的margin、padding改變?yōu)g覽器默認(rèn)的盒模型。

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

使用box-sizing聲明是可選擇，如果你使用下面繼承的盒模型形式可以跳過(guò)它。

2、繼承盒模型

讓盒模型從html 繼承：

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

3、使用flexbox布局來(lái)避免margin的問(wèn)題（Get Rid of Margin hacks width Flexbox）

當(dāng)你多少次試著去設(shè)計(jì)柵格布局如：組合或者圖片畫(huà)廊，如果使用浮動(dòng)的方式，那么就需要去清除浮動(dòng)和重置外邊距來(lái)使其分解成所需要行數(shù)。為了避免nth-、first-、last-child?問(wèn)題，可以使用flexbox?的space-between 屬性值

.flex-container{display:flex;justify-content:space-between;}.flex-container .item{ flex-basis:23%;}

4、使用:not() 解決lists邊框的問(wèn)題

在web設(shè)計(jì)中，我們通常使用：last-child?nth-child?選擇器來(lái)覆蓋原先聲明應(yīng)在父選擇器上的樣式。比如說(shuō)一個(gè)導(dǎo)航菜單，通過(guò)使用borders?來(lái)給每個(gè)鏈接Link創(chuàng)建分割符，然后再在加上一條規(guī)則解除最后一個(gè)link的border

.nav li { border-right: 1px solid #666; }.nav li:last-child { border-right: none; }

這是一種很混亂的方式，它不僅強(qiáng)制瀏覽器以一種方式渲染，然后又通過(guò)特定的選擇器來(lái)撤銷(xiāo)它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過(guò)使用：not偽類(lèi)(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：

.nav li:not(:last-child) { border-right: 1px solid #666; }

上面就是，除了最后一個(gè)li以外，所有的?.nav li?都加上了border樣式，是不是很簡(jiǎn)單！

當(dāng)然，你也可以使用?.nav li+li或者?.nav li:first-child ~li?,但是?：not是更有語(yǔ)義化（semantic）和容易理解的。

5、body上加入line-height樣式

導(dǎo)致低樣式效率（inefficient stylesheets）的一件事就是不斷的重復(fù)聲明。最好是做下項(xiàng)目規(guī)劃和組合規(guī)則，這樣CSS會(huì)更流暢。實(shí)現(xiàn)這一點(diǎn)，就需要我們理解級(jí)聯(lián)（cascade）,以及如何在通用選擇器寫(xiě)的樣式可以繼承在其他地方。

行間距（line-height）可以作為給你的整個(gè)項(xiàng)目設(shè)置的一個(gè)屬性，不僅可以減小代碼量，而且可以讓你的網(wǎng)站的樣式給一個(gè)標(biāo)準(zhǔn)的外觀(guān)

body {line-height: 1.5;}

請(qǐng)注意，這里的聲明沒(méi)有單位，我們只是告訴瀏覽器讓它渲染行高是渲染字體大小的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在沒(méi)有準(zhǔn)備使用CSSGrid 布局的時(shí)候，設(shè)置垂直居中布局的全局規(guī)則是一個(gè)很好的方式，可以為優(yōu)雅（elegantly）的設(shè)置內(nèi)容布局奠定一個(gè)基礎(chǔ)

html, body {height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

7、使用SVG icons

SVG使用于所有分辨類(lèi)，并且所有瀏覽器也都支持。所以可以將.png?.jpg?.gif 等文件丟棄。FontAwsome5中也提供了SVG的圖標(biāo)字體。設(shè)置SVG的格式就跟其他圖片類(lèi)型一樣：

.logo { background: url("logo.svg"); }

溫馨提示：如果將SVG用在可交互的元素上比如說(shuō)button，SVG 會(huì)產(chǎn)生無(wú)法加載的問(wèn)題。可以通過(guò)下面這個(gè)規(guī)則來(lái)確保SVG可以訪(fǎng)問(wèn)到（確保在HTML中已設(shè)置適當(dāng)?shù)腶ria屬性）

.no-svg .icon-only:after { content: attr(aria-label); }

8、使用 “OWL選擇器”

使用通用選擇器（universal selector）*?和相鄰的兄弟選擇器（adjacent sibling selector）+ 可以提供一個(gè)強(qiáng)大的的CSS功能，給緊跟其他元素中的文檔流中的所有元素設(shè)置統(tǒng)一的規(guī)則

* + * { margin-top: 1.5rem; }

這是一個(gè)很棒的技巧，可以幫你創(chuàng)建更加均勻的類(lèi)型跟間距。在上面的列子中，跟在其他元素后面的元素，比如說(shuō)H3后面的H4，或者一個(gè)段落之后的一個(gè)段落，他們之間至少1.5rems的間距（大約為30px）

9、一致的垂直結(jié)構(gòu)（Consistent Vertical Rhythm）

一致的垂直節(jié)奏提供了一種視覺(jué)美學(xué)，使內(nèi)容更具可讀性。如果owl選擇器過(guò)于通用，請(qǐng)?jiān)谠貎?nèi)使用通用選擇器（*）為布局的特定部分創(chuàng)建一致的垂直節(jié)奏：

.intro > * { margin-bottom: 1.25rem; }

10、對(duì)更漂亮的換行文本使用 box-decoration-break

假設(shè)您希望對(duì)換行到多行的長(zhǎng)文本行應(yīng)用統(tǒng)一的間距、邊距、突出顯示或背景色，但不希望整個(gè)段落或標(biāo)題看起來(lái)像一個(gè)大塊。Box Decoration Break屬性允許您僅對(duì)文本應(yīng)用樣式，同時(shí)保持填充和頁(yè)邊距的完整性。

如果要在懸停時(shí)應(yīng)用突出顯示，或在滑塊中設(shè)置子文本樣式以具有突出顯示的外觀(guān)，則此功能尤其有用：

20個(gè) CSS 快速提升技巧