加了绝对定位会把行级元素变成块级元素么

怼怼
  • 37

给span加绝对定位

css

.shareBox span {
    width: 20px;
    height: 60px;
    background-color: #dedede;
    line-height: 20px;
    position: absolute;
    right: -20px;
    top: 70px;
}

效果

image.png

正常情况这些宽高应该是不生效的吧

回复
阅读 1.4k
2 个回答

这个现象被称为块级格式化上下文,即BFC(Block formatting context)。

常见的产生BFC的方式有:浮动元素(元素的 float 不是 none)、绝对定位元素( position 为 absolute 或 fixed)、行内块元素(display 为 inline-block)、overflow 计算值不为 visible 的块元素等。

更多可见MDN-块格式化上下文

  1. inline width不生效是因为width适用范围不包括non-replaced inline elements;
  2. absolute会生成块级格式化上下文,你去看一下它的display已经变成block了
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