1个通俗化小故事告知你外溢掩藏(overflow:hidden)

2021-03-07 07:55 jianzhan

实际上看似不符合理的状况身后都会有其有效的解释。

大家了解,overflow特性值有这几种:


拷贝编码
编码以下:

visible:申明內容不容易被裁剪。例如內容将会被3D渲染到器皿外面。
hidden:申明內容将被裁剪,而且也甭想应用翻转条来查询裁剪掉的內容。
scroll:申明內容将被裁剪,但有将会出現翻转条来查询被裁剪掉的內容。翻转条出現的部位在inner border adge和outer padding adge之间。
auto:申明管理决策将依靠于顾客端,优先选择应用scroll。

W3C规范中指明:
一般1个盒子的內容是被限定在盒子界限以内的。但有时也会造成外溢,即一部分或所有內容跑到盒子界限以外。外溢将在考虑以下标准之1时出現:


拷贝编码
编码以下:

1. 1个不换行的行元素宽度超过了器皿盒子宽度。
2. 1个宽度固定不动的块元素放在了比它窄的器皿盒子内。
3. 1个元素的高宽比超过了器皿盒子的高宽比。
4. 1个子孙后代元素,由负边距值引发的一部分內容在盒子外界。
5. text-indent特性引发的行内元素在盒子的上下界限外。
6. 1个肯定精准定位的子孙后代元素,一部分內容在盒子外。但超过的一部分并不是总会被裁剪。子孙后代元素的內容就不容易被子孙后代元素和其包括块之间的先祖元素的overflow的设定所裁剪。

当外溢产生时,overflow特性承诺了器皿盒子是不是裁剪掉超过其内界限的一部分,而且决策是不是出現翻转条来浏览被裁剪掉的內容。它会危害到元素全部內容的裁剪,但有个列外状况,即上面第6条所提到的:元素的子孙后代元素的包括块(Containing blocks)是全部视窗(viewport)或是该元素的先祖元素,內容将不容易被裁剪。包括块是甚么呢?简易的说,便是能够决策1个元素部位和尺寸的块。一般1个元素的包括块由离它近期的块级先祖元素的內容界限决策。但当元素被设定成肯定精准定位时,包括块由近期的position并不是static的先祖元素决策。

看起来有点绕,让大家来听个简易的故事吧。

html片断:


拷贝编码
编码以下:

<div class=”ocean”>
<div class=”land”>
<p class=”joke”>
Mrs. Smith couldn’t get her husband to exercise.
She asked Mrs. Jones what she should do. Jones replied,
“Tape the remote control between his toes.”
</p>
</div>
</div>

style:


拷贝编码
编码以下:

div.ocean{
position:relative;
background-color:blue;
width:120px;
height:120px;
}
div.land{
width:100px;
height:100px;
background-color:red;
overflow:hidden;
}
p.joke{
width:150px;
height:110px;
margin-top:30px;
margin-left:30px;
background-color:yellow;
}

上面的编码讲述的是这样1个故事:蓝色的海洋里有块鲜红色的大地,鲜红色大地内有个黄色的段子。因为段子款式的设定,它的一部分內容超过了鲜红色大地。为防止黄色段子污染到蓝色海洋,鲜红色大地警醒的为自身设定了overflow:hidden;这样超过大地的黄色一部分就被剪掉了,大家看到的将是这样1派和睦景色,如图1:

图1:和睦的星球

假如事情全是这样有理井然有序,天地可不就安宁了。不久,黄色段子感觉凭自身的赫赫有名身份不应该受鲜红色大地的操纵,因而煞费苦心将自身变改为了肯定精准定位,1下子就解决了大地的拘束,如图2:


拷贝编码
编码以下:

p.joke{
position:absolute;
width:150px;
height:110px;
top:30px;
left:30px;
background-color:yellow;
}

图2:猖狂的段子

为何会这样呢?这就是造就了上面提到过的第6个标准。当黄色段子变为position:absolute时,它的包括块已由原先的鲜红色大地的內容界限升級到了离它近期的position并不是static的蓝色海洋了。而海洋此时对此还1没有知呢,本身沒有设定overflow:hidden特性,致使黄色段子本该被剪裁的一部分所有可见,不但污染到海洋,还危害到全部星球,状况万分十万火急啊。即便这时候海洋设定上overflow:hidden,也只能将超过蓝色海洋的黄色一部分裁剪,就像图3,海洋此时是手脚无措啊。

图3:无辜的海洋

俗话说的好,魔高1尺道高1丈,解铃还须系铃人。鲜红色大地怎就甘愿段子跑出去呢。如何说大地终究是段子的先祖元素,如何能甘愿由着段子无法无天呢。因而,大地历尽千辛,寻得秘籍,在自身的款式中加上position:relative特性,将段子的包括块又改为了大地来决策。这下段子就乖乖的被关起来了。星球看起来又返回了最开始的情况。


拷贝编码
编码以下:

div.ocean{
position:relative;
background-color:blue;
width:120px;
height:120px;
}
div.land{
position:relative;
width:100px;
height:100px;
background-color:red;
overflow:hidden;
}
p.joke{
position:absolute;
width:150px;
height:110px;
top:30px;
left:30px;
background-color:yellow;
}

因此说,hidden并沒有无效,而是有将会大家遇到的状况正好考虑了第6个标准,使得元素的包括块产生了转变。上面的故事中,也提到了在遇到‘hidden’无效的状况时,能够依据必须来更改元素的包括块来做到公平正义的目地。