盒子模型的计算 
外边距(margin)+边框(border)+内边距(padding)+内容(content) 

css中的width和height只是对内容区域的高和宽设定.不是对整个和模型的高和宽设定. 

复制代码

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>demo</title> 
<style type="text/css"> 
*{margin:0; padding:0;} 
dl { background:red;border:10px solid #000; width:100px; height:100px;} 
dt { background:yellow;} 
dd { background:green;} 
</style> 
</head> 
<body> 
<dl> 
<dt>test of dt</dt> 
<dd>test of dd</dd> 
</dl> 
</body> 
</html> 


设置外边距和内边距都不会影响内容区域的高度和宽度,仅仅会改变次盒子模型的区域的高宽. 

在盒模型嵌套的情况下,里层盒模型会影响到外层的盒模型.