有很多CSS屬性，有些人不瞭解，或者他們瞭解它們，但是忘記在需要時使用它們。其實，有時候我們用 JavaScript 來實某些交互，CSS 一個屬性就能搞定了，這可以大大節約我們編碼的時間。
作爲前端開發人員，我們經常會遇到這樣的事情。所以我問自己，爲什麼不搞篇文章列出所有那些較少使用但既有用又有趣的 CSS 屬性？
在本文中，我將介紹一些不一樣的CSS屬性，希望能給你帶來點新鮮感，廢話不多說，讓我們開始吧。
在CSS網格中使用Place-Items
我們只需使用兩行 CSS 代碼就可以將元素水平和垂直居中。
HTML
CSSisawesome
Yes,thisisa hero section madeforfun.</p>See more
CSS
.hero{display: grid;place-items: center;}
place-items是將justify-items和align-items結合在一起的簡寫屬性。上面的代碼等同於下面代碼：
.hero{display: grid;justify-items: center;align-items: center;}
你可能想知道，這是怎麼回事? 我們來解釋一下。當使用place-items時，它將應用於網格中的每個單元格，也就是說單元格的內容都會居中。如果我們多增加幾個單元格就會很清晰明瞭：
.hero{display: grid;grid-template-columns:1fr1fr;place-items: center;}
Flexbox 與 margin 的配合
與flexbox 結合使用，margin: auto 可以非常輕鬆地將 flex 項目水平和垂直居中。
html
css
.parent{width:300px;height:200px;background:#ccc;display: flex;}.child{width:50px;height:50px;background:#000;margin: auto;}
看起來有點酷
列表的 marker 屬性
這前，我還不知道每個li項旁邊的默認小圓圈稱爲marker。 在我知道::marker僞元素之前，如果要重置小圓圈列表樣式，我們一般使用僞類::before或::after僞元素：
ul{list-style: none;padding:0;}li{color:#222;}li::before{content:"•";color:#ccc;margin-right:0.5em;}
如上所示
顏色是#222，而僞元素::before是#ccc。如果
和::before具有相同的顏色，那麼小圓圈默認顏色就是 li 的顏色，因此根本不需要僞元素。
我們來看一種更好的方法：
li{color:#222;}li::marker{color:#ccc;}
比起上面僞類的方式，這簡直不要太爽！
text-align 屬性
隨着CSS flexbox和 grid 的日益普及，初學者一般也是使用它們來居中文本，而不是使用text-align屬性，但是，舊方法仍然有效。
使用text-align:center 也可以快速解決問題，考慮以下示例。
如果僅內容需要居中，不一定非要使用flexbox或grid，使用text-align反而會更簡單。
display: inline-Flex 屬性
當我們需要以爲內聯的方式顯示徽章列表，並且每個徽章都應該是一個flexbox元素，這時就需要 inline-flex 出場了。
HTML
.badge{display: inline-flex;/* where the magic happens */justify-content: center;align-items: center;}
column-rule 屬性
CSS 的columns 屬性是一種佈局方法，可以將元素劃分爲列。 一個常見的用例是將段落文本內容分爲兩行。 但是，最不常見的是我們可以在列之間添加邊框。 我從是 Manuel Matuzovic的文章中學到了這一技巧。
p{columns:3;column-rule: solid2px#222;}
column-rule屬性名稱可能不能反映其用途，但可以將其想象爲類似border-right作用。
background-repeat: round
我最近從Addy Osmani的一條推文中瞭解了這種價值。 background-repeat有一個值，可以防止背景裁剪。
.element{background-size: contain;background-repeat: round;}
太神奇了，是不是
object-fit 屬性
object-fit屬性是相當神奇且有用的。 當我第一次瞭解它時，它改變了很多事情，使我作爲前端開發人員的生活更加輕鬆。 最近，我正在研究顯示徽標網格的部分。 由於徽標大小不一致，因此有時很難做到這一點。 其中一些具有水平形狀，一些具有垂直形狀。
通過使用object-fit:contain，我可以控制徽標的width和height，並強制將圖像包含在定義的寬度和高度中。
HTML
<!-- other logos -->
css
img{width:130px;height:75px;object-fit: contain;}
通過定義width和height，強制限定圖像的大小，這是一個巨大的好處。 更好的是，我們可以將以上內容包裝在@supports中，以避免在不支持對象適配的瀏覽器中拉伸徽標圖像。
@supports(object-fit:contain) {img{object-fit: contain;height:75px; }}
代碼部署後可能存在的BUG沒法實時知道，事後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
建議收藏，不然刷着刷着就可能找不到了。
學習是一個艱苦的過程，當然如果能把技術學成，最後也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今後要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對於自己也是一個提升的過程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理這是我的前端技術交流羣518672693有問題隨時在裏面問我，能給大家提出很多寶貴建議。
