漏補缺

關于上一篇vue引入element-ui后界面空白中，提到了vue3.0配合vue-cli@4.5以上需要使用element-plus替代element-ui來實現ui界面的問題。需要補充的就是message的調用。

message就是頂部提示，三秒消失的提示框。常用的就是success/warning/info/error。

當然如果是vue組件，自然可以直接對message直接起作用。但是如果是在js文件里，就需要導入message。參考官網引入。

import { ElMessage } from 'element-plus';

使用

ElMessage.success(options)

正文部分

今日無正文。

每天面試題

v-if和v-show的區別

展示的效果其實是相同的，只是在隱藏元素的時候效果會有區別。

相同：

• v-if與v-show都可以動態控制dom元素顯示隱藏，

不同：

• v-if是動態的向DOM樹內添加或者刪除DOM元素。
• v-show本質是利用標簽的display屬性，通過visibility和none控制顯隱。

• v-if="false"在DOM不能獲取到該標簽。
• v-show=false在DOM中仍能獲取到該標簽。

• v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀的重建內部的事件監聽和子組件。
• v-show其實是在控制css。

• v-if初始值為false，就不會編譯了。
• v-show都會編譯，初始值為false,只是將display設為none,但它也編譯了。

• v-if不停地銷毀和創建。
• v-show只編譯一次，后面其實就是控制css，故v-show性能更好一點。

• 總結：頻繁切換使用v-show，不頻繁則使用v-if。
• 提示：不推薦同時使用 v-if 和 v-for

display:none與visibility:hidden的區別

相同：

• 都是隱藏標簽，對應的標簽仍存在DOM結構中

不同：

• 標簽設置display: none后，不會占據該標簽原來所在的位置，會觸發重流（回流），HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”。
• 標簽設置visibility: hidden后，仍占據原來的位置，會觸發重繪，HTML元素（對象）僅僅是在視覺上看不見（完全透明），即是說它仍具有高度、寬度等屬性值。

• visibility具有繼承性。給父元素設置visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設置visibility: visible,則子元素又會顯示出來。這個和display: none有著質的區別

• visibility: hidden不會影響計數器的計數。visibility: hidden雖然讓一個元素不見了，但是其計數器仍在運行。這和display: none完全不一樣。

• CSS3的transition支持visibility屬性，但是并不支持display。由于transition可以延遲執行，因此可以配合visibility使用純css實現hover延時顯示效果。提高用戶體驗。

回流與重繪

• 重流必定導致重繪，重繪不一定重流。

• 部分渲染樹（或者整個渲染樹）需要重新分析并且節點尺寸需要重新計算會發生回流。
• 由于節點的幾何屬性發生改變或者由于樣式發生改變，例如改變元素背景色時，屏幕上的部分內容需要更新時只會發生重繪。

觸發回流和重繪的情況

• 添加、刪除、更新 DOM 節點------觸發回流和重繪
• 通過 display: none 隱藏一個 DOM 節點------觸發回流和重繪
• 通過 visibility: hidden 隱藏一個 DOM 節點------只觸發重繪，因為沒有幾何變化
• 移動或者給頁面中的 DOM 節點添加動畫------觸發回流和重繪
• 用戶行為，例如調整窗口大小，改變字號，或者滾動------觸發回流和重繪
• 添加一個樣式表，調整樣式屬性------觸發回流和重繪
• offsetWidth,width,clientWidth,scrollTop/scrollHeight的計算------觸發回流和重繪，使瀏覽器將漸進回流隊列Flush

減少回流與重繪

• 避免逐項更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。
• 避免循環操作DOM。創建一個documentFragment或div,在它上面應用所有DOM操作，最后再把它添加到window.document。
• 避免循環讀取offsetLeft等屬性。在循環之前把它們存起來。
• 絕對定位具有復雜動畫的元素。絕對定位使它脫離文檔流，否則會引起父元素及后續元素大量的回流。

今天的分享就到這里，vue的學習被prototype搞崩了，所以今日無正文。

就這樣了，ばいばい

isibility:hidden和display:none的區別在于：

1.作用不同：visibility:hidden將元素隱藏，但是在網頁中該占的位置還是占著。display:none將元素的顯示設為無，即在網頁中不占任何的位置。

2.使用后HTML元素有所不同：visibility:hidden，使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。display:none，使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”。

3.定義不同：visibility屬性指定一個元素是否是可見的。display這個屬性用于定義建立布局時元素生成的顯示框類型。

元素隱藏和顯示最常用的為 display:none 和 visibility:hidden

dispaly:none 設置該屬性后，該元素下的元素都會隱藏，占據的空間消失

visibility:hidden 設置該元素后，元素雖然不可見了，但是依然占據空間的位置

其他區別

1.visibility 具有繼承性，其子元素也會繼承此屬性，若設置 visibility:visible，則子元

素會顯示

2.visibility 不會影響計數器的計算，雖然隱藏掉了，但是計數器依然繼續運行著。

