两种盒模型

盒模型是css布局的基石，它规定了网页如何显示以及元素间相互关系。盒模型的作用是控制元素和元素之间，或者元素和内容之间的位置关系。
盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
content： 元素的宽和高 border : 盒子的边缘
padding：
作用：用来控制父元素和子元素之间的位置关系； 用来控制元素和内容之间的位置关系的。
特点1：添加了padding值之后，padding值会把元素原有的大小撑大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；
特点2： padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。
特点3：背景色会延展到padding区域。
使用方法一 ：
padding-top:30px; 上填充
padding-right:30px; 右填充
padding-bottom:30px; 下填充
padding-left:30px; 左填充
方法二：
padding： 1 2 3 4
注：1、上 2、右 3、下 4、左，
margin：
作用：控制同辈元素之间的位置关系。
特点： margin是现在是在元素边框以外的空白区。
注：margin使用方法和padding一样。
盒子模型分为标准盒模型和怪异盒模型。
标准盒模型 的所占位置的组成：宽高（content）+padding+border+margin
元素宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin
元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin

       怪异盒模型：比如提交按钮    

元素的宽度：width（content+border+padding）+margin
标准盒模型和怪异盒模型之间可相互转换，转换方法为
属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）