本文涵蓋了20個css技巧，可以解決許多工作中常見的問題。

1、使用CSS重置（reset）

css重置庫如normalize.css已經(jīng)被使用很多年了，它們可以為你的網(wǎng)站樣式提供一個比較清晰的標(biāo)準(zhǔn)，來確保跨瀏覽器之間的一致性。大多數(shù)項(xiàng)目并不需要這些庫包含的所有規(guī)則，可以通過一條簡單的規(guī)則來應(yīng)用于布局中的所有元素，刪除所有的margin、padding改變?yōu)g覽器默認(rèn)的盒模型。

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

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

2、繼承盒模型讓盒模型從html 繼承：

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

3、使用flexbox布局來避免margin的問題 （Get Rid of Margin hacks width Flexbox）

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

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

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

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

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

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

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

上面就是，除了最后一個li以外，所有的?.nav li都加上了border樣式，是不是很簡單！
當(dāng)然，你也可以使用?.nav li+li或者?.nav li:first-child ~li,但是?：not是更有語義化（semantic）和容易理解的。

5、body上加入line-height

樣式導(dǎo)致低樣式效率（inefficient stylesheets）的一件事就是不斷的重復(fù)聲明。最好是做下項(xiàng)目規(guī)劃和組合規(guī)則，這樣CSS會更流暢。實(shí)現(xiàn)這一點(diǎn)，就需要我們理解級聯(lián)（cascade）,以及如何在通用選擇器寫的樣式可以繼承在其他地方。行間距（line-height）可以作為給你的整個項(xiàng)目設(shè)置的一個屬性，不僅可以減小代碼量，而且可以讓你的網(wǎng)站的樣式給一個標(biāo)準(zhǔn)的外觀

body?{line-height:?1.5; }

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

6、垂直居中任何元素

