6.1流式布局(百分比布局)
流式布局就是百分比布局，也稱非固定畫素布局。
通過盒子寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素限制，內容向兩側填充。
流式布局方式是移動web開發使用的比較常見的布局方式
max-width 最大寬度(max-height 最大高度)
min-width 最小寬度(min-hight 最小高度)
6.2 flex布局
6.2.1傳統布局與flex布局
傳統布局
相容性好
布局繁瑣
侷限性，不能在移動端很好的布局
flex彈性布局
操作方便布局極為簡單，移動端應用廣泛
pc端瀏覽器支援情況較差
ie11或更低版本不支援或僅部分支援
6.2.2布局原理
flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
當我們把父盒子設為flex布局後，子元素的float、clear和vertical-align屬性都將失效
伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
採用flex布局的元素，稱為flex容器(flex container)，簡稱「容器」。它的所有子元素自動成為容器成員，稱為flex專案(flex item)，簡稱「專案」。
總結：就是通過給父盒子新增flex屬性，(display: flex;)來控制子盒子的位置和排列方式
6.2.3 flex布局父項常見屬性
以下六個屬性是對父元素設定的
flex -direction:設定主軸方向
justify-content：設定主軸上的子元素排列方式
flex-wrap：設定子元素是否換行
align-content：設定側軸上的子元素的排列方式(多行)
align-items：設定側軸上的子元素排列方式(單行)
flex-flow：復合屬性，相當於同時設定了flex-direction和flex-wrap
6.2.3.1 flex-direction設定主軸的方向
主軸與側軸
在flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有:行和列、x軸和y軸
預設主軸方向就是x軸方向，水平向右
預設側軸方向就是y軸方向，水平向下
屬性值flex-direction屬性決定主軸的方向(即專案排列的方向)
注意：主軸和側軸是會變化的，看flex-direction設定誰為主軸，剩下的就是側軸。而子元素是跟著主軸來排列的
屬性值說明
row預設值從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
6.2.3.2 justify-content設定主軸上子元素排列方式
justify-content屬性定義了專案在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是哪個
屬性值說明
flex-start
預設值 從頭開始 如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
主軸居中對齊(如果主軸是x軸則水平居中)
space-around
平分剩餘空間
space-between
先兩邊貼邊 再平分剩餘空間(重要)
6.2.3.3flex-wrap設定子元素是否換行
預設情況下，專案都排列在一條線上(又稱軸線)上，flex-wrap屬性定義，flex布局中預設是不換行的
6.2.3.4 align-items設定側軸上子元素排列方式(單行)
該屬性控制子項在側軸(預設是y軸)上的排列方式 ，在子項為單項時使用
屬性值說明
flex-start
從上到下
flex-end
從下到上
center
擠在一起(垂直居中)
stretch
拉伸(預設值)有高度不能拉伸
6.2.3.5align-content設定側軸上的子元素的排列方式(多行)
設定子項在側軸上的排列方式，並且只能用於子項出現換行的情況(多行)，在單行下是沒有效果的。
屬性值說明
flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸西安分部在兩頭，在平分剩餘空間
stretch
設定子項元素高度平分父元素高度
align-content和align-items區別
align-items適用於單**況下，只有上對齊、下對齊、居中和拉伸
align-content適用於換行(多行)情況下(單**況下無效)，可設定上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值
6.2.3.6 flex-flow
flex-flow屬性時flex-direction和flex-wrap屬性的復合屬性
flex-flow：row wrap;設定主軸為x軸，換行
屬性值說明
no-wrap
預設值，不換行
wrap
換行6.2.4 flex布局子項常見屬性
6.2.4.1flex屬性
flex屬性定義子專案分配剩餘空間，用flex來表示佔多少份數
可為數字，也可為百分比，百分比相對於父級來說
6.2.4.2align-self控制子項自己在側軸上的排列方式
align-self屬性 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。
預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
6.2.4.3 order屬性定義專案的排列順序
數值越小，排列越靠前，預設為0
注意：和z-index不一樣。
背景線性漸變
語法1：background: linear-gradient(起始方向，顏色1，眼色，……);background: -webkit-linear-gradient(left, red, blue);background: -webkit-linear-graident(left top,red ,blue);(起始方向為左上角)
背景漸變必須新增瀏覽器私有字首
起始方向可以是：方位名詞或度數，如果省略預設為top
設定側軸上子元素排列方式 flex布局
常見父項屬性 1 flex direction 設定主軸方向，預設為x軸 屬性值 row 從左到右，x軸 預設 row reverse 從右到左 column 從上到下 column reverse 從下到上 2 justify content 設定主軸上的子元素排列方式 屬性值 flex star...
設定側軸上子元素排列方式 flex布局
flex布局優缺點 布局簡單，移動端使用較廣 pc端支援較差，ie11或更低版本不支援 flex布局原理 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 flo...
子元素上的margin作用到了父元素上
margin外邊距合併詳解 以上 的初衷是讓子元素的頂部距離父元素30px，但是事實上卻並沒有實現預 期的效果，而是子元素頂部緊貼父元素，並且margin top好像轉移給了父元素，讓父元素產生上外邊距。這其實是乙個典型的外邊距合併問題，但是並非 所有的瀏覽器都會產生這種情況，一般標準瀏覽器都會出現...