前端学习_05.浮动与定位
来源:互联网 发布:图像分析软件 编辑:程序博客网 时间:2024/06/06 20:04
浮动与定位
浮动
- a)浮动
i.定义:元素脱离文档标准流,不受文档格式的约束,漂浮到漂浮层(1)脱标方式:浮动、固定/绝对定位
ii.浮动带来的问题
(2)浮动:表示元素脱离标准流后,按流式布局方式排列元素(1)不同区域的浮动元素同行贴边
(2)浮动子元素不能撑开父容器的高度 - b)浮动清除
i.通过设置overflow属性清除浮动(hidden)
ii.通过设置clear属性清除浮动
iii.细节注意:float元素浮动方式(1)找上一个元素,上一个元素如果没有浮动呢,则贴上个元素的底边
iv.clear:指的是不允许当前清除浮动元素左右两边存在浮动元素
(2)如果上一个元素有浮动,则会贴上一个元素的左右两边(1)清除浮动,不能让其他元素移动
v.清除浮动,让父元素有高度
(2)只能做到让浮动元素不在一行(1)父盒子的高度无法撑开
(2)父盒子背景无法显示
(3)给父盒子设置一个固定高度
(4)给父盒子设置overflow:hidden,起到清除浮动的功能
(5)clear属性来清除
定位
- a)定位
i.定义:对当前标签对象进行定位操作,属性规定元素的定位类型(1)取值范围:静态(static),相对(relative),绝对(absolute)、固定(fixed)
ii.relative:相对定位
(2)css四个属性(top、left、right、bottom)只有在设置了position值为relative、absolute、fixed的情况下才有效。(1)通过top、left、bottom、right来设置元素的新位置偏移(相对于当前位置)
iii.fixed:固定定位
(2)相对定位的元素并没有脱离标准文档流,对原来标准流中的元素依然受影响(1)通过top、left、bottom、right来设置元素的新位置偏移(相对于浏览器视窗)
vi.absolute:绝对定位
(2)固对定位的元素脱离标准文档流,不受文档流约束(1)通过top、left、bottom、right来设置元素的新位置偏移(有以下两种情况)
v.如果子元素是绝对定位,一般父元素需要设置为相对/固定/绝对定位。
(2)如果绝对定位的所有父元素都没有定位,则会相对于页面偏移
(3)如果绝对定位的父元素有定位,则会相对于该父元素偏移
(4)固对定位的元素脱离标准文档流,不受文档流约束
z-index(元素覆盖层级关系)
- a)z-index
i.定义:设置当前page中元素的层叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(1)z-index只对设置了position的元素生效(static除外)
(2)随父性:父元素的z-index值,会影响子元素的重叠效果
(3)如果两个定位元素重叠,没有指定z-index,最后定位在HTML代码中的元素将被显示在最前面。
阅读全文
0 0
- 前端学习_05.浮动与定位
- CSS学习笔记10-浮动与定位
- 浮动定位与清理浮动
- 浮动与定位,浮动定位(html5技术)
- CSS 定位与浮动
- div+定位与浮动
- 定位 与浮动
- 浮动与定位
- CSS定位与浮动
- CSS浮动与定位
- CSS定位与浮动
- 定位与浮动
- css浮动与定位
- 浮动与定位
- html浮动与定位
- html定位与浮动
- 06_05.固定定位
- css(三)---定位与浮动的学习
- Struts2和struts1的比较
- 软件工程课程实验报告:课程总结
- 浅谈js函数继承模式之二:借用模式
- Redis学习-5:Redis的持久化(结束)
- 图片上传 啊
- 前端学习_05.浮动与定位
- Spring MVC 拦截器
- 定义自动变量
- 索引
- Java 从入门到精通 笔记一
- Retrofit基本用法和流程分析
- 关于java接口与多态、继承的思考
- “互联网+政务”背景下我国政府形象塑造研究
- SpringBoot框架与短信解决方案