外边距、内边距和定位的使用

margin(外边距)、padding(内边距)、position（定位）的使用

margin的应用

在html中块元素使用边距外部的四边的边距可以用到“margin”的元素。

1. 想要给块顶部外面加一个边距，就好像块元素就是一个2D房子，然后在元素外面顶部加了一层围栏隔开实现顶部间距的效果。
   例如：

   ，浏览器页面中的100px×100px的红块就会在顶部顶开了100px的位置。

2. 如上，如果想要用”margin“左边、下边或者右边加边距，就要分别给”margin-上、下、左、右：像素“
   例如：1、margin-top: 10px (顶部边距)
   2、magin-left: 20px （左边边距）
   3、margin-bottom: 30px （底部边距）
   4、margin-right: 40px （右边边距）

padding的应用

在html中块元素使用内边距可以用到“padding”的元素。

在块元素包裹了另外一个块元素的时候或者父级和子级同时使用“margin”的顶部和底部的外边距时，会产生合并，边距会取较大值。并且子、父级关系父级产生了边距而子级没有。那这个时候我们想要子级的顶部和底部不受影响的产生边距，那我们将会用到“padding”内边距，在父级使用内边距然内部的块元素产生边距：
	1、padding-top: 10px （顶部内边距）
	2、padding-left: 20px （左侧内边距）
	3、padding-bottom: 30px （底部内边距）
	4、padding-right: 40px （右侧内边距）
例如：  <div style="width: 100px;height: 100px;background: red;margin-top: 20px;padding-top: 20px;">
	 <div style="width: 50px;height: 50px;background: yellow;"></civ>
	 
	 这样父级的外边距和父级里面的外边距就不会产生合并的尴尬局面，但是你会发现父级的高度变高了20像素，这个就是内边距产生的另外一个问题，解决的办法就是在父级那里改高度，内边距在宽或者高那里隔开了间距就要在高或者宽那里改像素，增加了多少就要在父级元素那里调整多少。

position的应用

在html中“position”有三种：

1. 绝对定位：absolute
   绝对定位比较暴力，比如一个块元素加上了一个绝对定位那么它直接起飞脱离了文档流，不受限制。加了绝对定位需要在：上、下、左、右，这四个坐标中给予两个坐标。当绝对定位没有参照物就会以“body”为准，如果有参照物的会以最近的一个参照物为准。
2. 相对定位：relative
   相对定位的作用就是等于给一个东西增加了一个标记，成为了一个给别人定位的一个参照物。
3. 固定定位：fixed
   固定定位只作用于浏览器上，比如一个块元素固定在一个页面的右上角上，那么这个页面的浏览器如何滚动都会固定在右上角上面。