hmtl 中的定位

1.绝对定位:

position:sbsolute;

作用:将元素从文档流中拖出来,然后使用 left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

若不存在这样的包含块,则相对于Body元素,即相对于浏览器窗口。

2.相对定位:

position:relative;

作用:通过 left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程,是首先按(static)方式生成一个

元素。并且元素层一样浮动起来,然后相对于以前的位置移动,偏移的方向和幅度由left,right,top,bottom属性确定,偏移前的

位置保留不变。

3.相对定位与绝对定位的组合使用:

参照定位元素必需是相对定位元素的前辈元素。参照定位的元素必需加入position:relative。定位元素加入 position:sbsolute,可以

用top,bottom,left,right进行定位。

HTML文档流解释:
      HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.
      内联是在水平方向上一个拦一个元素排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度.
     块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中,
     内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.
 
时间: 2024-08-26 05:21:25

hmtl 中的定位的相关文章

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

Eclipse中快速定位

Eclipse中快速定位 选中项目,ctrl+h 一.目标 查找如下的页面属于哪个activity 二.步骤 1.查找关键字 上述页面中"点我"两个字比较显眼,我们可以去android项目中搜索出现"点我"两个关键字的位置 2.搜索 选中项目.ctrl+h 定位 点进去后出现 用同样的方法在button出现的位置,因为button肯定会被layout引用,layout又会被activity引用 找button之后的结果,再用同样方法找btn_openActivity

人工智能领域中声源定位的研究与发展------第一章 绪论

1.1 引言 在人工智能领域中,听觉与视觉相比,仍旧处在一个初期阶段的研究课题.随着时代的发展,听觉已经成为人工智能领域中重要的研究课题.它是智能机器人的重要标志之一,也是实现人机交互,与环境交互的重要手段. 在之前机器人的导航主要使用测距传感器(如声纳),而跟踪和定位主要靠视觉.这种形式在视觉场景内被广泛作为定位目标的方式.但是像人和大部分动物那样,视觉场被限制在小于180度的范围内.在真实世界中,听觉能带来360度的"听觉场景".它能定位不在视觉场景内的声音目标,即定位由物体遮挡造

css中的定位

上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;    :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性). b.相对定位  position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来. c.绝对定位  position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不

3.6 盒子在标准流中的定位原则

如果要精确地控制盒子的位置,就必须对margin有更深入的了解.padding只存在于一个盒子内部.所以通常它不会涉及与其他盒子之间的关系和相互影响的问题.margin则用于调整不同的盒子之间的位置关系,因此必须要对margin在不同情况下的性质有非常深入的了解. 一.实验1——行内元素之间的水平margin 这里来看两个块并排的情况,如图1所示. 图1 行内元素之间的margin 当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left,

安卓中实现定位功能

大家好,今天我们讲一下比较热门的定位服务,闲话少叙直奔主题.因为是使用高德地图所以首先咱们就得先在高德开发平台上注册一个账号,具体注册流程在这里就不一一赘诉了,下面就讲一下再注册成功之后如何申请key,要申请key就得需要发布版NAS1码与测试版NAS1码以及工程的包地址,下面就讲一下如何获取NAS1码. 第一步:申请NAS1 1.若是想获得发布版的NAS1码,就得先把你的工程打包,打包成功后你就会获得一个以.jsk为后缀名的文件,打包的时候你会设置一个密码,一会用到这个文件的储存路径以及你设置

Python历史以及Python在编程语言中的定位

提及阿姆斯特丹你可以联想到郁金香,也可以联想到关于荷兰的一些东东,当然你如果是计算机爱好一族的话,你就一定会关心Python历史,以下就有关于Python历史的介绍. AD: 以本人的观点看来,Python这种语言是非常优美和强大在实际的应用中,是由专门为非专业程序员设计的计算机语言,而拥有很优美的语言Python为什么会用Python命名呢?如果你想对其有所了解,你也不妨看看关于Python历史的介绍. Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹

雅思阅读中的定位词

       北京新航道雅思频道为各位考生整理了如何找到雅思阅读中的定位词,供考生们参考使用. 雅思阅读中定位词如何选择?雅思阅读考试的核心就是信息的获取能力,特别是雅思阅读定位词的抓取能力,而在这个过程中雅思阅读定位词无疑扮演着 非常重要的一个角色,但往往很多同学也说到"这些雅思阅读技巧都知道,但就是抓不住关键的信息",这主要是因为雅思阅读考试定位词越来越多多变.越来越具 有欺骗性造成的,那么雅思阅读考试定位词如何抓呢? 雅思阅读定位词★ 雅思定位词在文章中出现的第一种也是最常见的一

selenium中元素定位的常用方法

一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单,通过id一般可以得到一个唯一的定位,其他五种要注意元素是否唯一,如果有多个,返回的是匹配的第一个元素.下面详细讲解一下xpath和cssSelector定位. 二.xpath定位 1.通过绝对路径定位 dr.findElement(By.xpath("/html/body/div[2]/div/di