什么是死循環(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ò)誤的，大家不要被誤導(dǎo)了！！

例子1:

但是我們發(fā)現(xià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)。這就是為什么父選擇器呼聲那么高，卻遲遲不支持的原因。

例子2:

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

因?yàn)樵谙乳_(kāi)始的父元素渲染時(shí)，父元素的寬度就被固定為200px不再變化。當(dāng)渲染到子元素的時(shí)候會(huì)用固定的200px減去17px的滾動(dòng)條寬度來(lái)作為子元素的寬和高，所以都為183px

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

總結(jié)

以上是生活随笔為你收集整理的聊一聊CSS中的死循环的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。