CSS是前端開發中非常重要的一部分，它可以讓我們的頁面很漂亮。其中，設置元素的收縮和展開是CSS中的一個很重要的知識點，下面就來介紹一下CSS中如何設置元素的收縮和展開。

首先，我們需要了解一個CSS屬性：“display”。這個屬性用來設置元素的顯示方式，有以下幾種情況：

display: none;       //不顯示元素
display: block;      //塊級元素
display: inline;     //行內元素
display: inline-block;   //行內塊元素

當我們需要實現元素的收縮展開時，一般使用display屬性來實現。

接下來，我們就來看一下如何實現一個元素的收縮和展開效果：

//HTML部分
<div class="shrink">
<div class="title">點擊展開</div>
<div class="content">展開的內容</div>
</div>
//CSS部分
.shrink .title{
cursor: pointer;
background-color: #ccc;
padding: 10px;
}
.shrink .content{
display: none;
background-color: #f0f0f0;
padding: 20px;
}
.shrink .show .content{
display: block;
}

其中，我們為元素添加了“shrink”類，以便于樣式的設置。其中，“title”元素是用來做展開/收縮的開關按鈕，而“content”則是用來存放我們需要展開/收縮的內容。

在CSS中，我們設置了“title”元素的樣式，讓它看起來像是一個可以點擊的按鈕，同時，將“content”元素默認設置為不顯示。之后，我們利用了CSS中的選擇器，為“shrink”元素添加“show”類時，“content”也顯示出來了。

通過以上的設置，我們就成功地實現了一個簡單的元素收縮展開效果。