在进行页面布局时,经常会遇到需要设置固定高度的元素。然而,在某些情况下,我们会发现设置高度并没有任何效果,这种情况就称为"脱标"。
什么是"脱标"?当一个元素处于文档流之外,不再按照正常的排列方式进行布局时,我们就称该元素"脱标"。这通常是由于使用了position属性或者float属性导致的。在这种情况下,无论我们设置多少高度,元素都会保持原有的高度。
.box { position: absolute; top: 0; left: 0; height: 200px; width: 200px; }
如上示例所示,我们设置一个class为.box的定位元素,高度和宽度都为200px。然而,当我们设置这个元素的position为absolute时,它就会脱离文档流,导致height属性无效。
那么,脱标后我们还能不能设置高度呢?当然可以!方法就是使用padding或者border属性。
.box { position: absolute; top: 0; left: 0; border: 1px solid #000; height: calc(100% - 2px); width: calc(100% - 2px); }
如上示例所示,我们在.box元素上设置1px的边框,然后通过calc()来计算高度和宽度,减去2px的边框宽度即可实现高度设置。
对于使用float属性脱标的元素,我们可以设置.clearfix来清除浮动,以使元素重新加入文档流,从而可以正常设置高度。
.clearfix:after { content: ""; display: block; clear: both; }
综上所述,虽然在脱标状态下设置高度无效,但我们可以通过设置padding、border或使用clearfix来实现高度的设置。