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

 时间:2024-10-19 21:59:28

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 弹输入法怎么办
  • 热门搜索
    鳄鱼属于什么动物 四磨汤的功效与作用 山地车什么牌子好 snake什么意思 火龙果有什么功效 新闻标题的作用 什么是反刍动物 穿心莲的功效与作用 中国知识产权网 普法知识内容