有很多CSS屬性，有些人不了解，或者他們了解它們，但是忘記在需要時(shí)使用它們。其實(shí)，有時(shí)候我們用 JavaScript 來(lái)實(shí)某些交互，CSS 一個(gè)屬性就能搞定了，這可以大大節(jié)約我們編碼的時(shí)間。

作為前端開(kāi)發(fā)人員，我們經(jīng)常會(huì)遇到這樣的事情。所以我問(wèn)自己，為什么不搞篇文章列出所有那些較少使用但既有用又有趣的 CSS 屬性?

在本文中，我將介紹一些不一樣的CSS屬性，希望能給你帶來(lái)點(diǎn)新鮮感，廢話不多說(shuō)，讓我們開(kāi)始吧。

在CSS網(wǎng)格中使用Place-Items

我們只需使用兩行 CSS 代碼就可以將元素水平和垂直居中。

HTML

<div class="hero"> 
    <div class="hero-wrapper"> 
        <h2>CSS is awesome</h2> 
        <p>Yes, this is a hero section made for fun.</p> 
        <a href="#">See more</a> 
    </div> 
</div> 

CSS

.hero { 
    display: grid; 
    place-items: center; 
} 

place-items是將justify-items和align-items結(jié)合在一起的簡(jiǎn)寫(xiě)屬性。上面的代碼等同于下面代碼：

.hero { 
    display: grid; 
    justify-items: center; 
    align-items: center; 
} 

你可能想知道，這是怎么回事? 我們來(lái)解釋一下。當(dāng)使用place-items時(shí)，它將應(yīng)用于網(wǎng)格中的每個(gè)單元格，也就是說(shuō)單元格的內(nèi)容都會(huì)居中。如果我們多增加幾個(gè)單元格就會(huì)很清晰明了：

.hero { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    place-items: center; 
} 

Flexbox 與 margin 的配合

與flexbox 結(jié)合使用，margin: auto 可以非常輕松地將 flex 項(xiàng)目水平和垂直居中。

html

<div class="parent"> 
    <div class="child"></div> 
</div> 

css

.parent { 
    width: 300px; 
    height: 200px; 
    background: #ccc; 
    display: flex; 
} 
 
.child { 
    width: 50px; 
    height: 50px; 
    background: #000; 
    margin: auto; 
} 

看起來(lái)有點(diǎn)酷 😎

列表的 marker 屬性

這前，我還不知道每個(gè)li項(xiàng)旁邊的默認(rèn)小圓圈稱(chēng)為marker。在我知道::marker偽元素之前，如果要重置小圓圈列表樣式，我們一般使用偽類(lèi)::before或::after偽元素：

ul { 
    list-style: none; 
    padding: 0; 
} 
 
li { 
    color: #222; 
} 
 
li::before { 
    content: "•"; 
    color: #ccc; 
    margin-right: 0.5em; 
} 

如上所示<li>顏色是#222，而偽元素::before是#ccc。如果<li>和::before具有相同的顏色，那么小圓圈默認(rèn)顏色就是 li 的顏色，因此根本不需要偽元素。

我們來(lái)看一種更好的方法：

li { 
    color: #222; 
} 
 
li::marker { 
    color: #ccc; 
} 

比起上面?zhèn)晤?lèi)的方式，這簡(jiǎn)直不要太爽!

text-align 屬性

隨著CSS flexbox和 grid 的日益普及，初學(xué)者一般也是使用它們來(lái)居中文本，而不是使用text-align屬性，但是，舊方法仍然有效。

使用text-align:center 也可以快速解決問(wèn)題，考慮以下示例。

如果僅內(nèi)容需要居中，不一定非要使用flexbox或grid，使用text-align反而會(huì)更簡(jiǎn)單。

display: inline-Flex 屬性

當(dāng)我們需要以為內(nèi)聯(lián)的方式顯示徽章列表，并且每個(gè)徽章都應(yīng)該是一個(gè)flexbox元素，這時(shí)就需要 inline-flex 出場(chǎng)了。

HTML

<span class="badge"><svg></svg></span> 
<span class="badge"><svg></svg></span> 
<span class="badge"><svg></svg></span> 
<span class="badge"><svg></svg></span> 
.badge { 
    display: inline-flex; /* where the magic happens */ 
    justify-content: center; 
    align-items: center; 
} 

CSS 的columns 屬性

column-rule 屬性是一種布局方法，可以將元素劃分為列。一個(gè)常見(jiàn)的用例是將段落文本內(nèi)容分為兩行。但是，最不常見(jiàn)的是我們可以在列之間添加邊框。我從是 Manuel Matuzovic的文章中學(xué)到了這一技巧。😍

p { 
    columns: 3; 
    column-rule: solid 2px #222; 
} 

column-rule屬性名稱(chēng)可能不能反映其用途，但可以將其想象為類(lèi)似border-right作用。

background-repeat: round

我最近從Addy Osmani的一條推文中了解了這種價(jià)值。background-repeat有一個(gè)值，可以防止背景裁剪。

.element { 
 background-size: contain; 
 background-repeat: round; 
} 

太神奇了，是不是 😲

object-fit 屬性

object-fit屬性是相當(dāng)神奇且有用的。當(dāng)我第一次了解它時(shí)，它改變了很多事情，使我作為前端開(kāi)發(fā)人員的生活更加輕松。最近，我正在研究顯示徽標(biāo)網(wǎng)格的部分。由于徽標(biāo)大小不一致，因此有時(shí)很難做到這一點(diǎn)。其中一些具有水平形狀，一些具有垂直形狀。😒😵

通過(guò)使用object-fit:contain，我可以控制徽標(biāo)的width和height，并強(qiáng)制將圖像包含在定義的寬度和高度中。😱😱

HTML

<ul class="brands"> 
    <li class="brands__item"> 
        <a href="#"> 
            <img src="img/logo.png" alt=""> 
        </a> 
    </li> 
    <li> <!-- other logos --> </li> 
</ul> 

css

img { 
    width: 130px; 
    height: 75px; 
    object-fit: contain; 
} 

通過(guò)定義width和height，強(qiáng)制限定圖像的大小，這是一個(gè)巨大的好處。更好的是，我們可以將以上內(nèi)容包裝在@supports中，以避免在不支持對(duì)象適配的瀏覽器中拉伸徽標(biāo)圖像。

@supports (object-fit: contain) { 
  img { 
    object-fit: contain; 
    height: 75px; 
  } 
} 

作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint

原文：https://ishadeed.com/article/common-css/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。