點(diǎn)擊上方 "程序員小樂(lè)"關(guān)注, 星標(biāo)或置頂一起成長(zhǎng)

每天凌晨00點(diǎn)00分, 第一時(shí)間與你相約

每日英文

Sometimes being too nice is dangerous, you have to show your mean side once in a while to avoid getting hurt.

有時(shí)候，太善良也是種危險(xiǎn)。偶爾你也得厲害一點(diǎn)，才能免受傷害。

每日掏心話

做人不要太玻璃心，不要?jiǎng)e人一條信息沒(méi)回，就覺(jué)得自己做錯(cuò)了什么，不要被人一句呵呵，就覺(jué)得對(duì)方是討厭自己。玻璃心，想太多，什么事都對(duì)號(hào)入座，何必那么累。

來(lái)自：Badd | 責(zé)編：樂(lè)樂(lè)

鏈接：juejin.im/post/5cebb52651882530be7b16a4

程序員小樂(lè)(ID:study_tech)第 789 次推文 圖片來(lái)自百度

往日回顧：30 張圖帶你徹底理解紅黑樹(shù)

正文

對(duì)很多人來(lái)說(shuō)，創(chuàng)建布局是前端開(kāi)發(fā)領(lǐng)域中最難啃的骨頭之一。

你肯定經(jīng)歷過(guò)耗費(fèi)數(shù)個(gè)小時(shí)，換著花樣地嘗試所有可能起作用的 CSS 屬性、一遍遍地從 Stack Overflow 上復(fù)制粘貼代碼，寄希望于誤打誤撞地賭中那個(gè)能實(shí)現(xiàn)預(yù)期效果的魔幻組合。

如果你的慣用策略就是按部就班地組合布局 —— 先把 A 元素放在這兒，好了，A 元素就位了，我再看怎么把 B 放在那兒 …… 那你沒(méi)有挫敗感才怪呢。CSS 的玩法可與 SKetch 或者 Photoshop 的玩法不一樣。

在本文中，我將向你展示如何以統(tǒng)籌全局的思維實(shí)現(xiàn) CSS 布局，根治布局難產(chǎn)的頑疾。

我們將用一個(gè)小案例貫穿全文，我會(huì)把所有的 CSS 代碼都解釋給你聽(tīng)，因此即使你不知道或者忘記了 position 和 display 的用法，即使你分不清 align-items 和 justify-content 的區(qū)別，你仍會(huì)有所斬獲。

聽(tīng)起來(lái)很棒吧？那就開(kāi)始吧。

布局小例子

在本文中，我們要比照 Twitter 的推文組件自己仿寫(xiě)一個(gè)：

不論是一個(gè)像這樣的草圖，還是一個(gè)細(xì)節(jié)精美的原型圖，有章可循 總是個(gè)好主意。

要避免一邊在腦海里設(shè)計(jì)，一邊在瀏覽器中七拼八湊地?cái)€布局，這樣的開(kāi)發(fā)過(guò)程才會(huì)更順暢。你當(dāng)然可以達(dá)到那種手腦合一的境界！但鑒于你還在乖乖地讀這篇文章，我可以假設(shè)你還沒(méi)有那么神通廣大。:)

第一步：分而治之

在動(dòng)手敲代碼之前，我們先把布局的各個(gè)單元區(qū)分開(kāi)來(lái)：

在用 CSS 鋪排布局時(shí)，用行和列的形式去構(gòu)思大有裨益。因此，要么你把元素從上到下排列，要么從左到右排列。這種行和列的思路完美對(duì)應(yīng)了 CSS 中兩種布局技術(shù)：Flexbox 和 Grid。

當(dāng)然了，我們的示例布局并不是中規(guī)中矩的行列。它有一張圖片鑲嵌在左側(cè)，其他元素排列在右側(cè)。

第二步：沿著各個(gè)單元畫(huà)方框

畫(huà)一些方框把這些元素框起來(lái)，看看行和列是否初具規(guī)模。我們把方向一致的單元?dú)w到同一個(gè)方框中。

按目前的規(guī)劃，把布局用 HTML 代碼實(shí)現(xiàn)出來(lái)大概如下所示：

