如何使用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 弹输入法怎么办
  • 热门搜索
    蜂蜜结晶是怎么回事 安徽外国语学院怎么样 左腿发麻是怎么回事 卷发夹怎么用 大腿粗怎么减 cad角度线怎么画 龙湖怎么样 多梦怎么办 重婚罪怎么判 天语手机怎么样