第五课 布局定位 2 ★★

1 . 布局定位的三种方式

① 文档流 : 默认的定位方式,依次往后排列

② 定位 :

• 相对定位 :relative
  其移动起点为原位置,移动后原来的位置还占着

<style>
	div{
		position:relative;
		top:-100px;
	}
</style>

这里的坐标系是 x轴 上负下正, y轴 左负右正

• 相对定位 : absolute
  其移动起点是他的父级元素,且父级元素须是相对的或绝对的(若不是,则会以body为移动起点),移动后原来的位置不在了

• 静止定位 : fixed
  在页面中不动,不会因为滚动页面而上下移动
  相对于窗口静止

③ 浮动 : float

分为 左浮动 left 跟 右浮动 right

图片同文字一起的时候,图片浮动,文字会包裹图片,不会被遮挡
(可以给图片一个 margin-left:20px; 来给文字与图片留空)

---

2 . 居中的方式

①margin:0 auto

在盒子模型内,且盒子必须有宽高数值

②用相对定位 / 绝对定位来居中