定位概述

Posted 2020-08-21 党兴明

可视化格式模型：

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

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

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

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

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

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

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

定位：

相对定位：相对自己本来位置，原有位置不消失，会覆盖其他框；

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

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

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

IE6不支持，IE7bug很多，但可以通过js实现这个效果。（Jonathan Snook）

浮动：

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