展示出的效果是這樣的（可以點(diǎn)擊這里調(diào)試代碼）：

這離我們想要的效果還遠(yuǎn)呢。但是！所有所需的內(nèi)容都齊全了。有些元素還以從左到右的順序排列。

我們可以認(rèn)為，即使不用進(jìn)一步設(shè)置樣式，目前的布局效果也能達(dá)到網(wǎng)頁(yè)想表達(dá)的要點(diǎn)，這也是一個(gè)優(yōu)秀的 HTML 應(yīng)該達(dá)到檢查標(biāo)準(zhǔn)。

關(guān)于語(yǔ)義化 HTML 的說(shuō)明

你可能會(huì)好奇，為何我選的是那些元素 —— article、p 等等。為何不都用 div 呢？

為何要這樣寫(xiě)：

...

...

而不這樣寫(xiě)？

... ...

其實(shí)，每個(gè) HTML 元素的名稱都有其特定含義，在不同場(chǎng)景中恰如其分地使用語(yǔ)義上與它們所表示的內(nèi)容匹配的元素，是很好的語(yǔ)義化實(shí)踐。

這種寫(xiě)法，首先，有助于開(kāi)發(fā)者理解代碼；其次，對(duì)使用屏幕閱讀器等輔助設(shè)備的用戶比較友好。同時(shí)這樣用標(biāo)簽也有利于 SEO —— 搜索引擎會(huì)試著理解這個(gè)頁(yè)面的含義，以便于顯示相關(guān)廣告來(lái)盈利、幫助搜索者找到滿意結(jié)果。

article 標(biāo)簽代表文章類內(nèi)容，而你可以認(rèn)為推文這種東西有點(diǎn)類似于一篇文章。

p 標(biāo)簽代表段落，而推文的內(nèi)容文本有點(diǎn)類似于一個(gè)段落。

ul 標(biāo)簽代表無(wú)序列表（與有序列表或數(shù)字序號(hào)列表相對(duì)應(yīng)），在本示例中，你可以用它來(lái)存放列表信息。

我們無(wú)法用只言片語(yǔ)就說(shuō)清楚 HTML 元素的語(yǔ)義，以及何種情況用何種標(biāo)簽。但大多數(shù)情況下，一個(gè)語(yǔ)義化元素即使其語(yǔ)義再不貼切，也比用 div 強(qiáng)，div 標(biāo)簽只代表 一塊區(qū)域。

元素的默認(rèn)樣式

是什么決定了元素的樣式？為什么有的元素獨(dú)占一行，而有的元素能共處一行？

這要?dú)w因于元素的默認(rèn)樣式，這其中就有我們要探討的第一個(gè) CSS 知識(shí)點(diǎn)：行內(nèi)元素和塊級(jí)元素。

行內(nèi)元素們肩并肩擠在一行里（就像句子中的詞一樣，必要時(shí)會(huì)折行）。根據(jù)再瀏覽器中的默認(rèn)樣式劃分，span、button 以及 img 都是行內(nèi)元素。

而塊級(jí)元素，總是踽踽獨(dú)行。以控制臺(tái)輸出的方式去理解，你可以認(rèn)為塊級(jí)元素前后各有一個(gè)換行符 \n。就好像console.log(\ndiv\n)。article、div、li、ul 以及 p 標(biāo)簽都是塊級(jí)元素。

注意，在上面的例子中，為什么即使 img 標(biāo)簽是行內(nèi)元素，頭像圖片依然獨(dú)占一行？因?yàn)樗路降?div 是塊級(jí)元素。

然后要注意，為什么 @handle、用戶名和時(shí)間都在同一行？原因是它們都在 span 標(biāo)簽中，而 span 是行內(nèi)元素。

這三個(gè) span 和 文字 insightful message 處于不同行，因?yàn)椋╝）它們被包在一個(gè) div 中，div 后面自然要另起一行；（b）p 標(biāo)簽同樣是塊級(jí)元素，它自然從新行開(kāi)始排列。（之所有沒(méi)有出現(xiàn)兩個(gè)空行，是因?yàn)?HTML 合并了相鄰的空行，與相鄰空格同理。）

