h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
2016-12-23 21:37
711 查看
页面文档布局的4种方式
1.流式布局(又称自然布局)特点:没有任何修饰的布局,野菊是元素在排版过程中,元素从上到下,从左到右的流式排列,遇到块级标签换行等
2.浮动布局(float)
http://blog.csdn.net/qq_36423639/article/details/53856500
特点:给元素设置浮动(float)属性后,元素脱离文档流,进行左右浮动,紧贴着父级元素的左右框。此浮动以按时留出来的位置,由后面的非浮动元素进行填充
3.定位布局(position)
特点:定位分为相对定位,绝对定位和固定定位,也就是给元素设置了一个位置属性,我们可以通过left,top,bottom,right四个属性来确定元素的一个排版位置
4.弹性布局(flex)
特点:它是css3提出来的一种新的布局方式,该布局的目的是提供一中更加高效的方式来对容器中的条目进行布局,对齐和分配空间
文本流与非文本流
1.什么是文本流解释:将窗体自上而下分成一行行,并在每一行中按从左到右的顺序来进行排放元素,这个我们称之为文档流
2.什么是脱离文档流
解释:将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在进行定位
下面有三种使元素脱离文档流的属性方法
1.浮动
2.绝定定位
3.固定定位
(注意:在IE中浮动也存在与文档流中)
相关文章推荐
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- H5学习之12(html中的使用浮动布局带来的问题和解决方法)
- H5学习之11(html中的浮动布局)
- CSS分栏布局的方法:绝对定位和浮动
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(8)--还原页面布局的早期版本
- 一步步学习微软InfoPath2010和SP2010--第十三章节--SharePoint视图和仪表板(10)--仪表板页面和内容查询Web部件
- CSS分栏布局的方法:绝对定位和浮动
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(7)--批准页面布局
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(8)--还原页面布局的早期版本
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(5)--修改页面布局
- 页面布局中常用的清除浮动的方法
- GET方法获得html页面内容
- 用Request方法从页面得到Html内容…
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(9)--分离和重新关联页面布局
- 利用定位解决一个HTML页面奇怪的布局兼容性问题
- phpcms V9 专题的内容页面生成的html目录太深附最新的修改方法
- 对于用户上传不规划Html而导致页面布局错乱的一简单解决方法
- 网站上的页面元素 Meta标签-关键字,描述,机器人和辅助功能标签页标题内容-定位整个副本的关键字的内容和支付链接-连接结构,ALT标签,文本链接的话和标题,页面上的各主要部分的关键字密度,HTML有
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性