总结之浮动(页面3大布局之一)
来源:互联网 发布:朝鲜姓氏 知乎 编辑:程序博客网 时间:2024/05/20 16:12
好了,一周2篇文章。本周第一篇。
前端页面重要的是好看,不好看的页面都是耍流氓。
前端页面的布局有3个。普通文档流布局,浮动布局和定位布局。
1 普通文档流布局
既是页面元素按照其本身的特性进行纵向铺展。 1每一个块元素独占一行(width:100%), 22个块级元素不能在一行; 3页面布局的基础; 4前面的元素消失后(不占位置:display为none不是 visibility: hidden;隐藏后还占着位置)后续元素自动填补位置。 这算是一个动画特效。 5在页面框架布局中最常用和基础的。
如下图:
隐藏黑色div后,蓝色div自动填补上去。
如下图:
2 浮动布局
浮动布局是通过给元素添加float属性实现的。 1 float属性。必须! float:left/right/inherit/none; 2 浮动元素的特性,一个挨着一个,就想行内元素 一样,不管元素是什么样的(行内块还是块和行内元素)。 像普通文档流一样占个位置,使得父元素被其撑开。 就是普通文档内容会环绕它比如文字和图片。 4清除浮动。有浮动就一定有清除浮动。 常见的清除浮动方式: 1 在最后一个浮动元素后面添加<br clear='all'/>; 2 在最后一个浮动元素添加如下代码:.after:after{clear: both;content: '';font-size: 0;height: 0;line-height: 0;visibility: hidden;overflow: hidden; } 使用:after伪元素,使得元素的后面不能有浮动元素。 5浮动元素能撑起浮动元素,也就是说只要父元素没有 撑起来,当然普通文档流元素也能撑起来。
如下图:
浮动的应用场景:
当父元素没有特别指定宽高时,或者父元素的大小需要内容撑起来时,用浮动比较好,因为浮动的元素会最大可能的使父元素的大小跟子元素占的大小一样。而指定了大小的父元素,其子元素应该用定位比较好。因为当父元素大小确定时,子元素的位置就相对与父元素的位置也确定了,它只会跟着父元素走,而与其他元素无关。具体细节后面再讲。
3 特殊定位布局:
特殊定位:
position:relative/static/absolute/fixed/inherit;
最牛也是最难的布局方式。用好了,就没问题,没用好就没用好!
成也萧何败也萧何!
0 0
- 总结之浮动(页面3大布局之一)
- CSS之页面布局之一(浮动布局)
- html学习笔记(2)——页面布局之浮动布局
- 浮动布局的方法(总结)
- 页面布局和元素浮动
- 浮动布局之------margin
- 清除浮动大总结
- h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- Android之页面5大布局
- CSS页面布局基础3——元素浮动
- 浮动之名人名言页面
- css之position,float浮动叠加大总结
- Div+CSS布局入门教程之三:页面顶部制作之一
- DIV+CSS基础教程:浮动(float)页面布局
- 消除浮动》》页面局部布局详解
- 盒模型+浮动做页面布局
- CSS布局之流体浮动布局
- 虚拟按键
- java日期时间的处理与比较
- PAT_A 1100. Mars Numbers (20)
- 完全数
- 有关HTML
- 总结之浮动(页面3大布局之一)
- 成长之路——InfoQ视频心得笔记
- python字符串处理函数
- 如何识别图像边缘?
- 导入带公式excel的问题
- 第4章 注重实效的偏执
- React-Native加载网络图片的问题
- Android dalvik挂钩-Xposed框架如何实现注入
- STM32F103/<5>调试口被失能的情况