code小生?一個(gè)專注大前端領(lǐng)域的技術(shù)平臺(tái)公眾號(hào)回復(fù)Android加入安卓技術(shù)群轉(zhuǎn)載自：http://www.javanx.cn/20190321/css-skill/本文涵蓋了20個(gè)css技巧，可以解決許多工作中常見(jiàn)的問(wèn)題。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)撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過(guò)使用：not偽類(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)的外觀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 iconsSVG使用于所有分辨類，并且所有瀏覽器也都支持。所以可以將.png?.jpg?.gif?等文件 丟棄。FontAwsome5中 也提供了SVG的圖標(biāo)字體。設(shè)置SVG的格式就跟其他圖片類型一樣：.logo { background: url("logo.svg"); }溫馨提示：如果將SVG用在可交互的元素上比如說(shuō)button，SVG 會(huì)產(chǎn)生無(wú)法加載的問(wèn)題。可以通過(guò)下面這個(gè)規(guī)則來(lái)確保SVG可以訪問(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)建更加均勻的類型跟間距。在上面的列子中，跟在其他元素后面的元素，比如說(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è)置子文本樣式以具有突出顯示的外觀，則此功能尤其有用：.p { display: inline-block; box-decoration-break: clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone;}內(nèi)聯(lián)塊聲明允許將顏色、背景、頁(yè)邊距和填充應(yīng)用于每行文本，而不是整個(gè)元素，克隆聲明確保將這些樣式均勻地應(yīng)用于每行。11、等寬表格單元格表格可能很難處理，所以嘗試使用table-layout：fixed來(lái)保持單元格相等寬度：.calendar { table-layout: fixed; }12、強(qiáng)制使用屬性選擇器顯示空鏈接這對(duì)于通過(guò)CMS插入的鏈接特別有用，CMS通常不具有類屬性，并幫助您在不影響級(jí)聯(lián)的情況下對(duì)其進(jìn)行特定樣式設(shè)置。例如，元素沒(méi)有文本值，但href屬性有一個(gè)鏈接：a[href^="http"]:empty::before { content: attr(href); }13、樣式“默認(rèn)”鏈接說(shuō)到鏈接樣式，您可以在幾乎每個(gè)樣式表中找到一個(gè)通用的A樣式。這迫使您為子元素中的任何鏈接編寫(xiě)額外的覆蓋和樣式規(guī)則，并且在使用像WordPress這樣的CMS時(shí)，可能會(huì)導(dǎo)致您的主鏈接樣式比按鈕文本顏色更容易出現(xiàn)問(wèn)題。嘗試這種較少干擾的方式為“默認(rèn)”鏈接添加樣式：a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s;}14、比率框要?jiǎng)?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％。無(wú)論視口的寬度如何，子div都將保持其縱橫比(100％/ 20％= 5：1)。15、風(fēng)格破碎的圖像這個(gè)技巧不是關(guān)于代碼縮減，而是關(guān)于細(xì)化設(shè)計(jì)細(xì)節(jié)的。破碎的圖像發(fā)生的原因有很多，要么不雅觀，要么導(dǎo)致混亂(只是一個(gè)空元素)。用這個(gè)小小的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è)置為emh2 { font-size: 2em; } p { font-size: 1em; }現(xiàn)在，每個(gè)包含的元素都變得分區(qū)化，更易于樣式化、更易于維護(hù)和靈活。17、隱藏未靜音的自動(dòng)播放視頻當(dāng)您處理無(wú)法從源代碼輕松控制的內(nèi)容時(shí),這對(duì)于自定義用戶樣式表來(lái)說(shuō)是一個(gè)很好的技巧。這個(gè)技巧將幫助您避免在加載頁(yè)面時(shí)自動(dòng)播放視頻中的聲音干擾訪問(wèn)者，并再次提供了精彩的：not()偽選擇器：video[autoplay]:not([muted]) { display: none; }18、靈活運(yùn)用root類型響應(yīng)布局中的字體大小應(yīng)該能夠自動(dòng)調(diào)整到視區(qū)，從而保存編寫(xiě)媒體查詢的工作，以處理字體大小。可以使用:not和視區(qū)單位，根據(jù)視區(qū)高度和寬度計(jì)算字體大小：:root { font-size: calc(1vw + 1vh + .5vmin); }現(xiàn)在，您可以使用根em單位，該單位基于:not：body { font: 1rem/1.6 sans-serif; }結(jié)合上面的rem/em技巧以獲得更好的控制。19、在表單元素上設(shè)置字體大小，以獲得更好的移動(dòng)體驗(yàn)為了避免移動(dòng)瀏覽器(iOS Safari等)在點(diǎn)擊下拉列表時(shí)放大HTML表單元素，請(qǐng)?jiān)谔砑觙ont-size樣式：input[type="text"], input[type="number"], select, textarea { font-size: 16px; }20、CSS變量最后，最強(qiáng)大的CSS級(jí)別來(lái)自于CSS變量，它允許您聲明一組公共屬性值，這些值可以通過(guò)樣式表中任何位置的關(guān)鍵字重用。你可能有一套顏色在整個(gè)項(xiàng)目中使用，以保持一致性。關(guān)注公眾號(hào) 逆鋒起筆，回復(fù) pdf，下載你需要的各種學(xué)習(xí)資料。在CSS中反復(fù)重復(fù)這些顏色值不僅是件煩人的事情，而且還容易出錯(cuò)。如果某個(gè)顏色在某個(gè)時(shí)刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當(dāng)為最終用戶構(gòu)建產(chǎn)品時(shí)，變量使得定制變得容易得多。例如：

: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);}

---

---

寫(xiě)一手爛代碼的 19 條準(zhǔn)則，你中槍了嗎？提高工作效率的 7 個(gè) Vim 使用技巧！10 個(gè)必會(huì)的 PyCharm 技巧如果你有寫(xiě)博客的好習(xí)慣歡迎投稿贊+在看,小生感恩??

總結(jié)

以上是生活随笔為你收集整理的css img重复_20 个 CSS 快速提升技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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