登录  /  注册

html中的定位position以及浮动float如何使用?

黄舟
发布: 2017-07-19 14:36:05
原创
1826人浏览过

语法:

position:static (静态定位) |  absolute (绝对定位) |  fixed (固定定位) |  relative  (相对定位)

属性参数:

static:静态定位,无特殊定位,对象遵循HTML定位规则(html的默认状态)

absolute:绝对定位,对象脱离文档流,需要使用 left、top、right、bottom等属性进行精确地定位。可以运用z-index属性进行层叠。(使用绝对定位时如果出现元素飘动,没有在你指定的位置上,可以在元素的父级元素上使用相对定位。“个人建议”)

relative:相对定位,对象不脱离文档流,无法像absolute一样进行层叠,但依然要使用 left、top、right、bottom等属性进行正常文档流中相对原来的对象位置进行移动,原位会被其他元素占据。

fixed:固定定位,脱离文档流,可以使元素在屏幕上保持固定位置,即使滚动条下拉元素位置也不会改变。

<p  style="border=“1px  solid red;position:absolute;top:150px;left:200px;">我是p111111</p>
登录后复制

p111111会向下移动150px、向右移动200px处

<p  style="border=“1px  solid red;position:absolute;bottom:50px;right:100px;">我是p222222</p>
登录后复制

  p222222会向移动到距离底部150px、距离右边框100px处

当你要做一个始终在页面右下角显示的模块时使用 position:fixed;bottom:50px;right:50px;可以使p在距离底部50px和右边框50px处显示且不管你的页面怎么改变,p一直会显示在你可视范围内的相同位置

z-index:100px;后面跟的像素越大p所在的层级越高

语法:

float:left | left | none;向右、向左或者 不使用(默认)

float:脱离文档流,浮动是相对于父级元素进行的浮动

<p  id="p1">
  <p  id="p2"></p>
</p>
登录后复制

如上:p1为p2的父级元素p2只能在p1里面进行浮动

浮动的一个经常使用的情形,就是水平导航条的运用。水平导航条有两种方式可以实现,只要将 li 标签的display属性改为行内样式,就可以让列表平铺,这是核心部分,但是在了解盒子模型我们可以知道,行内标签的 margin、padding对上下方向是无效的,这里只能让列表选项的左右拉长,上下是不会被控制的,块级标签上下才会被控制。

float也是简单的一些文字环绕图片效果的运用将图片和文字放入同一个p内然后给图片和p一个float:left | right;

<p   style="width:220px;height:300px;float:left;">
  <img   src=".."     style="max-width:90%"/ alt="html中的定位position以及浮动float如何使用?" >这里是文字654651进行图文混排以及文字环绕kj dsh gkjh kjh jb kjf bg kjs dh fkj gh kj sd hjf hk jk jsh kjg hk
</p>
登录后复制

 

以上就是html中的定位position以及浮动float如何使用?的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号