进击的哈士奇-框模型的学习

一、框模型的定义：
(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