如何使用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 弹输入法怎么办
  • 热门搜索
    黑蚂蚁的功效与作用 melody什么意思 运动会背景音乐 初三数学知识点 什么炒股软件最好用 燕窝的功效与作用 滑石粉的作用 什么是pos机 什么是同位语从句 房地产销售知识