绝对定位(absolute):
1. 以浏览器左上角的为参考点设置位置。
2. 与浮动一样不占据空间位置。
3. 嵌套的盒子,父元素无定位,子元素绝对定位,子元素仍然参照浏览器。
4. 父元素绝对定位,子元素绝对定位,子元素以父元素为参考点。
5. 给行内元素绝对定位之后就转化为行内快了。
6. 可以设置z-index[调整元素的层叠顺序]值的范围是:0-999,值大的在上方。
相对定位(relative):
1. 非常自恋,它的定位参照的是它自己。
2. 与绝对定位相反它仍占据原来的位置也即不脱离标准流,非常的霸道。
3. 工作中最常使用的就是“子绝父相”,父盒子相对定位,子盒子绝对定位。然后设置子盒子的left,right,top,bottom的值,比如一些电商网站的精灵图定位。简而言之就是父盒子先定位好,其他元素不会抢占位置。
4. 行内元素相对定位后不会转化为行内块。
上文提到了,行内元素和行内块元素,那么二者的区别是什么呢?
html标签根据其显示模式分为三类:
- 块级标签
<div> <p> <h1><h6><ol><ul><dl><table><address><blockquote>
等。
特点: - 一个块元素独占一行。
- 元素的行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父元素的100%,除非设定一个宽度。
2.行内元素:<a> <span> <br> <i> <em> <strong> <q> <var> <code> <cite>
等。
特点: - 和其它元素都在一行上。
- 元素的高度以及顶部和底部边距不可设置。
- 元素的高度就是他所包含的图片或文字的宽度。
3.行内块:<img> <input>
等
特点: - 同时具备行内元素和块元素的优点。
小窍门:将行内元素转化为行内快可使用display:block
,反之display:inline
.最省事的就是直接写display:inline-block
.