（3）CSS樣式——盒子模型

盒子模型概述

盒子模型的内容範圍包括：margin、border、padding、content

内邊距padding

1.在content外，邊框内部

2.内邊距屬性

padding	設定所有邊距
padding-bottom	設定底邊距
padding-left	設定左邊距
padding-right	設定右邊距
padding-top	設定上邊距

邊框border

1.CSS邊框

可以用于任何元素

2.邊框的樣式

border-style:定義10個不同的非繼承樣式，包括none

3.邊框的單邊樣式

border-top-style

border-left-style

border-right-style

border-bottom-style

4.邊框的寬度

border-width

5.邊框單邊寬度

border-top-width

border-left-width

border-right-width

border-bottom-width

6.邊框的顔色

border-color

7.邊框的單邊顔色

border-top-color

border-left-color

border-right-color

border-bottom-color

8.CSS3邊框

border-radius:圓角邊框

box-shadow:邊框陰影

border-image:邊框圖檔

後面四個參數的意思是：向右10px，向下10px，陰影清晰度是5px，顔色為紅色

外邊距margin

圍繞在内容邊框的區域，外邊距預設為透明區域，結束任何長度機關、百分數值

屬性	描述
margin	設定所有邊距
margin-bottom	設定底邊距
margin-left	設定左邊距
margin-right	設定右邊距
margin-top	設定底邊距

外邊距合并

合并就是疊加的概念

兩個相鄰的外邊距會疊加在一起，并且兩個距離為值多的一方，比如兩個相鄰的元素margin都是100px，那麼這兩個元素之間的距離不是200px，而是100px