(vertical-center anything)在沒有準(zhǔn)備使用CSSGrid 布局的時候，設(shè)置垂直居中布局的全局規(guī)則是一個很好的方式，可以為優(yōu)雅（elegantly）的設(shè)置內(nèi)容布局奠定一個基礎(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使用于所有分辨類，并且所有瀏覽器也都支持。所以可以將.png?.jpg?.gif?等文件 丟棄。FontAwsome5中 也提供了SVG的圖標(biāo)字體。設(shè)置SVG的格式就跟其他圖片類型一樣：

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

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

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

8、使用 “OWL選擇器”

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

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

這是一個很棒的技巧，可以幫你創(chuàng)建更加均勻的類型跟間距。在上面的列子中，跟在其他元素后面的元素，比如說H3后面的H4，或者一個段落之后的一個段落，他們之間至少1.5rems的間距（大約為30px）
9、一致的垂直結(jié)構(gòu)（Consistent Vertical Rhythm）一致的垂直節(jié)奏提供了一種視覺美學(xué)，使內(nèi)容更具可讀性。如果owl選擇器過于通用，請在元素內(nèi)使用通用選擇器（*）為布局的特定部分創(chuàng)建一致的垂直節(jié)奏：

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

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

假設(shè)您希望對換行到多行的長文本行應(yīng)用統(tǒng)一的間距、邊距、突出顯示或背景色，但不希望整個段落或標(biāo)題看起來像一個大塊。Box Decoration Break屬性允許您僅對文本應(yīng)用樣式，同時保持填充和頁邊距的完整性。如果要在懸停時應(yīng)用突出顯示，或在滑塊中設(shè)置子文本樣式以具有突出顯示的外觀，則此功能尤其有用：

.p?{display:?inline-block;box-decoration-break:?clone;-o-box-decoration-break:?clone;-webkit-box-decoration-break:?clone; }

內(nèi)聯(lián)塊聲明允許將顏色、背景、頁邊距和填充應(yīng)用于每行文本，而不是整個元素，克隆聲明確保將這些樣式均勻地應(yīng)用于每行。

11、等寬表格

單元格表格可能很難處理，所以嘗試使用table-layout：fixed來保持單元格相等寬度：

.calendar?{????table-layout:?fixed;?? }

12、強(qiáng)制使用屬性選擇器顯示空鏈接

這對于通過CMS插入的鏈接特別有用，CMS通常不具有類屬性，并幫助您在不影響級聯(lián)的情況下對其進(jìn)行特定樣式設(shè)置。例如，<a>元素沒有文本值，但href屬性有一個鏈接：

a[href^="http"]:empty::before?{????content:?attr(href);?? }

13、樣式“默認(rèn)”鏈接

說到鏈接樣式，您可以在幾乎每個樣式表中找到一個通用的A樣式。這迫使您為子元素中的任何鏈接編寫額外的覆蓋和樣式規(guī)則，并且在使用像WordPress這樣的CMS時，可能會導(dǎo)致您的主鏈接樣式比按鈕文本顏色更容易出現(xiàn)問題。嘗試這種較少干擾的方式為“默認(rèn)”鏈接添加樣式：

a[href]:not([class])?{????color:?#999;????text-decoration:?none;??transition:?all?ease-in-out?.3s; }

14、比率框

要創(chuàng)建具有固有比率的框，您需要做的就是將頂部或底部填充應(yīng)用于div：

.container?{????height:?0;????padding-bottom:?20%;????position:?relative;?? }???? .container?div?{????border:?2px?dashed?#ddd;????height:?100%;????left:?0;????position:?absolute;????top:?0;????width:?100%;?? }

使用20％進(jìn)行填充使得框的高度等于其寬度的20％。無論視口的寬度如何，子div都將保持其縱橫比（100％/ 20％= 5：1）。

15、風(fēng)格破碎的圖像

這個技巧不是關(guān)于代碼縮減，而是關(guān)于細(xì)化設(shè)計細(xì)節(jié)的。破碎的圖像發(fā)生的原因有很多，要么不雅觀，要么導(dǎo)致混亂（只是一個空元素）。用這個小小的CSS創(chuàng)建更美觀的效果：

img?{????display:?block;????font-family:?Helvetica,?Arial,?sans-serif;????font-weight:?300;????height:?auto;????line-height:?2;????position:?relative;????text-align:?center;????width:?100%;?? } img:before?{????content:?"We're?sorry,?the?image?below?is?missing?:(";????display:?block;????margin-bottom:?10px;?? }???? img:after?{????content:?"(url:?"?attr(src)?")";???display:?block;????font-size:?12px;?? }

16、使用rem進(jìn)行全局大小調(diào)整；使用em進(jìn)行局部大小調(diào)整

在設(shè)置根目錄的基本字體大小后，例如html字體大小：15px；，可以將包含元素的字體大小設(shè)置為rem:

article?{????font-size:?1.25rem;?? }???? aside?{????font-size:?.9rem;?? }

然后將文本元素的字體大小設(shè)置為em

h2?{????font-size:?2em;?? }???? p?{????font-size:?1em;?? }

現(xiàn)在，每個包含的元素都變得分區(qū)化，更易于樣式化、更易于維護(hù)和靈活。

17、隱藏未靜音的自動播放視頻

當(dāng)您處理無法從源代碼輕松控制的內(nèi)容時,這對于自定義用戶樣式表來說是一個很好的技巧。這個技巧將幫助您避免在加載頁面時自動播放視頻中的聲音干擾訪問者，并再次提供了精彩的：not（）偽選擇器：

video[autoplay]:not([muted])?{????display:?none;?? }

18、靈活運(yùn)用root類型

響應(yīng)布局中的字體大小應(yīng)該能夠自動調(diào)整到視區(qū)，從而保存編寫媒體查詢的工作，以處理字體大小。可以使用:not和視區(qū)單位，根據(jù)視區(qū)高度和寬度計算字體大小：

:root?{????font-size:?calc(1vw?+?1vh?+?.5vmin);?? }

現(xiàn)在，您可以使用根em單位，該單位基于:not：

body?{????font:?1rem/1.6?sans-serif;?? }

結(jié)合上面的rem/em技巧以獲得更好的控制。

19、在表單元素上設(shè)置字體大小，以獲得更好的移動體驗(yàn)

為了避免移動瀏覽器（iOS Safari等）在點(diǎn)擊<select>下拉列表時放大HTML表單元素，請在添加font-size樣式：

input[type="text"],?? input[type="number"],?? select,?? textarea?{????font-size:?16px;?? }

20、CSS變量

最后，最強(qiáng)大的CSS級別來自于CSS變量，它允許您聲明一組公共屬性值，這些值可以通過樣式表中任何位置的關(guān)鍵字重用。你可能有一套顏色在整個項(xiàng)目中使用，以保持一致性。在CSS中反復(fù)重復(fù)這些顏色值不僅是件煩人的事情，而且還容易出錯。如果某個顏色在某個時刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當(dāng)為最終用戶構(gòu)建產(chǎn)品時，變量使得定制變得容易得多。例如：

:root?{--main-color:?#06c;--accent-color:?#999; }h1,?h2,?h3?{color:?var(--main-color); } a[href]:not([class]), p, footer?span{color:?var(--accent-color); } 作者丨鎮(zhèn)上寶塔http://www.javanx.cn/20190321/css-skillIT技術(shù)分享社區(qū)個人博客網(wǎng)站：https://programmerblog.xyz文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠(yuǎn)程辦公：常用的遠(yuǎn)程協(xié)助軟件，你都知道嗎？51單片機(jī)程序下載、ISP及串口基礎(chǔ)知識硬件：斷路器、接觸器、繼電器基礎(chǔ)知識

總結(jié)

以上是生活随笔為你收集整理的前端：20个 CSS 快速提升技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。