定位概述

Posted 党兴明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定位概述相关的知识,希望对你有一定的参考价值。

可视化格式模型:

css中有三种基本的定位机制:普通流、浮动、绝对定位。

块级元素:从上到下一个一个垂直排列,框之间的垂直距离由垂直外边距计算。(此处注意外边距叠加)

行内元素:可以使用水平内边距、边框、和外边距调整他们的水平间距,但是垂直方向上的这三个不起作用,同样的设置显示高度也不起作用。只能通过行高来增加框的高度,只能如此。

*:两者之间可以通过display来切换。inline-block可以让块元素像水平元素一样水平排列,类似浮动效果,但会有个问题,以后我们详谈。

匿名块框:大多数框由显示定义的元素确定,但将文本添加到一个块级元素的开头时,即使没有把这些文本定义为块级元素,它也会被当块级元素对待。

<div>
    some text
    <span>da</span>
    <p>hello world</p>
</div>

另外块级元素内的文本行也会产生这种情况。如果有包含三行文本的段落,每行文本都会形成一个匿名行框。

定位:

相对定位:相对自己本来位置,原有位置不消失,会覆盖其他框;

绝对定位:相对已经定位了的父元素进行定位,脱离了文档流,会覆盖其他元素。(通过配合相对定位可以实现的效果很多,父相对定位,里边的子元素绝对定位产生下拉菜单的应用)

*:相对于已经相对定位的祖先元素进行绝对定位,IE6和IE5.5中有个bug,如果相对定位的框没有设置尺寸,会产生错误,解决办法另开。最简单的是为相对定位的设置高度和宽度。

固定定位:固定定位是绝对定位的一种,区别是固定的包含块是视口,可以讲元素总是出现在窗口的固定位置。

IE6不支持,IE7bug很多,但可以通过js实现这个效果。(Jonathan Snook)

浮动:

最后一种可视化格式模型是浮动模型,我们单开浮动一节说

以上是关于定位概述的主要内容,如果未能解决你的问题,请参考以下文章

Selenium Xpath元素无法定位 NoSuchElementException: Message: no such element: Unable to locate element(代码片段

css常用代码片段 (更新中)

Reactreact概述组件事件

GIT04_分支概述查看创建切换合并分支代码冲突如何定位解决

分析定位占用CPU资源高的JVM线程

[NTUSTISC pwn LAB 7]Return to libc实验(puts泄露libc中gadget片段定位)