HTML5 页面布局

div布局

前端布局通常运用div，把要布局的对象放入div标签中，通过调整div的位置来进行布局。

调整位置的属性一般有

margin：用来描述该div的外边框，即距离上一个元素控件的“距离”，其有四种单边属性：top、left、right、bottom。可分别设置属性值，也可一次性设置全部。

top、left、right、bottom：相对于上一个控件边缘的偏移位置。PS：用此属性时必须设置属性position。

position元素

这个属性定义建立元素布局所用的定位机制。
任何元素都可以定位，
不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。
相对定位元素会相对于它在正常流中的默认位置偏
元素定位的方式：有fix、absolute、relative、static、inherit

常用元素

relative(相对位置)，设置此属性后会以父级容器的左上角为起点进行定位，body默认为relative。

absolute(绝对位置)，设置此属性会根据整个页面左上角进行定位并且不受任何其他标签的影响。PS：如套在其他设置了position的父级容器，则以该容器左上角为起点进行定位。