css中关于盒子模型与层模型的理解与应用（四）

接css中关于盒子模型与层模型的理解与应用（三）

四，定位

定位属性有四个值：static、relative、absolute、fixed。

1)静态定位

默认的定位都是静态的—static。他们处在常规的文本流中进行堆叠。

2）相对定位

相对于自己原来的位置进行定位

3）绝对定位

可以看见之前占据的空间被“回收了”。绝对定位脱离了常规的文本流，他相对于顶级元素body在定位

4）固定定位

固定定位与绝对定位都是脱离了文本流，但是固定定位的上下文为窗口。
如下图：滚动窗口，第三段相对于浏览器的位置没有变。

5）定位上下文

普通包含：

内部绝对定位无视外部：

内部绝对定位，相对父亲的相对定位：

5，属性

块级元素：比如段落、标题、列表等，在浏览器中上下堆叠显示。
行内元素：比如 a 、 span 和 img ，在浏览器中左右并排显示，只有前一行没有空间
时才会显示到下一行。
行内块级元素： inline-block,拥有他们的特性，一般上面两个经常会转到这个状态

display 属性还有一个值none 。把该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。
与此相对的visibility属性，他有两个属性------visible(默认值)和hidden（设置后元素会隐藏，但会占据的页面空间仍然“虚位以待”。）