如何同時並存水平置中與水平靠右 ?
實務上常遇到一些不規則水平置中需求,如一個為水平置中,另一個卻水平靠右。
實務上常遇到一些不規則水平置中需求,如一個為水平置中,另一個卻水平靠右。
Absolute Position 與 Fixed Position 非常類似,但還是有不少特性不太一樣。
蓋板廣告是 Fixed Position 常見應用,本文簡單介紹其實踐方式。
Block Element 預設會以 width: 100% 佔據父層 Box 所有寬度,這使得 margin: auto 無用武之地,可使用 width: fit-content 將寬度收縮成 Content 寬度,讓 margin: auto 能水平置中。
對 Element 設定 width 很直覺,但 RWD 出現後,width 就面臨的重大挑戰,因此出現了 max-width,但這兩者有什麼差異呢 ?
很多人以為 width 預設值是 100%,但事實上是 auto,而 100% 與 auto 有什麼差異呢 ?
藉由 Fixed Position 與 top、bottom、left 、right 與 margin: auto 靈活運用,可以排出很多特殊 Layout。
實務上常看到的蓋板廣告、回到頁面頂端,固定顯示在頁面的 Navbar … 等,都是使用 Fixed Position 實現。
Card 為目前很流行 Layout,因為可針對不同 Device 寬度輕易 RWD 改變。
雖然 flex-grow、flex-shrink 與 flex-basis 為 3 個獨立 property,但實務上常使用 flex 一次設定。