CSS3基础——尺寸与边框2

尺寸与边框——框模型

一、框模型：
　　框：html中，所有的元素都可以认为是框。框中可以盛装内容。
　　框模型：指的是框与框、框与内容之间的关系。
　　定义了外边距（框与框之间的距离）、内边距（框与框内内容的距离）、边框
　　注意：
　　　　可以通过width和height定义框的宽度和高度
　　　　如果增加了内边距、外边距、边框的时候不会影响内容区域的尺寸，但会增加框的总尺寸
　　　　元素的实际宽度：左外边距+左边框+左内边距+内容区域(width)+右内边距+右边框+右外边距
        
二、外边距：
　　1、什么是外边距：
　　　　在元素边框周围的一些空白区域
　　　　该空白区域，正常情况下是不允许有其他元素显示的。
　　2、外边距属性：
　　　　margin:value；
　　　　　　表示上下左右四个方向的外边距
　　　　单边设置:
　　　　　　margin-方向:
　　　　　　方向：top、bottom、left、right
　　　　　　取值：px、%、负值、auto
　　　　注意：
　　　　　　当元素的左右外边距设置为auto时，那么该元素会在其父层容器内变的水平居中
　　3、html中，有些元素是具备默认外边距
　　　　h1-h6、p、body
　　　　如果设置以上元素的margin属性值的话，那么就会覆盖掉他们默认的margin
　　4、垂直外边距的合并：
　　　　当两个垂直外边距相遇时，他们将形成一个外边距，以最大值为准。
　　5、外边距取值：
　　　　margin简易写法:
　　　　margin:value；value表示的上下左右四个方向的外边距
　　　　margin:v1 v2；
　　　　　　v1表示上下外边距，v2表示左右外边距
　　　　　　如：marging:20px auto；
　　　　margin:v1 v2 v3；
　　　　　　v1 表示上外边距,v2表示左右外边距,v3表示下外边距
　　　　margin:v1 v2 v3 v4;
　　　　　　上–>右–>下–>左
三、内边距：
　　1、什么是内边距：
　　　　框内的内容与框之间的距离控件
　　　　注意：增加内边距后会扩大元素边框所占的区域
　　2、语法：
　　　　padding:value；
　　　　取值：像素、%、不能取负值、没有auto
　　　　padding:v1; 四边
　　　　padding:v1 v2; 上下、左右
　　　　padding:v1 v2 v3; 上、左右、下
　　　　padding:v1 v2 v3 v4; 上、右、下、左

　　　　padding-方向:
　　　　padding-left:
　　　　padding-right:
　　　　padding-top:
　　　　padding-bottom: