position 属性值:relative 与 absolute 区别

  • absolute 能让元素 inline-block 化:
    例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。

  • float 可以 inline-block 化元素

  • float 的破坏性:使高度塌陷
    absolute 的破坏性:使高度和宽度都塌陷

  • absolute属性的
    破坏性:高宽占据空间为0的特性,
    定位性:借助left/top等属性的定位

  • 少用absolute,常见absolute布局的替代实现方案:

  1. 使用margin代替
  • 覆盖定位一般都离不开absolute属性

  • opacity属性的半透明效果不仅会影响到当前元素,所有的子元素也会跟着半透明
    使用opacity属性或是IE filter半透明滤镜会让子元素跟着半透明。

  • 半透明的纯色背景,不使用opacity,替代方案:使用 CSS3 rgba

    background-color: rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);

现代浏览器使用CSS3 rgba实现半透明背景色,IE浏览器使用渐变滤镜实现半透明。

  • 把绝对定位元素直接放在body标签下,才能最大限度的发挥绝对定位元素的才能。

  • 实现两栏等高布局的方法:

  1. display:table-cell
  2. position:absolute
  • position:absolute的元素无宽度,无高度。

  • 绝对定位属性的元素具有包裹性,等同于没有高度与宽度的inline-block元素。

  • inline-block化的元素有三大特性:包裹性;高宽可定义;图文混排。

  • 浮动元素有“无高度”特性

  • 将需要绝对定位的元素单独放在relative属性的标签下,于是,relative相对定位就不会影响任何其他元素,仅仅是其内部的绝对定位元素。

  1. absolute 适合用于元素隐藏;
    absolute 可以实现等高布局;
    少用absolute,可以用 margin 代替。
    absolute 元素比较适合放在 body 内。
  2. relative 的元素,设置偏移时,其原位置保留;
    absolute 定位,相对于 static 定位以外的第一个父元素进行定位;

posted on 2017-07-04 10:57  cag2050  阅读(258)  评论(0编辑  收藏  举报

导航