1、一個(gè)盒子的構(gòu)成：

• 盒子中的內(nèi)容：content 寬=width 高=height

• 盒子的邊框：border

• 盒子邊框與內(nèi)容之間的距離：稱為填充---padding 內(nèi)邊距（內(nèi)補(bǔ)丁）

• 如果有多個(gè)盒子存在，盒子與盒子之間的距離：稱為邊界---margin喝检，外邊距（外補(bǔ)丁）

• 整個(gè)盒子模型在網(wǎng)頁(yè)中所占的寬度：左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊
  界

  
  

• 關(guān)于如何切圖：

PC：先看全圖分塊切，
移動(dòng)端：看所有圖片找出共同模塊性穿，分組切

• 關(guān)于適配問(wèn)題：

  
  

2、彈性布局

display: flex | inline-flex; (適用于父類容器元素上)

定義一個(gè) flex 容器愕鼓，內(nèi)聯(lián)或者根據(jù)指定的值钙态，來(lái)作用于下面的子類容器。

• box：將對(duì)象作為彈性伸縮盒顯示菇晃。（伸縮盒最老版本）
• inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示册倒。（伸縮盒最老版本）
• flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）
• inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示磺送。（伸縮盒過(guò)渡版本）
• flex：將對(duì)象作為彈性伸縮盒顯示驻子。（伸縮盒最新版本）
• inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示灿意。（伸縮盒最新版本）

2.1 H5 用的老版本伸縮盒模型 display: box;

常用屬性：

• box-flex:子元素的之間的比例。
  可以定義把父元素分成幾份崇呵，如一個(gè)父 div 的 width：400px缤剧；里面有三
  個(gè)子 div，分別定義-webkit-box-flex：2; -webkit-box-flex：1; -webkitbox-flex：1;那么三個(gè)子
  div 的寬度會(huì)自動(dòng)充滿整個(gè)父盒子域慷，寬度分別是
  400(2/2+1+1)=200px; 400(1/2+1+1)=100px; 400*(1/2+1+1)=100p
  x;
• box-orient: 用來(lái)確定子元素的方向荒辕，是橫著排還是豎著走。
  可選的值有：horizontal犹褒、vertical抵窒、inline-axis、block-axis叠骑、inherit
  Horizontal 與 inline-axis 的表現(xiàn)是一致的李皇，讓子元素橫排。
  Vertical 與 block-axis 的表現(xiàn)是一致的宙枷，讓子元素縱列掉房。
  l box-direction：是用來(lái)確定子元素的排列順序。
  可選的值有：normal朦拖、reverse圃阳、inherit
  Normal 是默認(rèn)值，表示按照正常順序排列璧帝，從上到下捍岳，從左到右。
  Reverse 表示與正常順序相反睬隶。
• box-align：與 box-pack 都是決定盒子內(nèi)部剩余空間怎么使用的锣夹，
  決定了父容器里子容器的垂直對(duì)齊方式。
  可選的值有：start苏潜、end银萍、center、baseline恤左、stretch
  Start 表示居頂對(duì)齊贴唇。
  End 表示居底對(duì)齊。
  Center：表示居中對(duì)齊飞袋。
  Baseline：表示與基線對(duì)齊戳气。
  Stretch 為默認(rèn)值，表示拉伸巧鸭，拉伸到與父容器等高瓶您。
• box-pack：決定了父標(biāo)簽水平遺留空間的使用。即父容器里子容器
  的水平對(duì)齊方式。
  可選的值有：start呀袱、end贸毕、center、justify
  Start 為默認(rèn)值夜赵，表示水平居左對(duì)齊明棍。
  End 表示水平居右對(duì)齊。
  Center：表示水平居中對(duì)齊油吭。
  Justify 表示水平兩端對(duì)齊击蹲。
  

2.2 新版本 display:flex;

常用屬性：

• flex-direction: row | column | row-reverse | column-reverse
  決定主軸的方向（即項(xiàng)目的排列方向）。
  

flex-warp: nowrap | wrap | wrap-reverse;
定義是否要換行婉宰，如何換行歌豺。

• justify-content:flex-start|flex-end|center|space-between|space-around
  定義項(xiàng)目在主軸上的對(duì)齊方式
  

• align-items: flex-start |flex-end |center |baseline |stretch;
  定義項(xiàng)目在交叉軸上如何對(duì)齊
  

• flex-flow: flex-direction flex-warp;
  以上屬性均加在父盒子上生效。下邊兩個(gè)是加在子元素上生效的屬性：

• flex: 是 flex-grow心包，flex-shrink类咧，flex-basis 三個(gè)屬性的簡(jiǎn)寫。
  默認(rèn)值：0 1 auto蟹腾；
  設(shè)置或檢索伸縮盒對(duì)象的子元素如何分配空間痕惋。后兩個(gè)屬性可省。
  如果縮寫 flex:1, 則其計(jì)算值為：1 1 0

flex-grow 屬性定義項(xiàng)目的放大比例娃殖，默認(rèn)為 0，即如果存在剩余空間堕虹，也不放大赴捞。
flex-shrink 屬性定義了項(xiàng)目的縮小比例郁稍，默認(rèn)為 1耀怜，即如果空間不足，該項(xiàng)目將縮小然评。
flex-basis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）抖锥。瀏覽
器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間纳像。它的默認(rèn)值為 auto拯勉，即項(xiàng)目的本來(lái)大小。

• align-self: auto |flex-start |flex-end |center |baseline |stretch;
  允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式岔帽，可覆蓋 align-items 屬性犀勒。默認(rèn)
  值為auto贾费，表示繼承父元素的align-items屬性檐盟。除auto外，其余同align-items导犹。
  

總結(jié)：
伸縮盒模型
父元素 子元素
方向 主軸對(duì)齊(x) 交叉軸對(duì)齊(y) 分配空間
box
box-orient
box-pack box-align box-flex
box-direction
flex flex-direction Justify-content align-items flex

注：flex 新增屬性——flex-wrap(是否換行),align-self（子元素自己的對(duì)齊方式）

參考網(wǎng)址：

http://caibaojian.com/flexbox-guide.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.w3cplus.com/css3/css3-flexbox-layout.html