資訊專欄INFORMATION COLUMN
摘要：我們先來了解一下需求，微信大家都有吧，拉個(gè)群注意觀察群頭像。實(shí)現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點(diǎn)不穩(wěn)定老連不上。設(shè)置一下就好了實(shí)現(xiàn)微信頭像布局效果地址，我還是個(gè)孩子，寫起來真的煩啊，我就寫前幾個(gè)好不好。
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。
場景實(shí)戰(zhàn)這塊內(nèi)容每個(gè)人的內(nèi)容都不一樣。所以最近的更新基本都是我遇到并解決掉的問題。后期會(huì)吧他們的內(nèi)容貼地址。
我們要講什么？這節(jié)還是聊天消息中遇到的問題，群組消息之頭像，哈哈是不是感覺好熟悉，對(duì)的是我之前拋出的一個(gè)問題。
我們先來了解一下需求，微信大家都有吧，拉個(gè)群注意觀察群頭像。會(huì)成為如下效果。今天我們就是要實(shí)現(xiàn)一下它。
效果地址，本來是在JSRun的，但是大哥最近有點(diǎn)不穩(wěn)定老連不上。如果你說什么Flex我不會(huì)啊，之前寫的Flex的教程一發(fā)入魂。
看第一個(gè)效果（avatar3）一個(gè)在上，兩個(gè)在下，想想有什么屬性適合？flex-wrap 用來規(guī)定內(nèi)容放不下，如何換行
nowrap(不換行)（默認(rèn)值）
wrap(換行，第一行在上方)（兩個(gè)在上，一個(gè)在下）
wrap-reverse(換行，第一行在下方)（兩個(gè)在下，一個(gè)在上）
是不是發(fā)現(xiàn)，效果對(duì)了，但是排序的頭像錯(cuò)了？微信頭像是加群時(shí)間升序的。不用擔(dān)心，渲染的時(shí)候取反就ok，負(fù)負(fù)得正嘛。。
頭像等分，我是參照100px。一個(gè)90px,兩個(gè)45px，三個(gè)30px。然后使用百分比實(shí)現(xiàn)。為什么要用百分比呢？因?yàn)槟阋膊荒鼙ＷC所有地方都是100px吧。
然后你是不是發(fā)現(xiàn)多行的時(shí)候，間距有問題？align-content 定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。設(shè)置一下就好了
background-image 實(shí)現(xiàn)微信頭像布局效果地址，我還是個(gè)孩子，寫起來真的煩啊，我就寫前幾個(gè)好不好。
這個(gè)效果的實(shí)現(xiàn)依賴于多重背景實(shí)現(xiàn)，background --MDN
效果地址，寫起來感覺比上一個(gè)方案要簡單一點(diǎn)，但是，還是不好寫。我只寫了前幾個(gè)。
文檔流+after/before填充效果地址，基本上屬于看到哪里不對(duì)改哪里，操作上來說，比上兩個(gè)方案要簡單一些。
需要換行的地方插入br標(biāo)簽，然后水平居中。垂直居中使用padding。
方案同上垂直居中換成table-cell。等其他方法。
grid
方案優(yōu)缺點(diǎn)| 方案 | 理解程度 | 位置控制 | 描述 |
|---|---|---|---|
| flex | 易 | 弱 | 很好理解，思路清晰，但是無法對(duì)于設(shè)計(jì)稿精細(xì)微調(diào) |
| 背景圖 | 難 | 強(qiáng) | 高可控性，但是代碼復(fù)雜，不易理解修改 |
| 絕對(duì)定位 | 難 | 強(qiáng) | 高可控性，但是代碼復(fù)雜，不易理解修改，比背景圖還是要好理解一點(diǎn) |
| 文檔流 | 中 | 中 | 可控性較好，但是代碼無關(guān)聯(lián)，易于修改。不推薦。 |
| grid | 中 | 強(qiáng) |
你有什么方案可以在評(píng)論區(qū)留言討論
今日分享-TypeScript快速入門
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114623.html
摘要：我們先來了解一下需求，微信大家都有吧，拉個(gè)群注意觀察群頭像。實(shí)現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點(diǎn)不穩(wěn)定老連不上。設(shè)置一下就好了實(shí)現(xiàn)微信頭像布局效果地址，我還是個(gè)孩子，寫起來真的煩啊，我就寫前幾個(gè)好不好。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/...
摘要：我們先來了解一下需求，微信大家都有吧，拉個(gè)群注意觀察群頭像。實(shí)現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點(diǎn)不穩(wěn)定老連不上。設(shè)置一下就好了實(shí)現(xiàn)微信頭像布局效果地址，我還是個(gè)孩子，寫起來真的煩啊，我就寫前幾個(gè)好不好。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/...
閱讀 1571·2021-09-24 10:38
閱讀 1498·2021-09-22 15:15
閱讀 3058·2021-09-09 09:33
閱讀 904·2019-08-30 11:08
閱讀 638·2019-08-30 10:52
閱讀 1252·2019-08-30 10:52
閱讀 2343·2019-08-28 18:01
閱讀 519·2019-08-28 17:55