如果你再看得仔細(xì)點(diǎn)，你會(huì)發(fā)現(xiàn) insightful message 的上下方空間，要比頭像圖片以及 handle、用戶名、時(shí)間的上下方空間要大。此空間的大小也由默認(rèn)樣式控制：p 標(biāo)簽的頂部和底部都有 margin。

你也會(huì)注意到按鈕列表的圓點(diǎn)，以及列表的縮進(jìn)行為。這些也都是默認(rèn)樣式。我們馬上就要修改這些默認(rèn)樣式了。

第三步：再畫(huà)一些方框

我們想把頭像圖片放在左側(cè)，其余元素放在右側(cè)。你可能會(huì)根據(jù)剛剛探討的行內(nèi)和塊級(jí)知識(shí)來(lái)推斷，認(rèn)為只要把右側(cè)的元素都包裹到一個(gè)如 span 標(biāo)簽般的行內(nèi)元素中，就完事大吉了。

但這是行不通的。行內(nèi)元素并不能阻止其內(nèi)部的塊級(jí)元素另起一行。

為了把這些元素收拾得服服帖帖，我們需要用一些更強(qiáng)大的技術(shù)，比如 Flexbox 或者 Grid 布局。這次我們選用 Flexbox 來(lái)解決。

Flexbox 的原理

CSS 的 Flex 布局能夠把元素以行或者列的形式排布。這是一種單向的布局系統(tǒng)。為了實(shí)現(xiàn)交叉的行和列（正如推文組件的設(shè)計(jì)那樣），我們需要添加一些容器元素來(lái)扭轉(zhuǎn)方向。

你可以在容器上設(shè)置 display: flex; 來(lái)啟用 Flex 布局。容器本身是塊級(jí)元素（得以獨(dú)占一行），其內(nèi)部元素會(huì)成為 Flex 子項(xiàng) —— 即它們不再是行內(nèi)或塊級(jí)元素了；它們都受 Flex 容器控制。

在本例中，我們會(huì)設(shè)置一些嵌套的 Flex 容器，讓該成行的成行，該成列的成列。

我們把外層容器（綠色方框）設(shè)置為列，藍(lán)色方框設(shè)置為行，而紅色方框中的元素排布在列中。

為何選 Flexbox 布局，不選 Grid 布局？

由于一些原因，我決定用 Flexbox 布局而不用 Grid 布局。我覺(jué)得 Flexbox 布局更易于學(xué)習(xí)，也更適用于輕量級(jí)的布局。當(dāng)布局中主要是行或者主要是列時(shí)，F(xiàn)lexbox 布局的表現(xiàn)更出色。

另一個(gè)重點(diǎn)就是，即使 Grid 布局比 Flexbox 布局年輕，前者也撼動(dòng)不了后者的地位。它們各自適用于不同的場(chǎng)景，對(duì)于二者，我們都要學(xué)習(xí)，技不壓身。有些情況你甚至?xí)瑫r(shí)使用二者 —— 例如 Grid 布局排布整體頁(yè)面，而 Flexbox 布局調(diào)控頁(yè)面中的一個(gè)表單。

沒(méi)錯(cuò)沒(méi)錯(cuò)，在 Web 開(kāi)發(fā)的世界，普遍的更替法則是后浪推前浪，但 CSS 并不如此。Flexbox 和 Grid 能夠和諧共存。

用 CSS 解決問(wèn)題，條條大路通羅馬！

第四步：應(yīng)用 Flexbox

好了，既然我們已經(jīng)打定主意，那就開(kāi)動(dòng)吧。我把左側(cè)元素包進(jìn)一個(gè) div，并給元素們?cè)O(shè)置類名，便于應(yīng)用 CSS 選擇器。

看著好像沒(méi)有變化。

這是因?yàn)?div 作為塊級(jí)元素（如果沒(méi)有空行就引入一個(gè)）是看不見(jiàn)的。當(dāng)你需要一個(gè)包裹其他元素的容器，除了 div 之外沒(méi)有更貼合語(yǔ)義的選擇了。

