盒模型

盒模型 包括margin部分，盒子(內容區)不包括margin部分

css中的盒模型分兩種

w3c標準盒模型，盒子 = width+padding+border，width不包含padding、border
IE6混雜模式盒模型，盒子 = width-padding-border，width包含padding、border

css3擁有設置盒模型種類的屬性

• w3c標準模式盒子
  box-sizing:border-box
• IE6混雜模式盒子
  box-sizing:content-box

彈性盒子

當頁面需要適應不同的屏幕大小以及設備類型時，為了確保元素擁有恰當布局，我們要按比例分配元素寬高，因此要引入彈性盒子。
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
為父級設置display: flex，父級變為一個彈性容器，一個彈性容器可以擁有多個彈性子元素。

**設置在項目（子元素）上的6個屬性：flex-grow、flex-shrink、flex-basis、order、align-self **

• flex-grow
  按比例分配盒子剩余空間（參數可變）
  div{
  display: flex;
  width: 400px;
  height: 400px;
  border: 1px solid black;
  }
  div button{
  width: 100px;
  height: 50px;
  flex-grow: 1;
  }
  若有三個div，此時每個div會分配剩余寬度的1/3，即33.33...px,因此 每個div當前寬度約為133px。
• flex-shrink
  將超出盒子的部分，按比例砍掉，元素越大，砍掉的也就越多
  縮減寬度 =(flex-shrink1 \* width1) /( flex-shrink1 \* width1 + flex-shrink2 \* width2) \* moreWidth
• flex-basis
  伸縮基準值，即為元素占位，會覆蓋掉width的值。當基準值相加大于容器寬度時，與flex-shink搭配使用，按所占盒子比例分配寬度。
  分配寬度 = ( flex-basis/(flex-basis相加) ) * 容器的寬度
• flex
  flex-grow、flex-shrink、flex-basis的復合屬性
  flex:3 ---> flex:3 1 0%;
  flexbox布局和原來的布局是兩個概念，部分css屬性在flexbox盒子里面不起作用，如 float， clear， column,vertical-align 等等
• order
  定義項目排列順序，數值越小，排列越靠前，默認值為0
• align-self
  設置與其他項目不同的對齊方式（與align-items參數相同），默認值auto，表示繼承父級align-items的屬性。
  可覆蓋。

設置在父級（容器）上的6個屬性：flex-direction、flex-wrap、flex-flow
、justify-content、align-items、align-content

• flex-direction
  決定主軸的方向,即子元素的排列方向

  flex-direction: row;            //(默認值)主軸為水平方向，起點在左端。
  flex-direction: row-reverse;    //主軸為水平方向，起點在右端。
  flex-direction: column;         //主軸為垂直方向，起點在上端。
  flex-direction: column-reverse; //主軸為垂直方向，起點在下端。
  

• flex-wrap
  默認情況下，項目都排在軸線上。如果一條軸線排不下，就要用到flex-wrap換行。
  flex-wrap: nowrap; //（默認）不換行。
  flex-wrap: wrap; // 換行，第一行在上方。
  flex-wrap: nowrap; //換行，第一行在下方。

• flex-flow
  flex-direction和flex-wrap的復合屬性，默認值為row、nowrap。

• justify-content
  定義了項目在主軸上的對齊方式，不管子元素有幾列，都只看成一根軸線。
  假設主軸為從左到右
  justify-content: flex-start; //（默認）左對齊
  justify-content: flex-end; //右對齊
  justify-content: center; //居中
  justify-content: space-between;//兩端對齊，項目之間的間隔都相等。
  justify-content: space-around; //每個項目兩側的間隔都相等，項目與邊框有距離

• align-items
  假設交叉軸從上到下
  align-items: stretch; //（默認）若項目未設置高度，將占滿整個容器的高度。
  align-items: flex-start; //軸線分散排列在上部
  align-items: flex-end; //軸線分散排列在下部
  align-items: center; //軸線分散排列在中部
  align-items:baseline; //與項目的第一行文字的基線對齊，沒有文字按底部對齊

• align-content
  定義了多根軸線的對齊方式，若項目只有一根軸線，該屬性不起作用。
  align-content: stretch; //（默認）軸線占滿整個交叉軸。
  align-content: flex-start; //軸線緊挨著排列在上部
  align-content: flex-end; //軸線緊挨著排列在下部
  align-content: center; //軸線緊挨著排列在中部
  align-content: space-between; //與交叉軸兩端排列，軸線之間的間隔平均分布
  align-content: space-around; //每根軸線兩側的間隔都相等，軸線與邊框有距離