CSS中width:100%和width:auto的區別

<div class="parent">
<div class="child">
</div>
</div>
<style>
.parent {
width: 100px;
background-color: red;
}

.child {
width: 100%;
background-color: blue;
}
</style>

上面代碼中child的寬度設置為100%，意思是child的content的寬度等於parent的寬度100px,如下圖所示：

.child {
width: 100%;
background-color: blue;
padding: 0 10px;
border: 2px solid green;
}
如果將child加上左右padding和border，則child的總寬度則會大於parent的寬度，表現為child的寬度撐出父元素了，如下圖所示：

.child { 
width: auto; 
background: blue; 
height: 100px; 
padding: 0 10px; 
border: 2px solid green; 
margin: 0 10px; 
}  

而如果設置child的寬度為auto,則表現為content+padding+border+margin值等於parent的寬度100px,如下圖所示：

這里延伸一個知識點：CSS3的calc()函數，calc()函數可以計算不同單位的表達式的值，表達式可以是“+”、“-”、“*”、“/”,其中加減符號前后必須要有空格，乘除不必須，但是為了保持風格一致，可以都保留空格

.child { 
width: calc(100% - 20px); 
background: blue; 
height: 100px; 
padding: 0 10px; 
} 

顯示如下圖，可以看到通過計算可以實現與auto一致的效果