下面咱們的第一段 CSS 代碼，我們會(huì)把它放在 HTML 文檔中 head 標(biāo)簽的 style 里：

.tweet {display: flex;}

干得漂亮！我們用類選擇器鎖定了所有類名為 tweet 的元素。當(dāng)然目前只有一個(gè)這樣的元素，但如果有十個(gè)，那它們將都會(huì)是 Flex 容器了。

CSS 中以 . 開(kāi)頭的選擇器代表類選擇器。為什么是 .？我可不知道。你只要記住這條規(guī)則就行了。

現(xiàn)在文字內(nèi)容都到頭像右側(cè)去了。問(wèn)題是頭像圖片都扭曲變形了。

因?yàn)?Flex 容器會(huì)默認(rèn)：

把子項(xiàng)排成一行；

讓子項(xiàng)與其內(nèi)容等寬，并 ——

把所有子項(xiàng)的高度拉平為最高子項(xiàng)的高度。

我們可以用 align-items 屬性來(lái)控制垂直方向的對(duì)齊方式。

.tweet {display: flex;align-items: flex-start;}

align-items 的默認(rèn)值是 stretch，而將其設(shè)為 flex-start 后，會(huì)讓子項(xiàng)沿著容器頂部對(duì)齊，并且讓子項(xiàng)保持各自的高度。

方向的辯證：行還是列？

另外，F(xiàn)lex 容器的默認(rèn)排列方向是 flex-direction: row;。是的，這個(gè)方向是 行，即使我們可能感覺(jué)那更像是兩列。要把它想成是子項(xiàng)們排成一行，這樣理解就舒服多了。

有點(diǎn)像這張花瓶的圖片，或者說(shuō)兩張臉的圖片。橫看成嶺側(cè)成峰。

給文字內(nèi)容更多的空間

Flex 布局的子項(xiàng)僅取其所需寬度，但我們需要 content 區(qū)域盡量寬敞一些。

因此，我們要給 content 這個(gè) div 設(shè)置 flex: 1; 屬性。（該 div 有類名，那我們就又可以用類選擇器啦?。?/p>

.content {flex: 1;}

我們也要給頭像設(shè)置 margin，好在頭像和文字之間加點(diǎn)空隙：

.avatar {margin-right: 10px;}

看起來(lái)順眼一些了吧！

margin 和 padding

那…… 為什么用 margin 而不用 padding？為什么要設(shè)置在頭像右側(cè)，而不是文字內(nèi)容左側(cè)呢？

這是一條約定俗成的規(guī)則：在元素右側(cè)和下方設(shè)置 margin，不去碰左側(cè)和上方的 margin。

至少是在英文界面的布局中，文檔流的方向是從左到右、從上到下的，因此，每個(gè)元素都 依賴 其左側(cè)和上方的元素。

在 CSS 中，每個(gè)元素的定位都受到其左側(cè)和上方的元素的影響。（至少在你遇見(jiàn) position: absolute 那幫家伙之前是這樣的。）

SoC 原則（Separation of Concerns）

從技術(shù)實(shí)現(xiàn)的角度來(lái)說(shuō)，怎樣設(shè)置 avatar 和 content 之間的空隙都一樣。該是多寬就是多寬，沒(méi)有 border 的干擾（padding 在 border 的內(nèi)側(cè)；而 margin 在外側(cè)）。

但當(dāng)事關(guān)可維護(hù)性、對(duì)元素的全局觀時(shí)，這就有區(qū)別了。

我曾嘗試把元素理解為一個(gè)個(gè)獨(dú)立個(gè)體，就像每個(gè) JavaScript 函數(shù)只實(shí)現(xiàn)單一功能一樣：如果它們都僅僅扮演單一的角色，那么寫(xiě)起代碼來(lái)就很容易，報(bào)錯(cuò)時(shí)調(diào)試也很容易。

如果我們把 margin 設(shè)置到 content 的左側(cè)，后來(lái)有一天我們?nèi)サ袅?avatar，可是以前的縫隙還留在那。我們還得排查導(dǎo)致額外空間的原因（是來(lái)自 tweet 容器嗎？還是來(lái)自 content 呢？）并把它處理掉?；蛘?，如果 content 設(shè)置了左側(cè)的 margin，而我們想要把 content 替換成別的元素，我們還要記著再把之前那個(gè)空隙補(bǔ)上。

