CSS简单布局总结

时间:2022-05-22 11:10:17

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