学习定位模型小记

Posted 2020-09-04

CSS有3种基本的定位机制：普通文档流，浮动，绝对定位

普通文档流：除非专门指定，否则所有框都在普通流中定位，普通流中元素框的位置由元素在html中的位置决定。

用position进行定位：

static：position的默认属性，相当于没有对元素进行定位

相对定位：属于普通流定位模型的一种。如果对一个元素进行定位，它将出现在它所在位置上，然后通过设置垂直或水平位置，让这个元素相对于它的原始位置移动。

　　　　　在使用相对定位时，无论是否移动，元素都会占据原来的空间，因此移动元素会导致它覆盖其他框。

绝对定位：元素脱离文档流，不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样，绝对定位元素的位置是相对于已定位的父元素位置确定的。

　　　　　如果没有已经定位的父元素，父元素就是html或canvas。

　　　　　绝对定位的框可以从它的包含块向上（top）、下（bottom）、左（left）、右（right）移动。当一个元素设置绝对定位，但没有设置宽度，那么它的宽度

　　　　　会根据里面的内容而改变。缺点是，尺寸的任何改变都会导致绝对定位的框产生重叠，从而破坏布局。

fixed：绝对定位的一种，和绝对定位的区别是，固定定位的父元素是浏览器窗口。能通过设置位置使得固定定位过的元素一直在浏览器的固定位置。

z-index：当元素脱离文档流之后，会覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。

用浮动进行定位：

浮动：浮动元素脱离普通文档流，浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘。浮动产生的初衷是为了设置文字环绕效果。浮动元素不

　　　再影响其他文档流中的元素，但是会影响框中的文本内容，含有文本的行框会自动缩短，给浮动元素留出位置。要想阻止行框围绕在浮动元素的周围，可以对这些

　　　行框的元素进行清除浮动（clear属性）。clear：left，right，none，both。使用clear属性时，浏览器会在元素顶上添加足够的外边距，使元素的顶边缘垂直下

　　　降到浮动框下面，对元素进行清理实际上是为前面的浮动元素留出来垂直空间。这正好解决了absolute定位遇到的问题，垂直高度的改变不影响周围元素，破坏

　　   布局。

　　　小技巧：因为浮动元素不占据空间，所以容器不包围他们，添加一个进行清理的空元素可以迫使容器元素包围浮动元素。

用margin进行定位，参见：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html