标签：pap meta body bsp charset 指定 static set strong
<!--
-定位：把指定的元素摆放在页面的任意位置(即：通过定位可以任意的摆放元素)
-通过position属性设置元素的定位:
-可选值为：
static 默认值。元素没有开启定位。（忽略left、right、top、bottom）
relative 开启元素的相对定位。
absolute 开启元素的绝对定位。
fixed 开启元素的固定定位（也是绝对定位的一种）。
-->
<!--
relative 相对定位:
当元素的position属性设置为relative时，则开启了元素的相对定位。
relative的特性：
1.开启了元素的相对定位以后，而不设置偏移量时，元素不发生任何变化。
2.相对定位是相对于元素在文档流里原来的位置进行定位。
3.相对定位的元素不会脱离文档流（即：虽然box2被放在小面，但是box3还在元素并未上去）
4.相对定位会使一个元素提升一个层级（box2覆盖率box3[没有开启定位]一部分）
5.相对定位不会改变元素的性质，块还是块，内联还是内联（它还是在文档流里的，所以并没变）
-->
<!--
偏移量：
当开启了一个元素的定位（即：position的属性值是一个非static的值）时
可以通过left、right、top、bottom四个属性来设置元素的偏移量
left:元素相对于定位位置的左侧偏移量
right：。。。。。。。。。右侧偏移量
top:。。。。。。。。。 上边的偏移量
bottom：。。。。。。。 下边的偏移量
常识：
通常偏移量只需要使用两个人就可以对一个元素进行定位了
一般一个水平方向的一个偏移量和一个垂直方向的一个偏移量
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
}
.box2{
width: 200px;
height: 200px;
background: yellow;
/*2.*/
position: relative;
left:100px;
top:200px;
/*1.
* margin-left: 200px;
margin-top: 200px;*/
}
.box3{
width: 200px;
height: 200px;
background: green;
/*1.
* margin-top: -200px;*/
}
.box4{
width: 200px;
height: 200px;
background: papayawhip;
position: relative;
left:200px;
bottom:200px;
/*1.
* margin-top: -200px;*/
}
.sp{
width: 200px;
height: 200px;
background: cyan;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="sp">这是一个span</span>
</body>
</html>
标签：pap meta body bsp charset 指定 static set strong
原文地址：https://www.cnblogs.com/goodgirl----xiaomei/p/9769481.html
