CSS简单布局总结

display 

block       块级元素，占据一行

none       隐藏

inline      允许同一行显示，但不再有宽和高

inline-block   允许在一行的块级元素，可以有宽和高

例如，把所有a元素设置成100×50的块级元素：

a{
	display: block;
	width: 100px;height: 50px;
}

float 

none   默认 不浮动

left     向左浮动

right   向右浮动

例如，设置a1 a2向右浮动：

a1{float: right;}
a2{float: right;}

*注意：浮动有先后顺序，第一个向右浮动的在最右侧，如上即是a1在a2右边

*浮动有覆盖属性，将浮动元素统一放在一个容器内能避免覆盖其他元素

clear

none    默认值，允许两边有浮动元素

left       不允许左边有浮动元素

right     不允许右边有浮动元素

both     不允许两边有浮动元素

若要使一组浮动元素每隔N个就清除一次浮动，可以在这之间加入清除两边浮动的空div：

.clear{clear: both;}

position 

static    默认，无定位

absolute   相对于body的绝对位置，若父元素有relate属性，则以父元素为参照点

relative     相对于元素本来位置的偏移位置

fixed          固定定位，相对于浏览器窗口的位置，适合做置顶等按钮

*通过top,left,right,bottom定位，表示离这个方向的距离，左右二选一，上下二选一

*relative偏移位置后，仍然占据原位置空间

例如，设置div位置为绝对位置，距离左边20px；距离上边30px

a{position: absolute;left: 20px;top: 30px;}