添加padding：10px;變大了？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
? ? width:100px;
? ? height:100px;
? ? padding:10px;
? ? border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
按理說，盒子的高和寬不是已經(jīng)被設(shè)置為固定值了嗎？怎么還會變大
2015-08-04
你還是沒理解盒子模型，盒子模型的寬:包括margin+border+padding+width?？吹絯idth了沒?這個width就是你設(shè)的那個with，你那個widht：100px設(shè)置的不是整個盒子的寬度，而已內(nèi)容的寬度，也就是上圖青色那部分的寬度。只是你沒設(shè)padding，margin所以你整個盒子的寬度是102px的，因?yàn)橐由线吙虻膶挾取Ｄ阍O(shè)的width不是盒子的寬高，而是展現(xiàn)內(nèi)容也就是上圖那青色部分的寬高。紫色那部分是內(nèi)填充的部分，黃色那個是margin的部分，這樣加起來才是盒子模型
2015-08-04
2015-08-04
百度一下，你就知道
網(wǎng)頁中的盒子模型；我們常常要控制盒子模型的寬度width:???
w3c中的盒子模型的寬:包括margin+border+padding+width;
??? width:margin*2+border*2+padding*2+width;
??? height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;