在CSS中,一個獨立的盒子模型由content(內容)border(邊框)padding(內邊距)margin(外邊距)四個部分組成。

 

倘若將盒子模型比作展覽館裡展出的一幅幅畫,那麼content就是畫面本身,padding就是畫面與畫框之間的留白,border就是畫框,margin就是畫與畫之間的距離。

 



屬性值的縮寫形式:

  • 如果給出1個屬性值,表示上下左右邊的屬性全一致。
  • 如果給出2個屬性值,前者表示上下邊的屬性,後者表示左右邊的屬性。
  • 如果給出3個屬性值,前者表示上邊的屬性,中間的數值表示左右邊的屬性,後者表示下邊的屬性。
  • 如果給出4個屬性值,依次表示上、右、下、左邊的屬性,即順時針排序。
  • 若需要專門設置某一方向的屬性值,可使用 -left, -right, -top, -bottom來設置。

 


border:

border的屬性主要有三個,分別是color(顏色)、width(粗細)和style(樣式)。

border-color:指定border的顏色,設置方法和文字的屬性完全一樣,通常情況下設置為十六進位的值,也可以使用顏色名稱,例如紅色為「#FF0000」或「red」。

border-width:指定border的粗細程度,可設為thin, medium, thick和<length>,其中<length>表示具體數值,如5px0.1in等。

border-style:可設為none(無樣式), hidden, dotted(點線), dashed(虛線), solid(實線), double(雙線), groove(槽線), ridge(脊線), inset(內凹)和outset(外凸)等。


padding

又稱為內邊距,用於控制內容與邊框之間的距離,

屬性中可設置1、2、3或4個屬性值。


margin:

又稱為外邊距,指的是元素與元素之間的距離,
用於控制區塊與區塊之間的距離,屬性設置方法與padding一樣。
創作者介紹

學習日誌

chenmike 發表在 痞客邦 PIXNET 留言(0) 人氣()