CSS中內容自適應一直都是前端開發者的一個難點，無論是固定寬度的布局還是響應式設計，都需要使用到自適應的方法來實現頁面的優美展示。下面就讓我們來一起探討一下它的應用和實現方法吧。

/* 以下為基礎樣式代碼 */
.container{
width: 80%;
margin: 0 auto;
}
.box{
width: 100%;
}

一、通過百分比來實現內容自適應：
這種方法是通過在CSS中設置百分數來實現寬度的伸縮。比如一個固定寬度的容器內需要放置一個自適應寬度的圖片，可以如下設置：

img{
width: 100%;
}

這條CSS規則中設置了圖片的寬度為100%，這樣圖片在容器中的寬度就可以自適應，當容器的寬度變化時，圖片的寬度也會相應地變化，從而達到自適應的效果。

二、通過彈性盒子布局實現內容自適應：
彈性盒子布局是CSS3中新增的一種布局方式，它可以非常方便地實現內容的自適應，很適合那些需要在不同屏幕尺寸下自適應的頁面。下面是一個例子：

.container{
display: flex;
justify-content: space-between;
}
.box{
flex: 1;
}

這段CSS代碼中，通過將容器的display屬性設置為flex，就可以開啟彈性盒子布局模式了。然后設置每個盒子的flex屬性為1，這個數值會按照比例分配容器中的剩余空間，從而實現內容自適應的效果。

三、通過媒體查詢實現響應式自適應：
在不同屏幕尺寸下，頁面的布局也需要進行相應的調整。媒體查詢可以幫助我們根據屏幕大小來為頁面應用不同的CSS規則。例如，當屏幕尺寸小于768px時，可以將容器的寬度設置為100%：

@media screen and (max-width: 768px){
.container{
width: 100%;
}
}

這段代碼中的媒體查詢語法指定了一個最大屏幕寬度，當屏幕寬度小于768px時，就會應用內部的CSS規則，從而實現自適應布局。

總之，CSS中內容自適應是前端開發者必須要掌握的技能之一，這些方法都可以讓我們實現頁面內容的自適應，從而讓頁面在不同的屏幕尺寸下都保持優美的展示效果。