Skip to content

[css] 第95天 当一个元素被设置为浮动后,它的display值变为什么呢? #959

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第95天 当一个元素被设置为浮动后,它的display值变为什么呢?

Activity

l8888888

l8888888 commented on Jul 20, 2019

@l8888888

凡是position:absolute或float:left/right,浏览器自动把元素转化为inline-block;

xiekailian

xiekailian commented on Jul 20, 2019

@xiekailian

一个元素被设为绝对定位或者浮动后,其display计算值就变为了block,尽管其表现形式和inline-block类似——包裹内部元素且不超出包含块的特性。按照如下方式在控制台尝试可验证:
var span = document.createElement('span');
document.body.appendChild(span);
console.log('1.' + window.getComputedStyle(span).display);
span.style.float = 'left';
console.log('2.' + window.getComputedStyle(span).display);
输出:
1.inline
2.block

Konata9

Konata9 commented on Aug 20, 2019

@Konata9

div 本身 displayblock 的元素在 float 后,disaplay 仍然为 block
span 本身 displayinline 的元素在 float 后,display 也为 block

可以使用 window.getgetComputedStyle 方法来获取元素的样式。
CodePen 地址:https://codepen.io/Konata9/pen/NWKRway

hou499

hou499 commented on Sep 17, 2020

@hou499

[css] 第52天 要是position跟display、overflow、float这些特性相互叠加后会怎么样? #203

如果这个元素本身没有设置display,那么的确是如前面答案所说,但是如果元素原本已经设置了display,那就不一定是block

https://codepen.io/hou499/pen/ZEWMoxq

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@xiekailian@hou499@l8888888

        Issue actions

          [css] 第95天 当一个元素被设置为浮动后,它的display值变为什么呢? · Issue #959 · haizlin/fe-interview