在CSS中，容器是指一種用來包括其他HTML元素的CSS元素。它們是在CSS布局中非常重要的一個組成部分，可以幫助我們創(chuàng)建一個更好的用戶體驗。下面我們來了解一下常見的CSS容器。

.container {
width: 80%; /* 容器寬度 */
margin: auto; /* 讓容器水平居中 */
background-color: #fff; /* 容器背景色 */
padding: 20px; /* 文本內(nèi)容和容器邊緣之間的距離 */
}

CSS容器的主要作用之一是處理盒子模型。在CSS中，每個HTML元素都是被稱為一個盒子的。這個盒子由四個主要部分組成：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。容器就是用來處理這些不同層次之間的關(guān)系的。

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #000;
margin: 20px;
}

在上面這個例子中，我們使用容器來包含一個名為“box”的元素。在這個容器中，我們可以添加一些其他的CSS屬性，比如背景色、內(nèi)邊距等等，以便讓這個元素能夠更好地適應(yīng)頁面的布局和風(fēng)格。

CSS容器也可以用來設(shè)置頁面的布局。比如，如果我們想讓一個頁面中的所有元素都居中，我們可以創(chuàng)建一個容器并將其中所有的元素包括進(jìn)去。

.layout {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

在這個例子中，我們使用flexbox布局來將元素以中心對齊的方式排列，并且定義了一個容器來包含所有這些元素。容器的屬性使得我們可以輕易地定義元素的位置、大小、對齊方式等等。

總之，CSS容器是在頁面設(shè)計和布局中一個至關(guān)重要的概念。它們可以用來處理盒子模型、設(shè)置頁面的布局、適應(yīng)不同的分辨率和設(shè)備、以及為用戶提供更好的體驗。