首页 > 代码库 > 7月17号=》221页-225页

7月17号=》221页-225页

10.1.1  通过float属性实现多栏布局

    通过使用float属性,可以非常方便地基于<div>元素来设置导航菜单、多栏布局

    等效果。代码示范:

      //为div元素设置左浮动,如果多个div元素的总宽度未超过父元素的宽度

        则在一行显示多个div

      div{

        float:left;

      }

 

10.1.2  使用clear属性实现换行

    clear属性用于设置HTML组件的左、右是否允许出现“浮动”组件,如果该

    属性指定为left,则左边不允许出现“浮动”组件;如果指定为right,则右边

    不允许出现“浮动”组件;如果指定为both,则两边都不允许出现“浮动”

    组件。借助于clear属性可以让“浮动”组件换行。

    代码示范:

      //设置div元素的左边不允许出现浮动组件,如果有浮动组件div元素将换行显示

      div{

        clear:left;

      }

 

10.1.3  使用clip属性控制裁剪

    CSS还提供了一个clip属性来控制对元素的裁剪,clip属性可通过rect()指定一个矩形。

    需要指出的是为了看到clip属性的作用,该元素的position必须设置为absolute,并将

    overflow设置为hidden。

    代码示范:

      //设置div元素裁剪后的样式

      div{

        position:absolute;

        width:500px;

        overflow:hidden;

        clip:rect(16px 400px auto 30px)

      }