ionic的样式布局简单入门

 ionic的样式布局主要依赖于 ionic.css 文件，该css文件框架主要提供预定义的CSS类，来帮助我们快速构建适用于手机端的UI。

ionic的预定义CSS类主要分以下四类：

基本布局类

ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。

手机App开发实践中，用户界面通常划分为几个区域 - 标题/header、内容/content和页脚/footer，ionic使用以下CSS类声明区域性质:

定高条块样式：.bar

.bar 样式可以和以下样式组合定义条块的位置:

.bar-header - 置顶

.bar-subheader -    header之下置顶

.bar-footer -  置底

.bar-subfooter -  footer之上置底

.bar中也可以 嵌入 标题、工具栏 、按钮等各种子元素 

内容样式：.content和.scroll-content

ionic预定义了两个内容容器样式：

.content - 流式定位，内容元素在文档流中按顺序定位

.scroll-content - 绝对定位，内容元素占满整个屏幕这两种样式都可以使用以下样式进一步确定位置及范围：

颜色和图标类

ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。

界面组件类

ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。

栅格系统类

基于CSS3的FlexBox 模型实现的栅格系统