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

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

實(shí)例操作步驟

1. 新建頁(yè)面和插入div元素

在HBuilderX工具中新建Web項(xiàng)目頁(yè)面，在body元素中插入一個(gè)父級(jí)div和五個(gè)子級(jí)div。

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

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

3. 預(yù)覽效果

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

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

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

5. 調(diào)整布局

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

6. 添加圓角邊框

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

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