4/23/2007

CSS BOX基本概念

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



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




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

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


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

沒有留言:

LinkWithin

Related Posts Plugin for WordPress, Blogger...