由於ionic使用了html5和css3的一些新規範，所以要求ios7+/android4.1+，在低版本上使用ionic開發的應用的時候，有時會出現問題可以直接使用ionic的css框架，直接在html中引入ionic.css就可以。ionic的css框架提供了預定義的css類，來幫助我們快速構建適用於手機端的ui，ionic的預定義css類主要分為下面四個方面：
- 基本布局類
ionic將手機頁面的布局模式基本抽象為三塊：頭部、內容和尾部，基本布局類提供了這幾個區域的css類
定高條塊：.bar
樣式.bar將元素宣告為螢幕上絕對定義和塊狀區域，具有固定的高度（44px）：
class="bar">.....
1. 同級樣式—同級樣式與.bar應用在同一元素上，宣告元素的位置、配色等
2. 下級樣式—下級樣式只能應用在.bar的子元素上，宣告子元素的大小等特徵
具體的樣式如下：
.bar：位置
.bar :嵌入子元素
在ionic中，有三種.bar子元素的樣式是自定義的：
-標題文字-對包含的標題文字的元素使用.title樣式，通常是使用h1元素；一般是居中顯示的標題
"bar">
"title">...
"bar">
"button">...
"bar">
"button-bar">...
class="bar bar-header bar-energized item-input-inset">
class="button button-clear icon-right ion-android-arrow-dropdown">北京a>
type="text"
placeholder="輸入商戶名搜尋">
label>
div>內容：.content和.scroll-content
ionic預定義了兩個內容容器樣式：
1. .content - 流式定位，內容元素在文件流中按順序定位
2. .scroll-content - 決定定位，內容元素佔滿整個螢幕
這兩個樣式都可以使用以下樣式進一步確定位置及其範圍
軟體布局簡介
初學packet tracer 5.1筆記 一 1 首先從介面最左下角的這段開始說起 routers switches hubs wireless devices connections end devices wan emulation custom made devices multiuser ...
flex布局簡介
傳統的布局方式都是基於盒狀模型,依靠與 display position float 方式來實現.在css3中增加了一種新的布局方案 flex布局.flex是flexible box 彈性布局 的縮寫.將元素置為flex布局.只要在需要使用flex布局的元素中新增display flex屬性即可.1...
自動布局簡介
直接使用 frame 計算控制項的位置 官方應用大多支援橫豎屏 隨著 ipad 的發布,螢幕的物理尺寸發生了變化 並且蘋果建議，在 ipad 上執行的程式如果沒有特殊原因，應該支援橫豎屏切換 因此 不能把控制項的 frame 都寫死了，需要進行螢幕適配 為了解決螢幕適配需求，蘋果同時推出了第乙個螢幕...