使用CSS3中的属性display进行块伸缩容器设置

CSS3中的属性display提供了丰富的选择，其中包括box和inline-box表示块伸缩容器和内联级伸缩容器。通过具体的实例演示，可以更好地理解如何设置块伸缩容器。 实例操作步骤1. 新建页面和

CSS3中的属性display提供了丰富的选择，其中包括box和inline-box表示块伸缩容器和内联级伸缩容器。通过具体的实例演示，可以更好地理解如何设置块伸缩容器。

实例操作步骤

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

在HBuilderX工具中新建Web项目页面，在body元素中插入一个父级div和五个子级div。

2. 添加样式设置

在title标签下添加style，利用全局选择器设置内外边距，类选择器设置div内外边距和边框。

3. 预览效果

保存代码并在浏览器中预览，观察元素水平显示的效果。

4. 设置属性为box

利用div和类选择器，设置div的宽度、高度、行高和边框，并将display属性设置为box，使五个元素纵向排成一排。

5. 调整布局

再次保存代码并查看页面效果，可以发现五个元素垂直排列在一起。

6. 添加圆角边框

通过类和元素组成的父子选择器，设置border-radius属性，为元素添加圆角边框。

这些操作展示了如何利用CSS3中的display属性来创建块伸缩容器，并通过简单的样式设置实现不同布局效果。不断尝试和实践，可以更加灵活地掌握CSS3的使用技巧，为网页设计带来更多可能性。