在CSS3中，新增盒子模型属性，可以用属性控制元素分块显示；可以水平展示，也可以是垂直展示。那么，具体怎么使用呢？

工具/原料

  • Windows7
  • CSS3
  • HTML5
  • HBuilderX

方法/步骤

  1. 1

    第一，打开HBuilderX工具，新建页面文件，然后在body插入八个div标签

  2. 2

    第二，利用div标签选择器，设置元素宽度、高度、背景色和外边距

  3. 3

    第三，保存代码并打开浏览器，查看界面效果，可以发现垂直显示的几个块

  4. 4

    第四，接着添加属性display，设置为flex，还有兼容谷歌浏览器的-webkit-flex

  5. 5

    第五，添加属性flex-direction，这个属性的值可以是row或column，设置为column

  6. 6

    第六，在八个div外层添加父div，然后利用父类选择器，设置display属性；保存代码并刷新浏览器，可以看到垂直分布变为水平分布

    END

注意事项

  • 注意属性flex-direction的用法
  • 注意如何使用CSS3属性控制元素水平和垂直显示
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。