CSS盒模型的算法和應用

本篇內容介紹了“CSS盒模型的算法和應用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

CSS盒模型

網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的，請看下圖：

如果是Firebug用戶的話(基本和前端有關的都會用到Firebug吧–糖伴西紅柿)，就會很熟悉下面的圖表了。

這個圖表很好地展示了作用于頁面上任意盒子的數值。

注意以上兩個例子中，margin都是白色的。Margin比較特別，它不會影響盒子本身的大小，但是它會

影響和盒子有關的其他內容，因此margin是盒模型的一個重要的組成部分。

盒子本身的大小是這樣計算的：

寬度=自身寬度+左內邊距+右內邊距+左邊框+右邊框

高度=自身高度+上內邊距+下內邊距+上邊框+下邊框

值未聲明的情況

如果未聲明padding或者border，那他們或者值為零(使用cssreset時)，或者為瀏覽器的默認值(很可能不是零，尤其是那些通常沒有重置的表單元素)

塊級盒的默認寬度

如果未聲明寬度，并且CSS盒模型中盒子是靜態或者相對定位的，寬度會保持100％的寬度，padding和border會向內推動，而不是向外擴展。

但是，如果明確設置盒子的寬度為100％，那么padding就會向外延展。

要注意的是，盒子的默認寬度并不真的是100％，而是剩下的可能值(應該是說，剩余真實存在的寬度－糖伴西紅柿)。應該了解這個特殊值，因為很多情況下，它對于設置/不設置寬度都是非常有用的。

我遇到的***的麻煩就是textarea(文本框)元素了，它們需要設為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設置textarea的寬度為100%，但有padding時，就會延展textarea的寬度。固定寬度環境下，通常可以設置為合適的像素值寬度，但是變寬情況就沒那么幸運了。

無寬度的絕對定位盒子

未設定寬度的絕對定位的CSS盒模型中的盒子的表現有點不一樣。它們的寬度只需要適合它們所包含的內容即可。因此，如果盒中只有一個單詞，盒子就會像那個詞的表現一樣寬。如果變成兩個詞，盒子的寬度也會相應增加。

這種情況會持續到盒子的寬度達到父元素寬度的100%（最近的相對定位的父元素或者瀏覽器窗口），然后就會折行。
對盒子來說，垂直擴展以適應包含的內容是很自然的。值得奇怪的是，不僅僅是不同平臺下的文本表現不同，不同的瀏覽器處理這個問題時，也有很多怪癖。

無寬度浮動盒子

同無寬度的絕對定位盒子的表現一樣。CSS盒模型的寬度只需要擴展到所包含內容的寬度，直到其父元素的寬度（其父元素不必是相對定位的）。由于這些無寬度盒子的脆弱性，我們要學到的是關鍵任務模式的時候它們是不能依賴的，像總體頁面布局中。如果浮動一列作為側邊欄使用，并指望那些內部元素（如圖片）來負責包含它的寬度，你就是在自找麻煩。

內聯元素也是盒子

我們這里一直把重點放在塊級元素的盒子上。很容易就可以把塊級元素想象為盒子，但是內聯元素也是盒子。可以把他們想象為非常長而窄的長方形，它們也可以像其它盒子一樣有margin,paddingheborder

折行使它看起來有些不好理解。如上所示的左margin把盒子推向右邊，但是只在***行有效，因為那是盒子的起點。padding正常的應用在文本的上部或下部，當折行時它會忽略上面行的padding并且以行高(line-height)要求的位置作為起點。透明背景是為了讓效果看起來更清楚。

“CSS盒模型的算法和應用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！