HTML元素构建
在Vue相似的功能展现我们可以通过v-for来实现，modulars中的数据我们口可以通过登录直接从后台获取。这样不管有多少个模块我们都可以快速的实现DOM元素的渲染，也可以减少样式的书写，提高代码实行效率。这里每个mould都是一个功能模块的组合，里面包含了标题、图片、和功能描述等信息。
CSS样式模型
元素排序紧张是通过CSS样式表来完成，我们都知道每个div盒子（class="mould"）的默认样式属性是独占一行显示，要想办理div独占一行方法常日有两种要么将该div设置浮动要么就设置display样式。而父级的div高度常日由内容撑开，宽度常日可以用父级容器的百分百进行设定。
float并排显示
float可以定义元素的浮动属性，使元素向左或向右移动来实现布局效果，常用来合营div标签做网页布局。float会使该元素分开文档流但仍旧会霸占位置（浮动元素会天生一个区域块，不管是何种标签元素都可以），其他相邻的元素则会忽略设置float属性的元素紧跟其后连续排列。如果对当前的所有元素设置浮动，那么就会当前的所有元素就会依次排列。以是利用float属性可以实现并排显示的效果，当然用完float浮动别忘了打消浮动。
overflow:hidden打消浮动
标签元素通过float浮动后不属于html文档流，浮动之后的元素如果须要回到文档流中就须要将前面的浮动打消。打消浮动有多种办法可以实现，最大略的办法便是在父级利用overflow:hidden来打消浮动。"overflow:hidden"可以溢出隐蔽，设置该属性可以将内容区域超出来的部分隐蔽使内容区域完备包含在该包含块中。利用该属性可以让父元素包住这个分开了文档流的浮动元素，以达到打消包含块内子元素的浮动影响。
clear:both来打消浮动
当然也可以用clear:both来打消浮动，clear可以指定元素工具不许可有浮动。利用clear:both打消浮动可以把float的元素拽回文档流，实现方法可以在浮动元素的尾部添加一个空的div标签并设置 clear:both属性 或不才一个元素上加clear:both，可以可以在父级div定义创建伪元素:after设置clear:both属性 。
display并排显示
display有两种属脾气况分别是inline（同行显示）和flex（弹性布局），display:inline属性可以让元素工具实现同行并排显示（这个不是我们现在须要的效果）。display:flex是我们非常喜好的的弹性布局办法，可以简洁、快速的实现想要的弹性布局效果。定义了display:flex属性之后可以通过 justify-content 属性调度子元素的水平对齐办法，通过align-items属性调度子元素的垂直对齐办法。当父元素宽度不足时flex默认会等比例压缩（不会自动换行），这时候我们须要通过设置 flex-wrap属性（默认为 nowrap，这里指定wrap）来使其换行即可。
总结：
以上内容是
