學習日誌

在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>表示具體數值，如5px和0.1in等。

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

padding：

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

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

margin：