2010年11月17日 星期三

CSS的BOX MODEL

Box Model

box model算是學習css很重要的一個觀念,其實也不會很難,大概記住是這樣一層一層包起來的就可以了。

一開始學box model很容易會遇到的問題就是以為width(height)就代表這個物件的寬度(高度),所以如果母物件的寬度小於子物件的寬度,就會很容易發生版面跑掉的問題。舉例來說,如果把width設為200px,border設為1px,padding及margin各為3px,那麼這個元素的寬度就會是200+(1+3+3)*2=214,而不是只有200px。

另外padding及margin的值可以各別設,如padding-top、padding-bottom、padding-left、padding-right,如果沒有特別標的話則為四個邊都是一樣的值。

而除了個別設以外,熟悉了以後比較常會全部設在一起,如padding:2px 1px 3px 0px,四個值依順序分別為上、右、下、左這樣,同樣可以套在margin、border。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...