好了好了，為了 10 像素的事，沒(méi)必要費(fèi)這么多口舌，干脆就把 margin 設(shè)在頭像的右側(cè)和下方。讓我們繼續(xù)埋頭敲代碼吧。

移除列表的樣式

無(wú)序列表 ul 和其中的列表項(xiàng) li 在左側(cè)窩藏了很大空間，還有一些圓點(diǎn)。這都不是我們想要的效果。我們可以把無(wú)序列表左側(cè)的空隙都清除掉。我們還要把它變成一個(gè) Flex 容器，這樣里面的按鈕就能排成一行了（用 flex-direction: row）。

列表項(xiàng)有個(gè)屬性是 list-style-type，默認(rèn)值為 disc，使得每個(gè)列表項(xiàng)以圓點(diǎn)開(kāi)頭，我們用 list-style: none; （list-style 是一個(gè)縮寫(xiě)屬性，整合了幾個(gè)其他屬性，其中就包括 list-style-type）將該效果關(guān)閉。

.actions {display: flex;padding: 0;}.actions li {list-style: none;}

.actions 又是一個(gè)類選擇器。原汁原味。

而 .actions li 選擇器，意即 actions 類元素中所有的 li 元素。它是類選擇器和元素選擇器的結(jié)合。

復(fù)合選擇器中用以分隔的空格代表著選擇范圍的縮小。事實(shí)上，CSS 是以倒序讀取選擇器的。其過(guò)程是 先找到頁(yè)面中所有的 li，然后在這些 li 中找到類名是 actions 的那些。但無(wú)論你用正序還是倒序的方式去理解，結(jié)果都是一樣的。（在 StackOverflow 查看更多詳解）

橫排按鈕

要橫排按鈕有好幾種方式。

一種就是設(shè)置 Flex 子項(xiàng)的對(duì)齊方式。你應(yīng)該對(duì)設(shè)置對(duì)齊方式很熟悉，每個(gè)富文本編輯器頂部都有這種功能的按鈕：

它們把文本進(jìn)行左對(duì)齊、居中對(duì)齊、右對(duì)齊以及 兩端對(duì)齊，也就是鋪滿整行。

在 Flexbox 布局中，你可以用 justify-content 屬性來(lái)實(shí)現(xiàn)對(duì)齊。設(shè)置了 flex-direction: row（默認(rèn)值，也是本文中一直在用的設(shè)置）后，可以通過(guò) justify-content 把子項(xiàng)進(jìn)行或左或右地對(duì)齊。justify-content 的默認(rèn)值為 flex-start（因此所有元素都向左看齊）。如果我們給 .actions 元素設(shè)置 justify-content: space-between，它們就會(huì)均勻地鋪滿整行，就像這樣：

可我們想要的不是這樣的效果。如果這幾個(gè)按鈕可以不占滿整行會(huì)更好。所以得換一種方式。

這次，我們給每個(gè)列表項(xiàng)設(shè)置一個(gè)右側(cè)的 margin，把它們分隔開(kāi)來(lái)。還要給整個(gè)推文組件設(shè)置一個(gè)邊框，以便我們能夠直觀地衡量效果。用 1px solid ccc 設(shè)置一個(gè) 1 像素寬的灰色實(shí)線邊框。

.tweet {display: flex;align-items: flex-start;border: 1px solid ccc;}.actions li {list-style: none;margin-right: 30px;}

現(xiàn)在效果如下：

按鈕的排列看起來(lái)優(yōu)雅多了，但灰色邊框告訴我們，所有元素都過(guò)于靠左了。還是用 padding 分配點(diǎn)空間吧。

.tweet {display: flex;align-items: flex-start;border: 1px solid ccc;padding: 10px;}

現(xiàn)在推文組件有內(nèi)邊距了，但有些地方還是很空。如果我們用瀏覽器調(diào)試工具將元素高亮顯示，就會(huì)發(fā)現(xiàn) p 和 ul 元素有默認(rèn)的上下 margin（在 Chrome 的調(diào)試工具中，margin 以橙色顯示，而 padding 以綠色顯示）：

