没有合适的资源?快使用搜索试试~ 我知道了~
css浮动(float)详解
0 下载量 81 浏览量
2021-01-08
17:22:43
上传
评论
收藏 39KB PDF 举报
温馨提示
试读
2页
浮动详解 一、什么是浮动? 浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。 二、如何产生浮动? 给元素本身添加float属性 float: 值 作用 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承 float 属性的值 三、浮动有什么作用? 作用: 在html文档流中,分为行元素、块元素和行内块元素,行元素和行内块元素都是以横向排列的,而块元素则是以流的形式从上往下排列的,当我们想使块元素横向排列时,就用到了我们的浮动(flo
资源推荐
资源详情
资源评论
css浮动浮动(float)详解)详解
浮动详解浮动详解
一、什么是浮动?一、什么是浮动?
浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。
二、如何产生浮动?二、如何产生浮动?
给元素本身添加float属性
float:
值值 作用作用
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动,并会显示在其在文本中出现的位置
inherit 规定应该从父元素继承 float 属性的值
三、浮动有什么作用?三、浮动有什么作用?
作用作用:
在html文档流中,分为行元素、块元素和行内块元素,行元素和行内块元素都是以横向排列的,而块元素则是以流的形式从上
往下排列的,当我们想使块元素横向排列时,就用到了我们的浮动(float)。
当给一个块级元素添加浮动时本来应该竖向排列的元素开始横向排列的,如下图所示
.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
box1
box2
box3
box4
box5
资源评论
zcharzon
- 粉丝: 6
- 资源: 934
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功