3.在 CSS3 的 transition 中支持 visibility 屬性，但是不支持 display，因為 transition 可以延遲執行，因此配合 visibility 使用純 CSS 實現 hover 延時顯示效果可以提高用戶體驗

4.display:none 會引起回流(重排)和重繪 visibility:hidden 會引起重繪。

#挑戰30天在頭條寫日記#

元素雖然強大，但是還是有一些特定的標簽是不支持偽元素 before 和 after 的。

諸如 <img\>、<input\>、<iframe\>，這幾個標簽是不支持類似 img::before 這樣使用。

究其原因，要想要標簽支持偽元素，需要這個元素是要可以插入內容的，也就是說這個元素要是一個容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內容。

純CSS實現title屬性hover效果

我們都知道，在 HTML 標簽中有這樣一個屬性 – title，該屬性規定關于元素的額外信息，就是我們可以往 title 里面填入一段文字，鼠標移到元素上時就會顯示這段文本。

像是這樣 <element title="value" >。效果如下：

;

但是這個 hover 框有兩個小問題：

• 響應太慢，通常鼠標 hover 上去要隔 1s 左右才會出現這個 title 框

• 框體結構無法自定義，彈出框的樣式無法自定義

嗯，通常要解決上面的方法，或者說我們需要一個鼠標 hover 上去的時候彈出一個提示層的效果都不會采用 title 屬性，而是配合使用 JS 模擬一個彈出層。

這里有一個純 CSS 的方案可以解決這個場景，運用了偽元素，先上 Demo：

鼠標 hover 一下文字，發現彈出層響應十分迅速（因為就是 CSS hover，沒有延遲）。并且這里的彈出層的樣式也可以完全自定義，沒有用到 JS 代碼，并且查看 HTML 代碼可以看到不需要多余的標簽。

怎么實現的呢？主要是運用了偽元素的 content屬性，content通常是用于在偽元素中插入內容的。而其中有一句語法content: attr(value)類似這樣，可以讀取對應 HTML 標簽的value屬性。也就是：

1. 假設一個 HTML 標簽定義為： <div data-msg="ABC">

2. 那么該 div 對應的偽類如果設置了 content:attr(data-msg)，就可以讀取到 data-msg 的值，相當于content:"ABC"

而且框體由于是偽類生成的，所以我們可以自定義它的樣式及位置，運用這個效果，我們應用在可以在許多無法正常把信息展示完的地方。

借用偽元素實現多列均勻布局

我們經常需要實現多列均勻布局，能夠自適應各種情況，如下：

在移動端我們可以使用 flex 布局，但是在 PC 端如果要兼容 IE6+ ，通常都需要一些額外的標簽控制最后一個元素或者配合 JS 進行運算。

我們知道，有個 text-align:justify可以實現兩端對齊文本效果，一開始我猜測使用它可以實現：

試了一下是不行的，并沒有實現所謂的兩端對齊，查找原因，在 W3C找到這樣一段解釋:

最后一個水平對齊屬性是 justify，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字符，因為不同的語言有不同的連字符規則。規范沒有嘗試去調和這樣一些很可能不完備的規則，而是干脆不提這個問題。

額，我看完上面一大段解釋還是沒明白上面意思，再繼續查證，才找到原因：

雖然 text-align:justify 屬性是全兼容的，但是要使用它實現兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用。

也就是說每一個 <i>1</i>間隙，至少需要有一個空格或者換行或者制表符才行。

我嘗試給每一塊中間添加一個換行符，發現還是不行：

再尋找原因，是出在最后一個元素上面，然后我找到了 text-align-last這個屬性，text-align-last 屬性規定如何對齊文本的最后一行，并且 text-align-last 屬性只有在 text-align 屬性設置為 “justify” 時才起作用。

嘗試給容器添加 text-align-last:justify，發現終于可以了，多列均勻布局：

但是一看兼容性，慘不忍睹，只有 IE 和 最新的 chrome 支持 text-align-last 屬性，也就是說，如果你不是在使用 IE 或者 最新版的 chrome 觀看本文，上面這個 codePen 例子還是沒有均勻分布。

好，鋪墊了這么久，終于可以引出本文的主角偽元素了，上面說了要使用 text-align:justify實現多列布局，要配合text-align-last，但是它的兼容性又不好，真的沒辦法了么，其實還是有的，使用偽元素，可以完美實現：

通過給偽元素 :after 設置 inline-block，配合容器的text-align: justify就可以輕松實現多列均勻布局了。配合幾句 hack 代碼，可以實現兼容到 IE6+ ，最重要的是代碼不長，很好理解。

本文主要就是多介紹了偽元素的兩種實用方法，更多偽元素的妙用可以戳

我另一篇講述 CSS 偽元素的文章： 【CSS進階】偽元素的妙用–單標簽之美，看完本文覺得有意思的可以再去看看上一篇。

也希望覺得不錯的同學順手在我的 Github 點個 star ： CSS3奇思妙想。

希望這篇文章對大家有所幫助，尤其是在對問題解決的思維層面上。

到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。