還有一處有意思的細(xì)節(jié)；行與行之間的上下 margin 是等距的 —— 并沒(méi)有疊加出雙倍間距！因?yàn)?CSS 在豎直方向上有 margin 坍塌現(xiàn)象。當(dāng)上下兩個(gè) margin 短兵相接時(shí)，數(shù)值大的 margin 會(huì) 吃掉 小的。詳情參見(jiàn) CSS 技巧：margin 坍塌。

對(duì)于本例的布局，我會(huì)手動(dòng)調(diào)整 .author-meta、p 和 ul 的右側(cè) margin。如果要真刀真槍地開(kāi)發(fā)網(wǎng)站，建議你考慮用 CSS reset 作為開(kāi)發(fā)基礎(chǔ)，有利于跨瀏覽器兼容。

p, ul {margin: 0;}.author-meta, p {margin-bottom: 1em;}

用 , 將選擇器隔開(kāi)，可以一次性把樣式應(yīng)用到多個(gè)選擇器上。因此 p , ul 的含義就是 所有的 p 元素，以及所有的 ul 元素。亦即二者的合集。

在這里我們使用了新的尺寸單位，1em 中的 em。一個(gè)單位的 em 等于 body 標(biāo)簽上的以像素為單位的字號(hào)大小。body 標(biāo)簽的默認(rèn)字號(hào)為 16px（16 像素高），所以本例中的 1em 相當(dāng)于 16px。em 隨字號(hào)改變而改變，因此可以用 1em 來(lái)表達(dá) 我想讓文字下方的 margin 和文字的高度一樣，不論文字高度是多少。現(xiàn)在的效果如下：

現(xiàn)在讓我們把圖片縮小一些，并將其設(shè)置為圓形。我們將其寬高設(shè)置為 48 像素，正和 Twitter 的頭像寬高一樣。

.avatar {margin-right: 10px;width: 48px;border-radius: 50%;}

我們用 border-radius 屬性來(lái)設(shè)置圓角，有好幾種方式來(lái)定義該屬性的值。如果你想要小圓角效果，可以用帶 px、em 或其他單位名稱的數(shù)字賦值。例如 border-radius: 5px 的效果：

如果將 border-radius 設(shè)為寬和高的一半（在本例中即為 24 像素），其效果就是一個(gè)圓形。但更方便的寫(xiě)法是 border-radius:50%，這樣我們就不必知道具體尺寸，CSS 會(huì)計(jì)算出確切結(jié)果。甚至，如果以后寬高值變了，也無(wú)需重新修改屬性值了！

再接再厲

眼下還有一些需要潤(rùn)色之處。

我們要把字體設(shè)為 Helvetica（Twitter 用的那一款）、把字號(hào)縮小一些、把用戶名加粗，還有，翻轉(zhuǎn) @handle 用戶名 的順序（在 HTML 代碼中），使之與 Twitter 一模一樣。:D

.tweet {display: flex;align-items: flex-start;border: 1px solid ccc;padding: 10px;/*更改字體和字號(hào)。在 .tweet 選擇器上設(shè)置的 CSS 效果，其所有子元素都會(huì)繼承。（除了按鈕。按鈕不太合群）*/font-family: Helvetica, Arial, sans-serif;font-size: 14px;}.name {font-weight: 600;}.handle,.time {color: 657786;}

font-weight: 600; 的效果等同于 font-weight: bold;。字體有很多不同程度的字重，范圍是從 100 到 900（最淡到最濃）。normal（默認(rèn)值）等價(jià)于 400。

另外，CSS 中的注釋寫(xiě)法與 JavaScript 或其他語(yǔ)言不用，不允許以 // 開(kāi)頭。某些瀏覽器支持 // 風(fēng)格的 CSS 注釋，但并非所有瀏覽器都如此。用 C 語(yǔ)言風(fēng)格的 / / 包圍注釋內(nèi)容即可高枕無(wú)憂。

