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;}