進擊的哈士奇-框模型的學習

一、框模型的定義：
(1).框:html中，所有的元素都可以認為是框。框中可以盛裝內容。
(2).框模型:指的是 框與框、框與內容之間的關係，定義了：外邊距、內邊距、邊框
注意：
元素的實際寬度=左外邊距 + 左邊框 + 左內邊距 + 內容區域(width) + 右內邊距 + 右邊框 + 右外邊距
二：外邊距：
(1)外邊距定義：
在元素邊框周圍的一些空白區域，該空白區域，正常情況下是不允許有其他元素顯示的。
(2).外邊距的屬性：
例：margin:1px;
表示上下左右四個方向的外邊距為10px
單邊設定:margin-方向:
方向：top,bottom,left,right。
例：marign-top:10px;
margin的上外邊距為10px
注意：取值可以為px、%、負值、auto。
三：內邊距
(1).內邊距的定義：
框內的內容與框之間的距離控制元件
注意：增加內邊距後會擴大元素邊框所佔的區域。
(2).內邊距的屬性：
padding : value;
取值：畫素、%、不能取負值
padding:a1; 四個邊的距離都為a1
padding:a1 a2; 上下的距離是a1 左右的距離是a2
padding:a1 a2 a3; 上的距離是a1 左右的距離是a2 下的距離是a3 padding:a1 a2 a3 a4;上的距離是a1 右的距離是a2 下的距離是a3 左的距離是a4