還有一個(gè)小竅門(mén)：可以用 偽元素在 handle 與 時(shí)間 之間添加一個(gè)凸點(diǎn)。這個(gè)凸點(diǎn)符號(hào)單純?yōu)榱搜b飾，不具有具體語(yǔ)義，所以用 CSS 實(shí)現(xiàn)不會(huì)污染 HTML 語(yǔ)義結(jié)構(gòu)。

.handle::after {content: " \00b7";}

::after 創(chuàng)建了一個(gè)偽元素，它位于 .handle 元素內(nèi)部的最后方（落后 于元素的內(nèi)容）。你還可以用 ::before 創(chuàng)建偽元素?？梢越o content 屬性賦值任何文字內(nèi)容，包括 Unicode 字符。你可以恣意發(fā)揮，像給任何其他元素設(shè)置樣式一樣。偽元素用來(lái)實(shí)現(xiàn)標(biāo)記（badge）、消息提醒或其他小花樣最合適不過(guò)了。

圖標(biāo)按鈕

還有一項(xiàng)工作要做，那就是用圖標(biāo)替換按鈕。我們要在 head 標(biāo)簽里添加 Font Awesome 圖標(biāo)字體：

然后用下列代碼替換原來(lái)的 ul，新列表中的每個(gè)按鈕里有圖標(biāo)和隱藏文字：

ReplyRetweetLike...More Actions

Font Awesome 是一款圖標(biāo)字體，它配合斜體標(biāo)簽 i 可以展示圖標(biāo)。正因?yàn)樗亲煮w，那些可以用于文字的 CSS 屬性（例如 color 和 font-size）都適用于圖標(biāo)字體。

我們?cè)谶@兒做了些微調(diào)，來(lái)提升按鈕的可訪問(wèn)性：

特性 aria-hidden=true 使屏幕閱讀器忽略此圖標(biāo)。

sr-only 類是 Font Awesome 內(nèi)置的類。它讓元素在你眼前隱身，但屏幕閱讀器能讀取到它。

現(xiàn)在我們將要給按鈕添加一些樣式 —— 移除邊框、上色以及加大字號(hào)。還要設(shè)置 cursor: pointer，把鼠標(biāo)光標(biāo)變成 手 型，就像超鏈接的效果那樣。最后，用 .actions button:hover 選擇處于 hover 狀態(tài)的按鈕，把它們變成藍(lán)色。

.actions button {border: none;color: 657786;font-size: 16px;cursor: pointer;}.actions button:hover {color: 1da1f2;}

下面就是推文組件光芒四射的最終效果：

如何精進(jìn) CSS 水平

最能提高 CSS 水平的就是實(shí)踐。

仿寫(xiě)你喜歡的網(wǎng)站。設(shè)計(jì)者和藝術(shù)家稱其為 臨摹。我寫(xiě)過(guò)一篇用臨摹的方法學(xué) React，其中的原則也適用于 CSS。

選一些有意思的、你覺(jué)得難度大的樣式效果。用 HTML 和 CSS 臨摹該效果。如果卡殼了，用瀏覽器的調(diào)試工具看看原網(wǎng)站的效果是如何實(shí)現(xiàn)的。栽秧苗、腿跟上、抬頭看看直不直。 :)

歡迎在留言區(qū)留下你的觀點(diǎn)，一起討論提高。如果今天的文章讓你有新的啟發(fā)，學(xué)習(xí)能力的提升上有新的認(rèn)識(shí)，歡迎轉(zhuǎn)發(fā)分享給更多人。

猜你還想看

阿里、騰訊、百度、華為、京東最新面試題匯集

微服務(wù)的生離死別，看這篇就對(duì)了！

Java中的對(duì)象都是在堆上分配的嗎？

在Spring Boot項(xiàng)目中整合使用Activiti

關(guān)注訂閱號(hào)「程序員小樂(lè)」，收看更多精彩內(nèi)容嘿，你在看嗎？

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："從原型圖到成品：步步深入CSS布局"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

標(biāo)題名稱：從原型圖到成品：步步深入CSS布局
標(biāo)題來(lái)源：http://www.rwnh.cn/news49/322349.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站收錄、網(wǎng)站策劃、建站公司、網(wǎng)站排名、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)