Css Position功能誤解與Box Model應用
更新於 2023/06/08閱讀時間約 1 分鐘
製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版不正確。
發覺是自己對於Position的功能不夠了解，所以再回去觀看認識Position的單元，重新了解Position的功能以及應用方式，經過思考後content的內容排版改成使用margin來完成，搭配figma設計稿上的各個圖形的間距來完成排版，最後終於完成這份作業。
這讓我了解到兩個點，第一是要了解個語法真正的功能，同時確認自己在學習上是否有誤解或不夠熟練的問題，第二是針對不同的問題應該選用適合該問題的工具，而不是用同一種工具解決不同的問題。
0會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code: