建站
咨詢
售后
建站咨詢
新聞中心
CSS Box Model (盒子模型)
目前創(chuàng)新互聯(lián)建站已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、長子網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
所有 HTML 元素可以看作盒子，在 CSS 中，"box model "這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。
CSS 盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型 (Box Model)：
不同部分的說明：
- Margin（外邊距） - 清除邊框區(qū)域。Margin 沒有背景顏色，它是完全透明
- Border（邊框） - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響
- Padding（內(nèi)邊距） - 清除內(nèi)容周圍的區(qū)域。會(huì)受到框中填充的背景顏色影響
- Content（內(nèi)容） - 盒子的內(nèi)容，顯示文本和圖像
為了在所有瀏覽器中的元素的寬度和高度設(shè)置正確的話，你需要知道的盒模型是如何工作的。
提示：在盒模型中，外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。
提示：參考 CSS盒子模型的內(nèi)部結(jié)構(gòu) 可以了解更多的信息。
元素的寬度和高度
重要: 當(dāng)您指定一個(gè) CSS 元素的寬度和高度屬性時(shí)，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.
下面的例子中的元素的總寬度為 300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
讓我們自己算算：
250px (寬)
+ 20px (左 + 右填充)
+ 10px (左 + 右邊框)
+ 20px (左 + 右邊距)
= 300px
試想一下，你只有 250 像素的空間。讓我們設(shè)置總寬度為 250 像素的元素：
實(shí)例
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
嘗試一下 ?
最終元素的總寬度計(jì)算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的兼容性問題
一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。
雖然有方法解決這個(gè)問題。但是目前最好的解決方案是回避這個(gè)問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)。
解決 IE8 及更早版本不兼容問題可以在 HTML 頁面聲明 即可。
相關(guān)閱讀
CSS 拾遺系列：CSS盒模型科普
當(dāng)前題目：創(chuàng)新互聯(lián)CSS教程：CSSBoxModel(盒子模型)
URL標(biāo)題：http://www.dlmjj.cn/article/cdchgsd.html
