Site Overlay

標籤: css

Chrome載入CSS問題

印象中看過「css的link標籤不論放在哪(head or body)都會先載入」的這個說法,不過今天卻發現當Chrome在某些情況時,結果似乎會有點非預期。 首先我在head與body最後都各放一個link標籤,並且在onload時跳出alert 在這個case,第一次alert時瀏覽器還是空白畫面,而第二次alert時,畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。 但奇怪的事情來了。當我把head裡的link拿掉時,chrome會呈現一個不穩定的結果。

在CSS GRID Layout實現colspan, rowspan

善用 display: grid 來處理排版真的非常方便,不但可以簡化html巢狀結構,在處理RWD的時候,也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。 說到 colspan 的話,上述提到的 grid-template-areas 也可以輕鬆達到這個需求,例如以下範例:

Copyright © 2022 Bloggy. All Rights Reserved. | SimClick by Catch Themes