关于CSS的一些备忘

  1. 当元素设置为position: absolute的时候,元素的displayblock!
  2. 如果一个元素的定位属性设置成了:position: absolute后,没有设置left/top/right/bottom,并且其祖先元素全部都是非定位元素,它将在还是在当前的位置。
    参考segmentfault网站上面的搜索栏
    搜索栏.png

    定位.png

在这里我们看到绝对定位的时候,不设置left/top/right/bottom则默认left: 0;top: 0
absolute是一个相对比较独立的CSS属性,它的样式和行为表现不依赖其他的CSS属性就可以完成。因此,如果元素设置了定位属性为absolute绝对定位,并且没有设置left/top/right/bottom,那么可以将这种定位属性称为“无依赖绝对定位”,其本质就是"相对定位",特点仅仅是脱离文档流,不占据任何CSS流的尺寸空间了。

  1. z-index属性只有在position:relativeposition:absoluteposition:fixed参与的情况下才有作用。
  2. 绝对定位与浮动不能混用:这两个都是对一个block位置的控制,他们是是互斥的。一个是说用 top等属性确定他的位置,一个是说浮动到父元素的尽可能的最上,最右则。显示这是两个不同的位置,所以必然只有一个能生效。
  3. 关于position: absolutefloat的区别:
    什么都没有设置时图片与代码块之间的位置关系.png

    图片设置float:right时两者的位置关系:
    浮动时位置关系.png

    绝对定位时:
    绝对定位.png

    浮动+绝对定位时:
    浮动+绝对定位.png

    这里我们看到,在绝对定位和浮动+绝对定位的情况下我们都没有看到图片,其原因就是代码块把图片覆盖了,图片脱离文档流,导致其父元素失去其高度,下面的代码块就会紧跟其父元素的位置向上移动。另外浮动+绝对定位示例也印证了问题4,俩个着不能同用的问题,同用时float会失效。
    而单独浮动的时候,浮动是从该位置脱离出来,浮动到文档流的最上方,虽然脱离文档流,但是他紧随其父元素,并占位。
    与绝对定位的占位不同,浮动的占位使其具有display: inline-block的特性,而当为绝对定位元素设置z-index的时候我们看到,他们依然是覆盖关系。
    绝对定位+z-index.png
  4. 父元素text-aligin,子元素绝对定位,可以正常生效;但是将text-aligin和定位用到统一元素上不能生效。原因参考:解释为绝对定位的元素默认的宽度就是其内容的宽度,因而其内容不能再绝对定位的元素里设置水平位置。如果需要生效,则要有更大的容器包裹着他。
  5. white-space: nowrap;是针对p标签生效的属性,其含义是规定段落中的文本不换行。对于其他元素如divspan是无效的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。