快速學習掌握移動Web開發(fā)布局總結

1、快速學習掌握移動web開發(fā)布局總結一、流式布局（百分比布局）流式布局，就是百分比布局，也稱非固定像素布局通過盒子的寬度設置成百分比來按照屏幕的寬度來舉行伸縮，不受固定像素的限制，內容向兩側填充。流式布局方式是移動web開發(fā)用法的比較頻繁的布局方式max-width 最大寬度（max-height 最大高度）min-width 最小寬度（min-height 最小高度）二、flex伸縮布局1）傳統(tǒng)布局和flex布局2）布局原理flex是flexible box的簡寫，意為彈性布局，用來為盒狀模型提供最大的靈便性，任何一個容器都可以指定為flex布局。當把父盒子設為flex布局后，子元素的floa

2、t、clear和vertical-align屬性將失效伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局采納flex布局的父盒子稱為flex容器（flex container），簡稱容器；里面的全部子元素自動成為容器的成員，稱為flex項目（flex item），簡稱項目。原理：通過給父盒子添加flex屬性，來控制子盒子的位置和羅列方式3）頻繁的父項屬性（6個）flex-direction：設置主軸的方向（重點）flex布局中分為主軸和側軸 行和列 / x軸和y軸，默認的主軸方向是屬性解釋row默認值從左到右row-reverse從右到左column從上到下column-

3、reverse從下到上justify-content：設置主軸上的子元素羅列方式（重點）屬性解釋flex-start默認值從頭部開頭 假如主軸是x軸，則從左到右flex-end從尾部開頭羅列center在主軸居中對齊（假如主軸是x軸，則水平居中）space-around平分剩余空間space-between先兩邊貼邊，再平分剩余空間（重要）flex-wrap：設置子元素是否換行（重點）默認狀況下，項目都排在一條線上，默認不換行。屬性解釋nowrap默認值，不換行wrap換行align-items：設置側軸上的子元素的羅列方式（單行）（重點）該屬性是控制子元素在側軸上的羅列方式，在子元素為單項是

4、用法。屬性解釋flex-start默認值，從上到下flex-end從下到上center垂直居中（元素集中）stretch拉伸align-content：設置側軸上的子元素的羅列方式（多行），單行無效果。屬性解釋flex-start默認值，從側軸的頭部開頭羅列flex-end從側軸的尾部開頭羅列center在側軸中間顯示space-around子項在側軸平分剩余空間space-between子項在側軸先分布在兩頭，再平分剩余空間（重要）stretch設置子項元素高度平分父元素的高度flex-flow：復合屬性，相當于同時設置了主軸方式flex-direction和是否換行flex-wrap屬性。

5、4）頻繁的子項屬性（3個）flex：定義子項目分配剩余空間，用flex來表示占多少份數(shù)。（重點）align-self：控制子項自己在側軸上的羅列方式，默認值為auto，繼承父元素的align-items屬性，假如沒有父元素，則等同于stretch。order：定義項目的羅列挨次，數(shù)值越小，越靠前，默認為0。三、流式布局（rem布局）1）rem基礎em和rem都是相對單位em：相對于父元素字體大小來說rem：root rem，相對于html元素字體大小來說優(yōu)點：通過修改html的字體大小來轉變頁面中的元素的大小可以舉行整體控制2）媒體查詢媒體查詢（media query）是css3的新增語法用法

6、media查詢，可以針對不同的媒體類型定義不同的樣式當你重置掃瞄器大小的過程中，頁面也會按照掃瞄器的寬度和高度重新渲染頁面目前針對無數(shù)蘋果手機、android手機，平板等設備都用的到多媒體查詢語規(guī)矩范：用media開始注重符號mediatype 媒體類型關鍵字 and not onlymedia feature媒體特性 必需有小括號包含1> mediatype查詢類型將不同的終端設備劃分成不同的類型，稱為媒體類型值解釋all用于全部設備print用于打印機和打印預覽scree用于電腦屏幕，平板電腦，智能手機等2> 關鍵字關鍵字將媒體類型或多個媒體特性銜接到一起做為媒體查詢的條件。值解釋and可以將多個媒體特性銜接到一起，相當于且not排解某個媒體類型，相當于非，可省略only指定某個特定的媒體查詢類型，可以省略3> 媒體特性每種媒體類型都有各自不同的特性，按照不同媒體類型的媒體特性設置不同的展示風格，較常用的有：值解釋width/t