DIV+CSS兩種盒子模型（W3C盒子與IE盒子）

時間 2019-11-11

標籤 div+css div css 兩種盒子模型 w3c 欄目 HTML 简体版

原文原文鏈接

在辨析兩種盒子模型以前。先簡單說明一下什麼叫盒子模型。html

原理：瀏覽器

先說說咱們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

這些屬性咱們可以把它轉移到咱們平常生活中的盒子（箱子）上來理解。平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。

特色：

每個盒子都有：邊界、邊框、填充、內容四個屬性。

每個屬性都包含四個部分：上、右、下、左。這四部分可同一時候設置。也可分別設置；裏的抗震輔料厚度，而邊框有大小和顏色之分，咱們又可以理解爲生活中所見盒子的厚度以及這個盒子是用什麼顏色材料作成的。邊界就是該盒子與其餘東西要保留多大距離。（ 以上原理與特色摘於百度）

如下這幅圖裏面，各自是W3C盒子和IE盒子的模型：

你們確定都能發現。這兩種模型整體來講很的類似。由內到外都是content,padding,border,margin。

但是細緻看的話，虛線延長出來的部分，分別標註了height和width，但是在W3C中，虛線包圍的部分僅僅有content。而在IE中，虛線包圍的部分是content+padding+border。工具

這是最直觀的不一樣。同一時候這也就是這兩種模型的最大不一樣點。
W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包括其它部分
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包括了 border 和 padding

用一個樣例來實現一下W3C盒子模型:

佈局

<html>
		<head>
				<title>盒子模型</title>
				<style>
						#box{
								width:100px;
								height:100px;
								
								padding:40px;
								
								border:solid 40px green;

								margin:20px;
						}
						div{
								font-size:30px;
								color:red;
								background-color:gray;
								text-align:center;
								
						}
				</style>
		</head>
		<body>
				<div id="box">
						W3C盒子模型
				</div>
		</body>
</html>

執行結果:

這張圖僅僅能看到內容和邊框。看不到詳細的分界線，也就不知道填充（padding）和內容（content）詳細的排布。
這裏我就順便介紹一中調試工具，firefox瀏覽器裏面的firebug，對於平時調試網頁佈局各方面的有很是大的幫助。

調試界面就是這樣了。鼠標選中<div>標籤，圖像就發生變化了。整體佈局就很是清晰了。

（例如如下圖）

這就很是清晰了吧。同一時候也說明了W3C盒子包括了content，padding，border三部分。
IE盒子的就不寫了，有需要的同窗可以本身試試。眼下大多的網頁佈局都是用W3C盒子，它的兼容性很好。因此是不二之選。post