英文 | https://betterprogramming.pub/22-css-tricks-that-can-make-you-a-layout-ninja-452847fba639

翻譯 | 楊小二

今天我想告訴你一些在技術(shù)文獻(xiàn)中也很少提到的 CSS 屬性和值，但在我看來(lái)，它們對(duì)提高 Web 界面開發(fā)的速度和質(zhì)量特別幫助。

我今天與你討論的許多特性都是實(shí)驗(yàn)性的。所有現(xiàn)代瀏覽器都支持它們中的大多數(shù)。但是，如果你決定在開發(fā)項(xiàng)目中使用這些屬性中的任何一個(gè)，請(qǐng)自行了解查詢下瀏覽器對(duì)它是否支持，雖然目前大多數(shù)屬性，現(xiàn)代瀏覽器是支持的。

那么，你準(zhǔn)備好進(jìn)入令人驚嘆且?guī)缀鯚o(wú)邊界的 CSS 世界了嗎？讓我們開始吧！

1、grid + place-items

這種技術(shù)允許你僅用兩行代碼水平和垂直對(duì)齊項(xiàng)目。

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

place-items 是 justify-items 和 align-items 的簡(jiǎn)寫屬性。

此屬性可以一次應(yīng)用于一個(gè)或多個(gè)（子）單元格。

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

2、flex + margin

另一種水平和垂直對(duì)齊項(xiàng)目的現(xiàn)代方法是使用 display: flex 和 margin: auto 的組合。

.parent {  display: flex;}
.child {  margin: auto;}

其實(shí)，使用以下代碼段可以完成相同的效果：

.parent {  display: flex;  justify-content: center;  align-items: center;}

3、flex + gap

既然我們?cè)谡務(wù)?Flexbox，值得一提的是，我們終于能夠使用 gap 屬性設(shè)置 flex 項(xiàng)之間的間隙（我們真的需要這個(gè)）：

.parent {  display: flex;  flex-wrap: wrap;  gap: 1em;}

4、inline-flex

此屬性允許你創(chuàng)建具有 Flexbox 功能的內(nèi)聯(lián)元素。一個(gè)例子勝過(guò)我說(shuō)很多話：

<span>??</span><span>??</span><span>??</span><span>??</span>

