CSS中的死循環(huán)是什么

今天小編給大家分享一下CSS中的死循環(huán)是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了成華免費(fèi)建站歡迎大家使用！

一、從為何height:100%無(wú)效的回答說(shuō)起

大家應(yīng)該都知道，如果元素沒(méi)有格式化的高度值，子元素的height百分比高度是不起作用的，常見(jiàn)的就是height:100%無(wú)效，而寬度就沒(méi)有此問(wèn)題，所以，新人經(jīng)常會(huì)提出的一個(gè)問(wèn)題是：“為何我的div設(shè)置了height:100%卻沒(méi)有效果？”

不知道大家有沒(méi)有思考過(guò)這樣一個(gè)問(wèn)題。

然后，有同行就提出了這么一個(gè)看似很合理的解釋?zhuān)褪牵凹偃绺冈豩eight:auto且沒(méi)有其他格式化高度，子元素支持height:100%，則很可能會(huì)出現(xiàn)高度死循環(huán)”。

什么意思呢？

例如：一個(gè)<div>元素里面有一張vertical-align為bottom同時(shí)高度為192像素的圖片，此時(shí)，該<div>高度就是192像素，假設(shè)此時(shí)，插入一個(gè)子元素，高度設(shè)為100%，如果此時(shí)height:100%可以計(jì)算，則子元素應(yīng)該也是192像素。但是啊但是，我們的父元素height值是auto，豈不是現(xiàn)在高度要從原來(lái)的192像素變成384像素，然后height:100%的子元素高度又要變成384像素，父元素高度又雙倍……死循環(huán)了！

實(shí)際上，這種解釋是錯(cuò)誤的，大家千萬(wàn)別被誤導(dǎo)。

證據(jù)就是寬度也存在類(lèi)似場(chǎng)景，但并沒(méi)有死循環(huán)。例如下面這個(gè)例子，父元素采用“最大寬度”，然后有個(gè)inline-block子元素寬度100%：

<div class="box">
  <img src="1.jpg">
  <span class="text">紅色背景是父級(jí)</span>
</div>

.box {
  display: inline-block;
  white-space: nowrap;
  background-color: #cd0000;
}
.text {
  display: inline-block;
  width: 100%;
  background-color: #34538b;
  color: #fff;
}

如果按照上面“高度死循環(huán)”的解釋?zhuān)@里也應(yīng)該“寬度死循環(huán)”，因?yàn)楹竺娴?code>inline-block元素按照我們的理解應(yīng)該會(huì)讓父元素的寬度進(jìn)一步變大。但是，實(shí)際上，并沒(méi)有，寬度范圍可能超出你的預(yù)期：

父元素的寬度就是圖片加文字內(nèi)容的寬度之和。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：寬度死循環(huán)不存在demo

二、為什么不會(huì)死循環(huán)

這需要了解瀏覽器渲染的基本原理。首先，先下載文檔內(nèi)容，加載頭部的樣式資源（如果有），然后按照從上而下，自外而內(nèi)的順序渲染DOM內(nèi)容。套用本例就是，先渲染父元素，后渲染子元素，是有個(gè)先后順序的。因此當(dāng)渲染到父元素的時(shí)候，子元素的width:100%并沒(méi)有渲染，所以，寬度就是圖片加文字內(nèi)容的寬度；等渲染到文字這個(gè)子元素的時(shí)候，父元素寬度已經(jīng)固定，此時(shí)的width:100%就是已經(jīng)固定好的父元素的寬度，寬度不夠怎么辦？溢出就好了，overflow屬性就是為此而生的。

同樣的道理，如果height支持任意元素100%，也是不會(huì)死循環(huán)的，和寬度類(lèi)似，靜態(tài)渲染，一次到位。

這就引申出另外一個(gè)問(wèn)題，父選擇器，大家有沒(méi)有想過(guò)如果CSS支持了父選擇器，會(huì)有什么后果？

后果之一，就是原先的一次渲染被破壞，子元素能夠影響父元素的渲染，于是乎，“死循環(huán)”開(kāi)始了，頁(yè)面渲染會(huì)出現(xiàn)各種各樣的死循環(huán)，現(xiàn)有的很多CSS規(guī)則會(huì)被顛覆，無(wú)限寬度反復(fù)渲染等問(wèn)題就會(huì)出現(xiàn)。這就是為什么父選擇器呼聲那么高，卻遲遲不支持的原因。

其實(shí)，在CSS中，不會(huì)死循環(huán)的例子還有很多，我再舉一個(gè)很有意思的！

三、CSS padding百分比、滾動(dòng)條與“死循環(huán)”

CSS的padding屬性值如果是百分比值，則無(wú)論是水平方向還是垂直方向都相對(duì)于寬度計(jì)算，這就埋下了一個(gè)看似會(huì)“死循環(huán)”的隱患，我們直接看一個(gè)例子。

一個(gè)div有如下CSS：

.box {
  width: 200px;
  height: 199px;
  overflow: auto;
}
.child {
  padding: 50%;
}

容器寬200px高199px，子元素padding:50%，則此時(shí)，子元素的寬高應(yīng)該都是200px，但是，如果高度是200px，父元素就會(huì)出現(xiàn)滾動(dòng)條，因?yàn)楦冈馗叨?code>199px不足200px，但是，父元素出現(xiàn)滾動(dòng)條，父元素的content box的寬度就要減去滾動(dòng)條的寬度，例如window 7下都是17像素，此時(shí)，子元素自然寬高也要隨之降低，應(yīng)該是183px，但是，變成183px后高度又小于了父元素的199px，滾動(dòng)條又會(huì)消失，子元素寬度又回到200px，于是，一個(gè)看上去的死循環(huán)開(kāi)始了……

但是，實(shí)際上，最終渲染是一次性的，如果父子元素分別給個(gè)背景色，則結(jié)果如下：

大家就見(jiàn)到了上圖所示的“神奇的”一幕，也就是padding:50%元素的寬度居然不是父元素的content box寬度。

結(jié)果，父元素寬度還是原來(lái)的200px，但是，子元素卻是183px，右側(cè)和下方都留了看上去不能理解的空白間距。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：CSS padding百分比值“死循環(huán)”不存在demo

這就是CSS的一次渲染機(jī)制造成的效果。

這個(gè)例子也進(jìn)一步證明了：CSS中，如果單純是靜態(tài)渲染，是沒(méi)有死循環(huán)這種說(shuō)說(shuō)法的！

再如我們CSS :hover某元素，讓其到遠(yuǎn)離鼠標(biāo)的地方，按照道理，遠(yuǎn)離了，應(yīng)該不執(zhí)行:hover渲染要回到原地，實(shí)際上，遠(yuǎn)離了就遠(yuǎn)離，不會(huì)不斷執(zhí)行渲染的。

四、CSS中的無(wú)限循環(huán)

實(shí)際上，CSS中是有與“死循環(huán)”相關(guān)的關(guān)鍵字的，叫做infinite，英菲尼迪，無(wú)限的意思，出現(xiàn)在CSS3 animation中，可以讓動(dòng)畫(huà)無(wú)限循環(huán)，但是，“無(wú)限循環(huán)”并不等同于“死循環(huán)”。

以上就是“CSS中的死循環(huán)是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：CSS中的死循環(huán)是什么
文章起源：http://muchs.cn/article12/jchogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、App開(kāi)發(fā)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)