HTML5学习_day05(5)--html之float元素的规则
2016-09-26 16:23
253 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动元素的细则</title> <style type="text/css"> div{ width: 400px; height: 400px; background-color: aqua; } p{ width: 300px; height: 300px; background-color: salmon; position:; float: left; } .wrap{ width: 399px; /*空间不足时就会换行 400px就不用换行*/ height: 400px; background: olive; } .class1{ width: 100px; height: 100px; background-color: wheat; } .class2{ width: 100px; height: 100px; background-color: slateblue; } .class3{ width: 100px; height: 100px; background-color: brown; } .class4{ width: 100px; height: 100px; background-color: cornflowerblue; } .wrap div{ float: left; } .wrap1{ width: 800px; height: 400px; background: olive; } .class5{ width: 700px; height: 100px; background-color: wheat; float: left; } .class6{ width: 100px; height: 100px; background-color: slateblue; float: left; } .class7{ width: 100px; height: 100px; background-color: brown; float: right; } .class8{ width: 100px; height: 100px; background-color: salmon; float:right; } </style> </head> <body> <!--1.浮动框不能在其浮动方向上一处包含块(例子包含块就是div) 浮动元素左浮,其左边界不能超出包含块的左边界 浮动元素右浮,其右边界不能超出包含块的右边界 <div class="div"> <p class="p">我是浮动元素</p> </div>--> <!--2.浮动框的定位会受同向浮动框的影响 也就是说:当前浮动元素的定位会收到之前生成的浮动框的影响,他们不会相互遮拦,当前浮动框会紧挨着之前的浮动框的左边界进行定位。 如果当前空间不足,则会换行,否则就会放置在之前浮动框下面. <div class="wrap"> <div class="class1"></div> <div class="class2"></div> <div class="class3"></div> <div class="class4"></div> </div>--> 3.浮动框与不同方向浮动框不可以重叠 解释:同一行中不同方向的浮动框不能有互相重叠的现象 <div class="wrap1"> <div class="class5"></div> <div class="class6"></div> <div class="class7"></div> <div class="class8"></div> </div> 4.浮动框的边界不能超出包含块的边界 </body> </html>
相关文章推荐
- HTML5学习_day05(8)--html之伪类元素选择器(伪元素)
- HTML5学习_day05(3)--html之float定义
- HTML5学习_day05(4)--html之float具体表现
- HTML5学习_day05(2)--html文档流和脱离文档流
- HTML5学习_day05(6)--html之布局中使用浮动带来的问题
- HTML学习笔记(五)_HTML5表单相关元素和属性
- HTML5学习_day05(7)--html之布局中使用浮动带来的问题
- HTML学习笔记(二)_HTML5常用元素与属性
- HTML5学习_day05(1)--html浮动之文档布局
- 史上最全html及html5的学习资料文档收集整理包括介绍和下载
- 第十五节 html5学习——表单元素
- HTML5学习笔记2012.12.28——元素标记的省略,具有boolean值的属性,省略引号
- HTML学习-3-元素
- html实例(学习各种table元素)
- html5学习笔记3-新增表单元素
- 让IE(包括IE6)支持HTML5元素方法–html5.js
- HTML入门学习 -- HTML5 视频与音频
- <转>Html5 学习系列(一)认识HTML5
- HTML学习笔记(三) HTML 元素
- (X)HTML Strict下块儿级和行内元素的嵌套规则