CSS寬度自適應原理指CSS樣式中設置寬度屬性時，使元素的寬度能夠自動根據父容器的寬度進行調整。這種自適應的效果非常實用，適用于不同尺寸的設備或瀏覽器，同時也能更好地適應網頁排版的不同需求。
為實現寬度自適應，我們需要使用百分比單位來替代固定像素單位。如下代碼片段所示：

.container{
width: 90%;
}
.box{
width: 50%;
}

以上代碼中，容器的寬度設為90%時，將占據父容器90%的寬度。而內部的.box元素也設為50%時，則會自動根據父容器寬度的一半進行調整，從而實現了寬度自適應的效果。
需要注意到的是，寬度自適應并不是所有情況下都適用的。當元素的內容太多，或者需要設置特定的寬度比例時，使用百分比可能無法達到期望的效果。此時，我們需要使用其他方式來控制元素的寬度，如flex布局或grid布局等。
總之，寬度自適應是CSS樣式中非常實用的特性，靈活應用能夠有效提高網頁的適配性和兼容性，同時也能夠更好地滿足不同排版需求。