概述
网页布局的核心就是定位，盒模型是浏览器为页面中的每个HTML元素生成的矩形盒子；所以HTML页面实际上是由一堆盒子组成的，只不过在默认情况下，这些盒子边框是不可见的，背景也是透明的而已，这些盒子按照可见版式模型在Web页面上排布。
页面版式由三个属性控制：position属性、display属性、float属性
position属性:控制页面上元素间的位置关系
display属性：控制元素堆叠、并排、显示
float属性:控制组成多栏布局
盒子
Web页面中的每个盒子（元素）都有：边框(border)、内边距(padding)、外边距(margin)
边距(border):控制盒子边框的宽窄、样式、颜色
内边距(padding):控制盒子内容与边距间的距离
外边距(margin):控制盒子与盒子间的距离
每个盒子有四条边，所以与边框、内边距、外边距相关的属性也各有四个：上(top)、右(right)、下(bottom)、左(left)
边框
下面是一个段落元素的盒模型：
整个盒子的宽度等于我们设置的宽度300+左右内边距2*5 + 左右边距2*3=316
高度等于20+上下内边距2*5+上下边距2*3=36
边框有三个属性：宽度(border-width)、样式(border-style)、颜色(border-color)
宽度:可以使用thin、medium、thick文本值，也可以使用百分比
样式:有none、hidden、dotted、dashed、solied、double、groove、ridge、inset、outset等文本值
颜色:RGB、HSL、十六进制颜色和字面量值
快速显示盒子
边框的三个属性宽度、样式、颜色的默认值分别是
border-width:medium;
border-style:none;
border-color:black
由于border-style:none，所以默认情况下边框是不会显示的，为了方便开发我们可以改成
border: solid 1px;
外边距
盒子的外边距在垂直方向上是会叠加的，它们的叠加规则是当两个盒子上下外边距相遇时，它们就会重叠，直到一个盒子的外边距碰到另一个盒子的边框即那个外边距宽就以那个外边距作为盒子间的距离
p{width:300px;border: solid 3px;padding: 5px;margin-top: 20px;margin-bottom: 50px;}
如果将上面的规则应用给5个段落，那么每个段落之间的距离就是50px
单位问题
在设置元素外边距时一般要混合使用不通的单位。即左右外边距使用像素，而上下外边距则以em为单位
左右外边距使用像素可以是文本内容始终与包含元素边界保持固定间距，不受字体大小影响
上下外边距使用em为单则可以让段落间的距离随字号变化而相应的增大或缩小
position属性有4个值：
static
relative
fixed
以下是我们的模版HTML代码
<!DOCTYPE html>
<html>
<head>
<title>网页元素的定位</title>
<meta charset="utf-8">
<link href="positionstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>宣室求贤访逐臣，</p>
<p class="change_position">贾生才调更无伦。</p>
<p>可怜夜半虚前席，</p>
<p>不问苍生问鬼神。</p>
</body>
</html>
在不添加任何样式的情况下，即默认采用的静态定位方式，显示效果如下
采用相对定位 relative
现在我们想让第二句“贾生才调更无伦”用相对定位方式，这里的相对定位是指：它相对于原来的位置即static位置。
现在添加如下样式：
这段代码设置了p边框为1px 宽度为200px，并且删除了内边距和外边距
显示后的效果如下
现在我们让第二段向右移动200px的位置
运行效果
可以看出它的位置是相对于原来的位置在变动。它只是挪动了一下，它原来的空位置还在。而其他元素也没有任何变化！！
采用绝对定位 absolute
把position属性值改为absolute即将定位方式改为了，绝对定位方式了。这里绝对定位：是指对于body进行定位，这也是默认的定位上下文
运行效果
可以看出采用绝对定位方式之后，元素原来的位置被它下面的元素所占用
采用固定定位 fixed
固定定位和绝对定位很相似，绝对定位的定位元素是上下文，而固定定位的元素是浏览器窗口，所以它不会随着页面的滚动而移动
来源：https://www.cnblogs.com/tao-zi/p/3208349.html