什么是死循環呢？？比如一個<div>元素里面有一張vertical-align為bottom同時高度為192像素的圖片，此時該<div>高度就是192像素，假設此時，插入一個子元素，高度設為100%，如果此時height:100%可以計算，則子元素應該也是192像素。但是啊但是，我們的父元素height值是auto，豈不是現在高度要從原來的192像素圖片再加上插入的子元素變成384像素了，然后height:100%的子元素高度又要變成384像素，父元素高度又雙倍……死循環了！！
實際這是錯誤的，大家不要被誤導了！！

例子1:

但是我們發現父元素的寬度只有圖片加文字的距離。。這是為什么呢？？

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

同樣的道理，如果height支持任意元素100%，也是不會死循環的，和寬度類似，靜態渲染，一次到位。

這就引申出另外一個問題，父選擇器，大家有沒有想過如果CSS支持了父選擇器，會有什么后果？

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

例子2:

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

因為在先開始的父元素渲染時，父元素的寬度就被固定為200px不再變化。當渲染到子元素的時候會用固定的200px減去17px的滾動條寬度來作為子元素的寬和高，所以都為183px

這個例子也進一步證明了：CSS中，如果單純是靜態渲染，是沒有死循環這種說說法的！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。