第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