首页 > 代码库 > 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)
}