第95天 当一个元素被设置为浮动后,它的display值变为什么呢?
凡是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 本身 display 为 block 的元素在 float 后,disaplay 仍然为 block。
如 span 本身 display 为 inline 的元素在 float 后,display 也为 block。
可以使用 window.getgetComputedStyle 方法来获取元素的样式。
CodePen 地址:https://codepen.io/Konata9/pen/NWKRway
[css] 第52天 要是position跟display、overflow、float这些特性相互叠加后会怎么样? #203
如果这个元素本身没有设置display,那么的确是如前面答案所说,但是如果元素原本已经设置了display,那就不一定是block了
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