如何使用CSS3中的属性order控制元素出现的顺序

 时间:2026-04-22 16:49:52

1、第一步,双击打开HBuilderX工具,新建一个HTML5页面并修改title内部内容,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

2、第二步,在<body></body>标签元素内,插入一个div和三个p标签,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

3、第三步,利用div元素的ID选择器,设置display属性值为flex,兼容不同浏览器,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

4、第四步,保存代码并打开浏览器查看效果,结果发现三个p元素中的内容从上到下依次排开,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

5、第五步,利用类选择器,设置第一个和第二个p标签元素的order属性和margin属性,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

6、第六步,再次保存代码并查看发现元素发生了偏移,根据情况修改order值,如下图所示:

如何使用CSS3中的属性order控制元素出现的顺序

  • 吃鸡怎么调N卡数字振动
  • 夜神模拟器怎么安装在电脑
  • steam怎么安装?
  • Win10怎么更改默认安装路径
  • 控制Control 弹输入法怎么办
  • 热门搜索
    怎么日批 脂肪肝怎么减掉 超速10%不到20%怎么处罚 怎么学化妆 ps字体怎么加粗 气血虚怎么调理 怎么退群 怎么倒立 汽车后视镜怎么拆 开网店怎么开