1、CSS 框模型概述（盒模型）
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
CSS 框模型概述
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
- Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
- Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
為了正確設置元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。
元素的寬度和高度
指定一個 CSS 元素的寬度和高度屬性時，你只是設置內(nèi)容區(qū)域的寬度和高度。要知道，完整大小的元素，你還必須添加內(nèi)邊距，邊框和邊距。
內(nèi)邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：
* {margin: 0;padding: 0; }在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達到 100 個像素，就需要將內(nèi)容的寬度設置為 70 像素，請看下圖：
#box {width: 70px;margin: 10px;padding: 5px; }提示：內(nèi)邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。
提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
重要: 當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內(nèi)容區(qū)域的寬度和高度。要知道，完整大小的元素，你還必須添加內(nèi)邊距，邊框和邊距。
下面的例子中的元素的總寬度為300px：
實例
div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px; } </style> </head> <body> ? <h2>盒子模型演示</h2> ? <p>CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。</p> ? <div>這里是盒子內(nèi)的實際內(nèi)容。有 25px 內(nèi)間距，25px 外間距、25px 綠色邊框。</div> ? </body> </html>
讓我們自己算算：
300px (寬)
- 50px (左 + 右填充)
- 50px (左 + 右邊框)
- 50px (左 + 右邊距)
= 450px
試想一下，你只有250像素的空間。讓我們設置總寬度為250像素的元素:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> ? <body> ? <img src="250x250px.gif" width="250" height="250" /> ? <div class="ex">上面的圖片是250 px寬。 這個元素的總寬度也是250 px。</div> ? </body> </html>最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
總結
以上是生活随笔為你收集整理的1、CSS 框模型概述（盒模型）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
