H5中的定位


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来H5中的定位,H5中定位的注意事项有哪些,下面就是实战案例,一起来看一下。

一.定位流分类

1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位

二.什么是相对定位?

相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;

相对定位注意点

1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
2.在相对定位中同一个方向上的定位属性只能使用一个<a>(也就是使用了left,就不要使用right;使用了top,就不要使用bottom)</a>.
3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局,<a>(margin/padding会加给定位之前的盒子位置)</a>

相对定位应用场景

1.用于对元素进行微调
2.配合后面学习的绝对定位来使用

1

2

3

4

5

6

7

.box2{

     background-color: green;

     position: relative; //相对定位

     top: 20px;

     left: 20px;

     margin-top: 20px;//会加在定位之前的位置上

 }

三. 什么是绝对定位?

绝对定位就是相对于body来定位
position: absolute;

注意点

1绝对定位的元素是脱离标准流的
2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

1

2

3

4

5

6

.box2{

            background-color: green;

            position: absolute; //绝对定位

            left: 0;

            bottom: 0; //在body的左下角

        }

四. 绝对定位参考点

规律

1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

2.1只要是这个绝对定位元素的祖先元素都可以

2.2指的定位流是指绝对定位/相对定位/固定定位

2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

五. 注意点

1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点;

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

网页的布局方式之清除浮动

HTML与CSS的盒子模型

以上就是H5中的定位的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

canvas波浪效果的实现代码

HTML5编码怎么设置

HTML5实现分层屏幕适配

HTML5不常用标签可以怎么使用?

用js+HTML5实现的小游戏-- 捕鱼达人游戏

讲讲HTML5中被废弃的标签

HTML5中<template>标签的详细介绍(图文)

HTML5网络拓扑图性能优化的图文详解

如何提取图片的主题色?

html中文本标签,超链接标签以及图像标签的简单介绍

更多相关阅读请进入《HTML5》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...