一張圖幫你完全掌握CSS所有屬性！

CSS 屬性被分成不同的類型，如字體屬性、文字屬性、邊框屬性、邊距屬性、佈局屬性、定位屬性、列印屬性等。對於初學者來說，初學 CSS 的最大障礙是如何熟悉並掌握這些屬性的使用。

提示：不要急於記住每個CSS 屬性，不要急於吃透它們的用法，更不能機械記憶，如果使用背英語單字的方法來記憶，效果勢必會很差。

最佳的方法是邊學習邊記憶，在實踐中逐一突破。當學習網頁排版時，不妨專注於把字體和文字屬性研究一下。當學習網頁佈局時，不妨再研究與盒子模型和佈局相關的幾個屬性。

記憶這些屬性時，一定要結合實踐，不斷去嘗試並舉一反三。只有這樣才能夠完全掌握 CSS 所有屬性，並且能夠熟練地應用。例如，當準備學習 CSS 佈局時，不妨先專注於把與 CSS 盒模型相關的屬性記住，此時可以繪製一個圖，如下圖所示。

CSS 屬性的名稱比較有規律，且名稱與意思緊密相連，根據意思記憶屬性名稱是一個不錯的方法。

CSS 盒子模型講的就是網頁中任何元素都會顯示為一個矩形形狀，它可以包含外邊距、邊框、內邊距、寬和高等。用英文表示是：margin(外邊距，或稱為邊界)、border(邊框)、padding(內邊距，或稱為補白)、height(高)和width(寬)，盒子還有background(背景) 。

外邊距依方位又可以包含margin-top、margin-right、margin-bottom、margin-left 共4個分支屬性，分別表示頂部外邊距、右側外邊距、底部外邊距和左側外邊距。

同樣的道理，內邊距也可以包含 padding-top、padding-right、padding-bottom、padding-left 和 padding 屬性。

邊框可以分為邊框類型、粗細和顏色，因此可以包含border-width、border-color 和border-style 屬性，這些屬性又可以按4 個方位包含很多屬性，例如，border-width屬性又分為border-top-width、 border-right-width、border-bottom-width、border-left-width 和border-width 屬性。

推薦學習：《web前端》

#

以上是一張圖幫你完全掌握CSS所有屬性！的詳細內容。更多資訊請關注PHP中文網其他相關文章！