CSS BOX基本概念

整個網頁呈現,是由一個個方塊格子組成,而每一個方塊結構,由以下幾個參數來控制,即是padding, margin, border,contain
這些參數可以應用在單個方塊裡,或以整個網頁作為基本結構,來指定每個box的所處位置。
總的來說,整個網頁,可以是由很多個box組成,而每個box裡面又可以有box(巢狀結構)。



*參數解釋*
padding, margin, border,contain(內容.內文)所組成,如下圖




padding 指contain(內容.內文)跟border的距離。
margin 指border至圖中虛線的範圍。它是指box框線往外算的那一個邊塊範圍。
border 是我們設定圖框時的那條框線，它是指一條線，我們可以自行設定顏色粗細。
contain 則是內容文字放置的那一區塊。它是指一個範圍，即是整個box中央這內文範圍

當以上幾個參數沒有被定義，預設值是0。
如果要指定參數,例如: padding: 1px 2px 3px 4px,順序以順時鐘排列規則, 上右下左,
上1px
右2px
下3px
左4px


CSS有三種定位方式：normal(正常)，float(浮動)和absolute(絕對)。
我們要用這些方式,來指定頁面上的每一個BOX,而每個方式指定,又各有其規則與注意事項
分享本篇文章