div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
margin-left:100px;
margin-top:20px;
}
绝对定位/相对定位/固定定位--
绝对定位： 他的爸爸(父元素)绝对需要有一个东西可以把它定住，否则他会不受父元素控制，跑出家门（父元素或者文档流）
相对定位：这是个乖乖女，只相对于原来的位置移动，不会脱离爸爸(父元素)的控制。
固定定位： 这是个奇葩，野性难训，只相对于浏览器的位置(body)移动，不受阿姨(鼠标)叔叔(键盘)们的教唆。喜欢死站着不懂。
3，position只要你给盒子的父级一个绝对定位relative，给想要移动的盒子相对定位absolute，那么无论盒子周围有什么元素，有多少元素，他都可以相对于父级的位置做到你设定的上下或左右边距效果。
1,首先任务要求是让你把这个盒子相对于浏览器距离上边20px，距离右边100px。你现在写的输出结果是距离上边20px，距离左边100px；
2，其次你要理解margin和position的特点。margin是增加与其周边元素的距离，现在只有一个盒子所以现在用margin他就是相对于浏览器增加了边距，如果他前面有两个盒子或者其他，那么你再用margin就得不到任务需要的效果了；
3，position是一个很好用的属性，熟悉了可以做到很多样的效果；
margin代表的是两个盒子之间的距离，现在只有一个盒子，没有相对值（即没有另一个盒子作为比较对象）当然不起作用了
不懂呀
text-align:left;
本来就有居中属性，为什么要自己计算呢， 如果屏幕宽度变了怎么办？不能更好的适配屏幕