Ionic Css简介与基本布局

Ionic简介

　　Ionic属于hybrid开发模式，本质上是讲移动web应用与浏览器打包，优点是采用标准的web技术进行开发，避免了不同平台原声开发体系的学习，上手快、效率高。缺点是性能上有一定的损失
　　ionic是一个强大的混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、CSS、JavaScript，开发跨平台（目前支持：Android、IOS）的原生App应用。
　　
ionic主要包括三个部分：
- CSS框架 提供原生质感的CSS样式模拟，ionic这个部分使用了ionicons图标样式库
- JavaScript提供移动Web应用开发框架，ionic基于AngularJS基础框架开发，因此自然的遵循AngularJS框架的约束，此外，ionic使用AngularJS UI Router实现前端路由
- 命令行/CLI命令行工具集用来简化应用程序的开发、构造和仿真运行，ionic命令行工具使用了Cordova，依赖于平台SDK（Android&IOS）实现将移动web项目打包成原生App

由于ionic使用了HTML5和CSS3的一些新规范，所以要求ios7+/Android4.1+，在低版本上使用ionic开发的应用的时候，有时会出现问题

CSS框架

　　可以直接使用ionic的CSS框架，直接在HTML中引入ionic.css就可以。ionic的CSS框架提供了预定义的CSS类，来帮助我们快速构建适用于手机端的UI，ionic的预定义CSS类主要分为下面四个方面：
- 基本布局类
ionic将手机页面的布局模式基本抽象为三块：头部、内容和尾部，基本布局类提供了这几个区域的CSS类

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

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

• 格栅系统类
  和Bootstrap一样，ionic也提供了格栅系统，不过ionic的实现是基于CSS3的flexBox模型，更为灵活

布局模式

在APP开发中，通常一个页面分为三个部分
1. 标题/header 标题总是位于屏幕顶部
2. 内容/content 内容区占据除了标题和页脚的区域
3. 页脚/footer 页脚区总是位于屏幕的底部

ionic使用以下的CSS类声明区域的性质：
- .bar.bar-header 声明元素为标题区
- .bar.bar-footer 声明元素为页脚区
- .content声明元素为内容区

定高条块：.bar

样式.bar将元素声明为屏幕上绝对定义和块状区域，具有固定的高度（44px）：

<any class="bar">.....<any>

一旦元素应用了.bar样式，就可以继续选用两类预定义样式来进一步声明元素及其内容的外观：
1. 同级样式—同级样式与.bar应用在同一元素上，声明元素的位置、配色等
2. 下级样式—下级样式只能应用在.bar的子元素上，声明子元素的大小等特征
具体的样式如下：

.bar：位置

ionic使用以下样式定义条块的位置：
- .bar-header -置顶
- .bar-subheader -header之下置顶
- .bar-footer - 置底
- .bar-subfooter -footrt之上置顶
比如腾讯App中，可以看到三个条块：标题、副标题、页脚

.bar :嵌入子元素

在ionic中，有三种.bar子元素的样式是自定义的：
- 标题文字 -对包含的标题文字的元素使用.title样式，通常是使用h1元素；一般是居中显示的标题

<any class="bar"><any class="title">...</any></any>

• 按钮 –对用作按钮的元素，应用.button样式，通常使用button或者a元素作为按钮，注意按钮将使用.bar的配色方案；经常会用到，比如顶部标题栏右侧的+号按钮，或者顶部左侧的返回按钮

<any class="bar"><any class="button">...</any></any>

• 工具栏 - 工具栏包含一组按钮，对用作工具栏的元素，应用.button-bar样式，通常使用div元素作为工具栏;一般较少用到

<any class="bar"><any class="button-bar">...</any></any>

.bar :嵌入input

一种常见的UI模式是在标题栏中嵌入搜索栏，比如说大众点评如下：

在.bar元素中嵌入input元素，需要注意两点：
1. 在条块元素上应用.item-input-insert样式
2. 将input包裹在应用.item-input-wrapper样式的元素内
这是因为在ionic的实现中，.bar中的input样式定义如下：
比如以下代码：

<div class="bar bar-header bar-energized item-input-inset">        <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>        <label class="item-input-wrapper">            <input type="text" placeholder="输入商户名搜索">        </label>    </div>

内容：.content和.scroll-content

ionic预定义了两个内容容器样式：
1. .content - 流式定位，内容元素在文档流中按顺序定位
2. .scroll-content - 决定定位，内容元素占满整个屏幕
这两个样式都可以使用以下样式进一步确定位置及其范围