盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
元素的高度也是同理。
比如：
css代碼：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代碼：
<body> <div>文本內(nèi)容</div> </body>
元素的實(shí)際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，如下圖：
我來試一試：
為列表每一項(xiàng)寬度設(shè)置為200px，高度為30px
（上一節(jié)中的列表項(xiàng)長度為什么這么長啊，不明白同學(xué)是不是應(yīng)該看一看標(biāo)簽分類那一小節(jié)，li是塊狀元素，塊狀元素有一個(gè)特點(diǎn)之一：在不設(shè)置寬度的情況下，顯示為父容器的100%。）
在右邊編輯器的第10-11行，輸入下列代碼：
width:200px; height:30px;
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)