HTML5学习_day05(1)--html浮动之文档布局
2016-09-26 09:27
387 查看
文档布局的4种方式:
1.流式布局(自然布局)特点:没有任何修饰(没有定位float 定位 弹性)的布局,也就是元素在排版过程中,元素从上到下,从左到右的流式排列,遇块(块级元素)换行等。
2.浮动布局(float)
特点:给元素设置float属性后,脱离文档流,进行左右浮动,紧贴着父级框的左右框。此浮动元素流出来的位置,由后续非浮动元素进行填充。(例如:图片文字围绕 占用原来的空间 )
3.定位布局(position)
特点:定位分为相对定位,绝对定位,固定定位,也就是一个元素设置了定位属性,我们就可以通过left,top,right,bottom四个属性来去顶元素的排版位置。
4.弹性布局(flex)
特点:它使css3提出来的一种新的布局方式,该布局的目的是提供一种更加高效的方式来对容器中的条目进行布局,对齐和分配空间。
相关文章推荐
- HTML5学习_day05(6)--html之布局中使用浮动带来的问题
- HTML5学习_day05(7)--html之布局中使用浮动带来的问题
- HTML5学习_day05(3)--html之float定义
- HTML5学习_day05(8)--html之伪类元素选择器(伪元素)
- HTML5学习_day05(4)--html之float具体表现
- 史上最全html及html5的学习资料文档收集整理包括介绍和下载
- 史上最全html及html5的学习资料文档收集整理包括介绍和下载
- html5学习--js语句在html文档中的位置
- h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
- HTML网页开发 燕十八 第6课学习笔记-浮动布局
- H5学习之11(html中的浮动布局)
- H5学习之12(html中的使用浮动布局带来的问题和解决方法)
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- HTML5学习_day12(1)--html布局
- HTML5学习_day05(5)--html之float元素的规则
- HTML5学习_day05(2)--html文档流和脱离文档流
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性(常用新标签、新增input type属性值、常用新属性、多媒体标签)
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- 韩顺平_php从入门到精通_视频教程_第2讲_html运行原理②_html文件基本结构_html元素和属性_学习笔记_源代码图解_PPT文档整理
- CSS布局应用到XML文档和HTML文档