如何使用CSS3中的属性display设置为块伸缩容器

 时间:2024-10-21 03:45:14

1、第一步,在已打开的HBuilderX工具,并在Web项目新建页面;接着在body元素中插入一个父级div和五个子级div,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器如何使用CSS3中的属性display设置为块伸缩容器

2、第二步,然后在title标签下添加style,使用全局选择器设置内外边距,类选择器设置div内外边距和边框,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器

3、第三步,保存代码并直接使用浏览器预览,可以发现元素水平显示,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器

4、第四步,利用div > div和类选择器,分别设置div的宽度、高度、行高和边框,并设置display属性为box,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器

5、第五步,再次保存代码并预览页面效果,发现五个元素纵向排成一排,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器

6、第六步,再次利用类和元素组成的父子选择器,设置border-radius属性,如下图所示:

如何使用CSS3中的属性display设置为块伸缩容器
  • Sublime Text 添加文件图标
  • Python编程:如何使用匿名函数
  • 怎样利用XAMPP搭建本地php环境?
  • ASP.NET如何输出当前时间
  • 修改Webstorm新建HTML文件模板
  • 热门搜索
    考不上高中怎么办 意大利面怎么做好吃 晚上睡眠不好怎么调理 煮方便面怎么做好吃 活动策划怎么写 江淮瑞风s3怎么样 宋朝是怎么灭亡的 开塞露怎么用便秘 支原体衣原体感染是怎么回事 脸肿怎么办