【css】display与position

display属性

每个HTML元素都有一个默认的display值，根据这个元素的不同，默认的display value 可是是 block 或者 inline

1） Block-level Elements

<div>  <h1> - <h6> <p> <form> <header> <footer> <section> <ul> <li>

2） Inline Elements

<a> <span> <img>

3） display:none 和 visibility:hidden的区别?
visibility:hidden; 会保留元素隐藏前的位置，而display:none不会

position 属性

position 属性的可能值共有4个：static, relative, fixed, absolute

1）position: static
是html元素的默认position值，static的元素不会受top, bottom, left, and right (TBLR)的影响

2）position: relative
是相对于正常的位置，按照TBLR偏移，原来所占的空间仍然保留。

3）position: absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

A “positioned” element is one whose position is anything except static.
另外当父级有padding等属性时以content为标准

4）position:fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。