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

Created on 19 Jul 2019  ·  4Comments  ·  Source: haizlin/fe-interview

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

css

Most helpful comment

一个元素被设为绝对定位或者浮动后,其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

All 4 comments

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

一个元素被设为绝对定位或者浮动后,其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

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

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

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

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

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

Was this page helpful?
0 / 5 - 0 ratings