如何使用CSS3中属性控制元素的显示并调整顺序

在我们使用display中的属性值box,跟这个对应的有几个相关的属性,有box-orient和box-direction。其中,box-direction属性值有normal和reverse。下面利用实例说明这个属性的用法,操作如下:

工具/原料

  • HTML5
  • CSS3
  • HBuilderX
  • 浏览器
  • 截图工具

方法/步骤

  1. 第一步,在新建的HTML5模板页面,并在<body></body>标签插入一个div和六个div标签,如下图所示:

  2. 第二步,接着使用相关的选择器设置内外边距和边框,并进行查看页面效果,如下图所示:

  3. 第三步,再使用类选择器设置display,值为box;然后使用父子选择器控制box-orient属性,如下图所示:

  4. 第四步,再次保存代码并查看效果,可以发现元素展示方式发生了改变,如下图所示:

  5. 第五步,再添加属性box-direction,设置对应的值为normal,兼容不同浏览器,如下图所示:

  6. 第六步,再次保存并查看页面效果,结果发现有边框;再次修改box-direction属性为reverse,如下图所示:

注意事项

  • 注意CSS3中的控制伸缩元素的布局顺序box-direction
  • 注意合理选择和控制伸缩元素的容器展示
分类:游戏/数码
标签:

站长推荐

我们猜您还喜欢

  • 如何使用CSS3样式属性控制元素边框显示图片边框
  • 如何使用CSS3中属性控制元素四个方向的边框样式
  • 如何使用CSS3中属性控制元素的背景色的几种形式
  • 如何使用CSS3样式属性控制元素渐变背景阴影显示
  • 如何使用CSS3中属性控制其它元素设置成按钮效果
  • 如何使用CSS3中属性和jquery方法控制元素移动
  • 如何使用CSS边框控制元素边框显示成不同的形态
  • 如何使用CSS3中的样式属性控制元素渐变旋转显示
  • 如何使用CSS3中属性columns控制文字内容显示行
  • 如何使用CSS3中的样式属性控制字体倒影显示