body {  margin: 0;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  gap: 0.5em;  background: #fbfbfb;}span {  width: 2.5em;  height: 2.5em;  /* --- */  display: inline-flex;  justify-content: center;  align-items: center;  /* --- */  background: #1266f1;  border-radius: 30%;  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);  font-size: 1.1rem;}

5、columns

此技術(shù)允許你將文本拆分為列。column-count 屬性指定列數(shù)，column-gap 設(shè)置列間間隙的大小，column-rule 設(shè)置列間垂直線的樣式。

columns 是 column-count 和 column-width 的簡(jiǎn)寫屬性。

<p>  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusamus repudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore consequatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor provident corporis magni voluptate vel non earum?</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");body {  margin: 0;  background: #262626;  font-family: "Montserrat", sans-serif;  color: #fbfbfb;}p {  margin: 1em;  /* --- */  column-count: 3;  column-gap: 2em;  column-rule: 1px dotted;  /* --- */}
@media (max-width: 768px) {  p {    column-count: 2;  }}
@media (max-width: 512px) {  p {    column-count: 1;  }}

6、background-repeat

background-repeat 屬性設(shè)置背景填充指定圖像的順序。round 值在容器的整個(gè)寬度上均勻分布圖像，而 space 值在圖像之間添加少量填充：

<div class="repeat"></div><div class="round"></div><div class="space"></div>

body {  margin: 0;  height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  background: #fbfbfb;}div {  width: 300px;  height: 64px;  background-image: url("https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png");}.repeat {  background-repeat: repeat;}.round {  background-repeat: round;}.space {  background-repeat: space;}

7、background-blend-mode

background-blend-mode 屬性設(shè)置背景圖像和顏色（或多個(gè)背景圖像/顏色）應(yīng)該相互混合的順序。

它的一些值：

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light

你用過(guò) Photoshop 嗎？那我想你明白這是怎么回事了。

假設(shè)我們有一個(gè)想要用作背景的黑白圖像。但同時(shí)，我們希望它是彩色的。我們?cè)鯓硬拍茏龅竭@一點(diǎn)？

<h1>  look at <br />  the sky</h1>

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");@keyframes show {  from {    opacity: 0;    transform: scale(0) rotate(-180deg);  }  to {    opacity: 1;    transform: scale(1) rotate(0);  }}body {  margin: 0;  height: 100vh;  /* --- */  background: url("https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"),    linear-gradient(135deg, skyblue, steelblue 90%);  background-blend-mode: overlay;  /* --- */  background-size: cover;  display: grid;  place-items: center;}h1 {  font-family: "Audiowide", cursive;  color: #00b74a;  font-size: 4rem;  text-transform: uppercase;  text-align: center;  text-shadow: 0 1px 2px #262626;  animation: show 2s linear forwards;}

8、background-clip

background-clip 屬性定義了背景顏色或背景圖像應(yīng)該超出元素的內(nèi)邊距的程度。在我看來(lái)， text 是這個(gè)屬性最有趣的值：

<p>nature</p>

9、filter

filter 屬性允許你對(duì)元素應(yīng)用一些視覺效果。

它的函數(shù)值：

url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

為懶惰的人更改網(wǎng)站顏色主題（或方案）：

<input type="checkbox" class="theme" /><p class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");body {  margin: 0;  height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}.theme {  cursor: pointer;}.theme:checked + .text {  filter: invert();}.text {  margin: 1em;  padding: 1em;  background: #262626;  border-radius: 4px;  font-family: "Montserrat", sans-serif;  color: #fbfbfb;  transition: 0.2s ease-in;}

在 CSSgram 上，你會(huì)找到一個(gè)為 Instagram 過(guò)濾器使用過(guò)濾器的示例。

10、drop-shadow

設(shè)置為 drop-shadow() 的 filter 屬性與 box-shadow 屬性不同，它在應(yīng)用效果方面類似，允許你向圖像本身（以 PNG 格式）添加陰影，而不是添加到其中的框。

<input type="checkbox" class="theme" /><p class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");body {  margin: 0;  height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}.theme {  cursor: pointer;}.theme:checked + .text {  filter: invert();}.text {  margin: 1em;  padding: 1em;  background: #262626;  border-radius: 4px;  font-family: "Montserrat", sans-serif;  color: #fbfbfb;  transition: 0.2s ease-in;}

11、object-fit

object-fit 屬性控制被替換元素的縱橫比，例如 img 和 video，如果它們有寬度或高度，以及縮放過(guò)程。

例如，縮小值允許你保持圖像的縱橫比，而不管框大?。?/span>

<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-64.png" alt="js" /><img src="https://pics.freeicons.io/uploads/icons/png/20167174151551942641-64.png" alt="react" /><img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-64.png" alt="vue" />

body {  margin: 0;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  gap: 1em;  background-color: #fbfbfb;}img {  width: 100px;  height: 100px;  /*  ---  */  object-fit: scale-down;  /*  ---  */  border: 1px dashed #262626;  border-radius: 4px;}

object-position 屬性用于對(duì)齊框內(nèi)任何選定的替換元素的內(nèi)容。

12、cursor

你知道嗎，除了瀏覽器提供的光標(biāo)圖標(biāo)（比如cursor:pointer），我們還可以定義自己的圖片和SVG？

<div class="image">image</div><div class="svg">svg</div>

body {  margin: 0;  height: 100vh;  background-color: #fbfbfb;  display: flex;  justify-content: center;  align-items: center;  gap: 4em;}div {  width: 100px;  height: 100px;  display: grid;  place-items: center;  background-image: linear-gradient(yellow, orange);  font-family: system-ui;  font-weight: bold;  text-transform: uppercase;  letter-spacing: 2px;  border-radius: 4px;  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}.image {  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),    auto;}.svg {  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>??</text></svg>"),    auto;}

13、scroll-behavior

scroll-behavior 屬性設(shè)置為 smooth 可以輕松實(shí)現(xiàn)頁(yè)面部分之間的平滑滾動(dòng)：

<nav>  <h3>Scroll to</h3>  <a href="#a">A</a>  <a href="#b">B</a>  <a href="#c">C</a></nav><section id="a">  <h3>A</h3></section><section id="b">  <h3>B</h3></section><section id="c">  <h3>C</h3></section>

html {  scroll-behavior: smooth;}body {  margin: 0;  font-family: system-ui;  color: #fbfbfb;}nav {  position: fixed;  top: 0;  left: 50%;  transform: translateX(-50%);  text-align: center;}h3 {  margin: 0;  letter-spacing: 1px;}a {  text-decoration: none;  color: inherit;  border-bottom: 1px dashed;}a + a {  margin-left: 1em;}section {  width: 100%;  height: 100vh;  display: inline-flex;  justify-content: center;  align-items: center;}#a {  background-color: #1266f1;}#b {  background-color: #00b74a;}#c {  background-color: #f93154;}

14、text-overflow

設(shè)置為省略號(hào)的 text-overflow 屬性允許你在文本超出容器時(shí)將... 添加到文本的末尾。

p {  text-overflow: ellipsis;}

15、caret-color

caret-color 屬性設(shè)置插入符號(hào)的顏色，可見標(biāo)記 (|) 指示下一個(gè)鍵入的字符將被插入的位置。

textarea {  caret-color: #00b74a;}

16、@supports

@supports 規(guī)則允許你在使用之前檢查瀏覽器是否支持特定的一個(gè)或多個(gè)屬性（或?qū)傩?值組合）。

/* check support for `grid` and `image-rendering` properties */@supports (display: grid) {  section {    display: grid;  }}
@supports (image-rendering) {  img {    image-rendering: pixelated;  }}

17、var（）

var() 函數(shù)允許你使用自定義變量的值作為屬性值。此函數(shù)的第二個(gè)可選參數(shù)是保留值。

/* define a custom variable?-?the main background color */:root {  --primary-bg-color: #1266f1;}
/* and use it */button {  background-color: var(--primary-bg-color)}

18、calc（）

calc() 函數(shù)用于指定使用大小、角度、時(shí)間或數(shù)字作為值的屬性的計(jì)算值。這允許根據(jù)不同單位的加減來(lái)設(shè)置值。

通常，絕對(duì)定位的元素水平和垂直對(duì)齊如下：

.modal {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

如果我們知道這樣一個(gè)元素的尺寸，我們可以執(zhí)行以下操作：

/* let's say an element has a height of 100px and a width of 200px */.modal {  position: absolute;  top: calc(50% - 50px);  left: calc(50% - 100px);}

19、attr（）

使用 attr() 函數(shù)，你可以檢索所選元素的屬性值并在樣式中使用它。

使用 CSS 創(chuàng)建工具提示：

<p>Some <span data-tooltip="tooltip">text</span> here</p>

p {  margin: 2em;  font-size: 1.25rem;}span {  color: #1266f1;  border-bottom: 1px dashed;  position: relative;  cursor: pointer;}span::after {  /*  ---  */  content: attr(data-tooltip);  /*  ---  */  position: absolute;  top: -1.25em;  left: 50%;  transform: translateX(-50%);  color: #00b74a;  font-style: italic;  opacity: 0;  transition: 0.2s;}span:hover::after {  opacity: 1;}

20、:target

:target 偽類允許你創(chuàng)建無(wú)需 JavaScript 即可工作的模態(tài)：

<a href="#modal" class="link">Show modal</a>
<div class="modal" id="modal">  <div class="overlay">    <div class="content">      <h3>Title</h3>      <p>Description</p>      <a href="#" class="close">?</a>    </div>  </div></div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Montserrat", sans-serif;}a {  text-decoration: none;}.link {  display: block;  text-align: center;  margin-top: 1em;}/* --- */.modal {  opacity: 0;  visibility: hidden;  transition: 0.3s ease-in;}.modal:target {  opacity: 1;  visibility: visible;}/* --- */.overlay {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  background-color: rgba(0, 0, 0, 0.25);  display: grid;  place-items: center;}.content {  width: 320px;  padding: 1em 0;  background-color: #fbfbfb;  border-radius: 2px;  text-align: center;  color: #262626;  position: relative;}.content > *:not(.close) {  margin: 1em 0;}.close {  position: absolute;  top: 5px;  right: 10px;  color: #f93154;}

21、::marker

我們?cè)?jīng)使用 list-style: none 刪除列表標(biāo)記，并使用 ::before 或 ::after 偽元素添加我們自己的標(biāo)記?，F(xiàn)在有一種更簡(jiǎn)單的方法可以做到這一點(diǎn)——我們可以使用 ::marker 偽元素。

<ul>  <li>Prima</li>  <li>Altera</li>  <li>Triera</li></ul>

li::marker {  content: "? ";  color: green;}li:last-child::marker {  content: "? ";  color: red;}

22、::selection

::selection 偽元素允許你設(shè)置文本選擇的樣式。

p::selection {  background-color: #262626;  color: #fbfbfb;}

最后，感謝你的閱讀，感謝你的時(shí)間，祝你有美好的一天！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

22 個(gè)鮮為人知的 CSS 技巧

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)