盒模型（英語：box moldel），是W3C規定一個瀏覽器如何渲染、顯示一個元素，根據元素的種類分為塊級元素盒模型和行內元素盒模型，
在css中塊級盒子模型也有兩種，分別是標準盒模型和IE瀏覽器的怪異盒模型，默認為標準盒模型（box-sizing:content-box），使用box-sizing：border-box可變成怪異盒模型，
box-sizing: inherit;規定從父元素繼承box-sizing，
-
盒模型組成：
-
content：內容區
-
padding：內邊距（其顏色隨著內容區域背景色而變化）
-
border：邊框（可以單獨設定顏色）
- border有多種型別的樣式
- solid：實線
- dashed：虛線
- dotted：原點虛線
- border有多種型別的樣式
-
margin（margin不屬于盒子的顯示區域，它主要體現了盒子的位置）
-
-
標準盒模型和怪異盒模型的異同點：
- 標準盒模型的內容區域的寬高就是width和height值，怪異盒模型的內容區域的寬高是width-padding（左右）-border（左右）、height-padding（上下）-border（上下）
- 標準盒模型添加padding或者border時，整體上所占空間會變大（(width/height)+padding+border）；怪異盒模型添加padding或者border時，其整體所占空間不發生變化（width和height設定的大小）
- 標準盒模型和怪異盒模型的應用場景不同（具體根據實際應用場景而定）
// 標準盒模型 // 怪異盒模型
{ {
width: 200px; box-sizing: border-box;
height: 200px; width: 200px;
margin: 100px 0; height: 200px;
padding: 10px; margin-top: 100px;
border: 10px dotted green; padding: 10px;
background-color: orange; border: 10px dashed green;
background-color: purple;
} }
效果圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/210742.html
標籤：其他