盒模型寬度和高度
盒模型寬度和高度和我們平常所說(shuō)的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以裡的內(nèi)容範(fàn)圍。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
元素的高度也是同理。
例如：
css程式碼：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}html程式碼：
<body> <div>文本內(nèi)容</div> </body>
元素的實(shí)際長(zhǎng)度為：10px+1px+20px+200px+20px+ 1px+10px=262px。在chrome瀏覽器下方可查看元素盒模型，如下圖：
?
?
?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>寬度和高度</title>
<style type="text/css">
li{
border-bottom:1px dotted #ccc;
width:200px;height:30px;
}
</style>
</head>
<body>
<ul>
<li>別讓不會(huì)說(shuō)話害了你</li>
<li>二十七八歲就應(yīng)該有的見(jiàn)識(shí)</li>
<li>別讓不好意思害了你</li>
</ul>
</body>
</html>
