一、 傳統布局與flex布局
1. 傳統布局
* 相容性好
* 布局繁瑣
* 侷限性，不能再移動端很好的布局
2. flex彈性布局
* 操作方便，布局極為簡單，移動端應用廣泛
* pc端瀏覽器支援情況較差
* ie 11或更低版本，不支援或僅部分支援
* 建議：
* 如果是pc端頁面布局，我們還是用傳統布局。
* 如果是移動端或者不考慮相容性問題的pc端頁面布局，我們還是使用flex
1. 布局原理
* flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
* 當我們為父元素設為flex布局以後，子元素的float(浮動)、clear(清除浮動)和vertical-align( 屬性設定元素的垂直對齊方式)屬性將失效。
* 伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
* 採用flex布局的元素，被稱為flex容器（flex container），簡稱「容器」。它所有的子元素自動成為容器成員，稱為flex專案（flex item），簡稱「專案」。
* 體驗中的div就是flex父容器。
* 體驗中span就是子容器flex專案
* 子容器可以橫向排列也可以縱向排列
*總結flex布局原理：
* 就是通過給父盒子新增flex屬性·，來控制子盒子的位置和排列方式。
1. 常見父項屬性
* flex-direction:設定主軸方向
* justify-content：設定主軸上的子元素排列方式
* flex-wrap：設定子元素是否換行
* aline-content：設定側軸上的子元素的排列方式的（多行）
* aline-items：設定側軸上的子元素排列方式（單行）
* flex-flow：符合屬性，相當於同時設定了flex-direction和flex-wrap
2.flex-direction設定主軸方向
1. 在flex布局中，是分為主軸和側軸兩個方向的，同樣的叫法有：行和列、x軸和y軸
* 預設主軸方向是x軸方向，水平向右
* 預設側軸方向就是y軸方向，水平向下
2. 屬性值
* row：預設值，從左到右
* row-reverse：從右到左
* column：從上到下
* column-reverse：從下到上
* flex-direction屬性決定主軸的方向（即專案的排列方向）。注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸，而我們的子元素是跟著主軸來排列的
3.justify-content 設定主軸上的子元素排列方式
1. 屬性值：
* flex-star：預設值，從頭部開始，如果主軸是x軸，則從左到右
* flex-end：從尾部開始
* center：在主軸居中對齊（如果主軸是x軸則水平居中）
* space-around：平均分配剩餘空間
* space-between：先兩邊貼邊，再平分剩餘空間（ 重要）
2. justify-content屬性定義了專案在主軸上的對齊方式。注意：使用這個屬性之前一定要確定好主軸是哪個
4.flex-wrap 設定子元素是否換行
1. 預設情況下，專案都排在一條線上（又稱「軸線」）上。flex-wrap屬性定義，flex布局中預設是不換行的。
2. 屬性值：
* nowrap：預設值，不換行
* wrap：換行
5.align-items 設定側軸上的子元素排列方式（單行）
1. 該屬性是控制子項在側軸（預設是y軸）上的排列方式，在子項為單項的時候使用
2. 屬性值：
* fle-start：預設值，從上到下
* flex-end：從下到上
* center：擠在一起居中（垂直居中）
* stretch：拉伸
6.align-content 設定側軸上的子元素的排列方式（多行）
1. 設定子項在側軸上的排列方式並且只能用於子項出現換行的情況（多行），在單行下是沒有效果的。
2. 屬性值：
* flex-start：預設值，在側軸的頭部開始排列
* flex-end：在側軸的尾部開始排列
* center：在側軸的中間顯示
* space-around：子項在側軸平分剩餘空間
* space-between：子項在側軸先分布在兩頭，然後在再平分剩餘空間
* stretch：設定子項元素高度平分父元素高度
* align-items和align-content的區別：
* align-items 適用於單**況下，只有上對齊、下對齊、居中和拉伸
* align-content 適用於換行（多行）的情況下（單**況下無效），可以設定上對齊、下對齊、居中、拉神以及平均分配剩餘空間等屬性值。
* 總結就是單行找align-items，多行找align-content
7.flex-flow
* flex-flow 屬性是 flex-direction和flex-wrap 屬性的復合屬性
* flex-flow：row wrap； //沿主軸（x軸）方向排列，換行
1. 常見子項屬性
* flex：子專案佔的份數
* align-self：控制子專案自己在側軸的排列方式
* order：定義子專案的排列順序（前後順序）
2.flex屬性
1. flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
2. 屬性值：
* flex：； //default(預設值)：0
3.align-self 控制子項自己在側軸上的排列方式
* align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可以覆蓋align-items屬性。預設值auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
4.order屬性定義專案的排列順序
* 數值越小，排列越靠前，預設值為0。
* 注意：和z-index不一樣。
知識點整理
一 標準庫容器和演算法 1.順序容器 與前面類似 2.關聯容器 map和multimap 元素包含key 鍵 和值 value 兩部分 按照鍵對元素排序 map不允許重複元素出現，但multimap可以 set和multliset 是包含已排序物件的關聯容器 只是單純的鍵的集合 set不允許重複鍵出...
知識點整理
一 標準庫容器和演算法 1.順序容器 與前面類似 2.關聯容器 map和multimap 元素包含key 鍵 和值 value 兩部分 按照鍵對元素排序 map不允許重複元素出現，但multimap可以 set和multliset 是包含已排序物件的關聯容器 只是單純的鍵的集合 set不允許重複鍵出...
知識點整理
一 狀態控制碼 code，control flag 標誌位欄位 u a p r s f 佔6位元。各 位元的含義如下 ack 確認位元 acknowledge 只有當ack 1時確認號字段才有效,代表這個封包為確認封包。當ack 0時，確認號無效。psh push function 若為1時，代表要...