细谈CSS布局方式

一、CSS布局方式分类

  [1].默认文档流方式以默认的html元素的结构顺序显示 

  [2].浮动布局方式通过设置htmlfloat属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而后面的对象流向对象的左侧(取消独占一行的行为,允许别人与其一行,其实是这个块从文档流中分离出来,他之后的对象视它不存在

  [3].定位布局方式通过设置htmlposition属性显示

    position设置对象的定位方式,

    值:static(静态定位,页面中的每一个对象的默认值

      absolute(绝对定位,将对象从文档流中分离出来,通过设置leftrighttopbottom四个方向相对于父级对象进行绝对定位,如果不存在这样的父级对象,则依据body对象

      relative(相对定位,对象不从文档流中分离出来,通过设置leftrighttopbottom四个方向相对于自身位置进行相对定位)

    注意:当想使用相对于父元素的绝对定位时,必须要有两个条件:

        1.必须给父元素加定位属性,一般建议使用:positionrelative。(不指定时默认为body)

        2.给子元素,加绝对定位positionabsolute,同时要加方向属性(left/right/top/bottom).

        3.绝对定位是以父元素为基准点进行定位(会脱离文档流)。相对定位是以其本身为基准点进行定位(离开原位置但是还占据着位置,未脱离原文档流)。

上一篇:iOS截屏代码


下一篇:JSTL 模板中 <c:forEach> 标签详解