CSS 盒模型

admin發表於2018-08-03
CSS模型

所謂盒模型，通俗的講，就是將HTML元素比擬為一個可以容納其他物體的盒子。

盒子的特點如下：

（1）.盒子的四壁可以類比為HTML元素的border邊框。

（2）.盒子與其容納的物體（content）之間可能需要一定的空間，可以類比為padding內邊距。

（3）.盒子與周圍環境的空間，可以類比為margin外邊距。

於是可以總結為，盒模型解釋了瀏覽器處理HTML元素如下內容的方式：

（1）.內容（content）。

（2）.內邊距（padding）。

（3）.邊框（border）。

（4）.外邊距（margin）。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/104058yms8sl8ulsl2z8an.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的圖片很好的詮釋了盒模型的所有內容。

對於盒模型，困惑我們的往往是元素的寬度和高度倒是是多少。

下面就來分析一下：

如果一個html文件正確的宣告瞭DTD，當前絕大多數瀏覽器會以如下原則解讀盒模型：

（1）.盒子的實際寬度 = width屬性值 + 左右內邊距 + 左右邊框。

（2）.盒子的實際高度 = height屬性值 + 上下內邊距 + 上下邊框。

特別說明：雖然margin是盒模型的一部分，但它不屬於盒子本身，而是定義對其他元素的影響。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210633i2zvz3gozb8xv3vv.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

怪異模式（Quirks Mode）下，將padding和border包含到了width屬性值中：

（1）.盒子的實際寬度 = width屬性值 。

（2）.盒子的實際高度 = height屬性值 。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210640tn7dbnyegdkpdpjp.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.mytest{
  width:100px;
  height:100px;
  border:20px solid red;
}
</style>
</head>
<body>
  <div class="mytest"></div>
</body>
</html>

上面的程式碼實在文件的開頭加上以下程式碼就實現了怪異模式：

[HTML] 純文字檢視 複製程式碼
<?xml version="1.0" encoding="utf-8"?>

IE6怪異模式處理方式也不是沒有道理的，所以CSS3 box-sizing可以設定使用此方式。

相關文章