HTML5盒模型相关

标题什么是盒模型？

 概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
 作用：控制元素和元素之间，或者元素和内容之间的位置关系
 盒模型的组成：
      Content（内容区）+padding（填充区）+border（边框）+margin（外边界区）

各元素的介绍

Content：元素的宽和高
Padding：
作用：用来控制父元素和子元素之间的位置关系；
用来控制元素和内容之间的位置关系的。
特点1：添加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变的话，需要的宽高上减掉所加的padding；
特点2：padding属性对背景图片是不起作用的，可以说背景图的位置，是不受padding影响的；
特点3：背景色会延展到padding区域。
padding使用方法：
方法一：
padding:30px; 上右 下左
padding:10px 30px; 上下 左右
padding:10px 30px 50px； 上 左右 下
padding:10px 30px 50px 100px；上 右 下 左
|:--------😐 -------------😐
方法二：
Padding-top：30px； 上填充
Padding-right：30px； 右填充
Padding-bottom：30px； 下填充
Padding-left：30px； 左填充
注：Padding就是用来控制父子元素之间的位置关系的
Margin：
作用：控制同辈元素之间的位置关系。
特点：margin是现在是在元素边框以外的空白区。
margin使用方法：
方法一：
margin:30px; 上右 下左
margin：10px 30px； 上下 左右
margin：10px 30px 50px; 上 左右 下
margin:10px 30px 50px 100px; 上右下左
|:--------😐 -------------😐
方法二：
margin -top：30px； 上外边距
margin -right：30px； 右外边距
margin -bottom：30px； 下外边距
margin -left：30px； 左外边距

实现元素水平居中的方法：
margin：0 auto；或margin-left:auto / margin-right:auto;

注：
margin 是可以写负值的，padding不可以写负值；
margin不会影响元素的实际宽高，但是也会增加它的所占区域；
margin就是用来控制同辈元素之间的位置关系

图文精解：

标准盒模型的所占位置的组成： 宽高（content）+padding+border+margin

元素宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin

元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin