CSS3中的屬性display提供了豐富的選擇，其中包括box和inline-box表示塊伸縮容器和內(nèi)聯(lián)級伸縮容器。通過具體的實例演示，可以更好地理解如何設(shè)置塊伸縮容器。 實例操作步驟1. 新建頁面和

CSS3中的屬性display提供了豐富的選擇，其中包括box和inline-box表示塊伸縮容器和內(nèi)聯(lián)級伸縮容器。通過具體的實例演示，可以更好地理解如何設(shè)置塊伸縮容器。

實例操作步驟

1. 新建頁面和插入div元素

在HBuilderX工具中新建Web項目頁面，在body元素中插入一個父級div和五個子級div。

2. 添加樣式設(shè)置

在title標簽下添加style，利用全局選擇器設(shè)置內(nèi)外邊距，類選擇器設(shè)置div內(nèi)外邊距和邊框。

3. 預(yù)覽效果

保存代碼并在瀏覽器中預(yù)覽，觀察元素水平顯示的效果。

4. 設(shè)置屬性為box

利用div和類選擇器，設(shè)置div的寬度、高度、行高和邊框，并將display屬性設(shè)置為box，使五個元素縱向排成一排。

5. 調(diào)整布局

再次保存代碼并查看頁面效果，可以發(fā)現(xiàn)五個元素垂直排列在一起。

6. 添加圓角邊框

通過類和元素組成的父子選擇器，設(shè)置border-radius屬性，為元素添加圓角邊框。

這些操作展示了如何利用CSS3中的display屬性來創(chuàng)建塊伸縮容器，并通過簡單的樣式設(shè)置實現(xiàn)不同布局效果。不斷嘗試和實踐，可以更加靈活地掌握CSS3的使用技巧，為網(wǎng)頁設(shè)計帶來更多可能性。