一、怪異盒模型
怪異盒模型的屬性是box-sizing，他有兩個屬性值：
1、content-box
這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
簡而言之就是，一般的盒子都是屬於這種，最顯著的特點就是加上padding后，盒子會被撐大，需要減去對應的高度或寬度。
2、border-box
為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
簡而言之，為盒子添加高度或寬度之后，再給盒子添加border和padding不會使盒子撐大，邊框和padding都限制在盒子內部，常用於移動端。
二、彈性盒布局
Flex容器：采用 Flex 布局的元素的父元素；
Flex項目：采用 Flex 布局的元素的父元素的子元素；
容器默認存在兩根軸：水平的主軸和垂直的交叉軸。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；
交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。
單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
能實現下面這種骰子布局，那么恭喜你，就說明彈性盒已經掌握了，下面介紹彈性盒具體的用法及案例
flex容器屬性
1、觸發彈性盒：display:flex、inline-flex
注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
2、flex-direction屬性 決定主軸的方向（即項目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
3、flex-wrap屬性，定義子元素是否換行顯示
flex-wrap: nowrap(默認值，不換行) | wrap（換行） | wrap-reverse(反向換行);
4、 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap;
5、 justify-content屬性 定義了項目在主軸（）上的對齊方式
justify-content: flex-start | flex-end | center | space-between(兩端對齊) | space-around（自動分配）;
6、align-items屬性定義項目在側軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch（默認值）;
7、align-content屬性定義了多根軸線的對齊方式。對於單行子元素，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在側軸上執行樣式的時候，會把默認的間距給合並。對於單行子元素，該屬性不起作用
flex項目屬性
1、align-self屬性
說明：
Internet Explorer 和 Safari 瀏覽器不支持 align-self 屬性
align-self 屬性規定靈活容器內被選中項目的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
屬性值
auto 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
Stretch 元素被拉伸以適應容器。
Center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
2、order
說明：
number排序優先級，數字越大越往后排，默認為0，支持負數。
3、flex
說明：
復合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間
詳細屬性值：
縮寫「flex: 1」, 則其計算值為「1 1 0%」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
4、flex-xxx
flex-grow
一個數字，規定項目將相對於其他靈活的項目進行擴展的量。
flex-shrink
一個數字，規定項目將相對於其他靈活的項目進行收縮的量。
flex-basis
項目的長度
具體實現代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
body>div{
width: 100px;
height: 100px;
background-color: #eee;
}
span{
display: block;
width: 24px;
height: 24px;
background-color: #000;
border-radius: 12px;
}
div:nth-child(1){
display: flex;
justify-content: center;
align-items: center;
}
div:nth-child(2){
display: flex;
justify-content: space-between;
}
div:nth-child(2) span:nth-child(2){
align-self: flex-end;
}
div:nth-child(3){
display: flex;
justify-content: space-between;
}
div:nth-child(3) span:nth-child(2){
align-self: center;
}
div:nth-child(3) span:nth-child(3){
align-self: flex-end;
}
div:nth-child(4){
display: flex;
justify-content: space-between;
}
div:nth-child(4) p{
display: flex;
flex-direction: column;
justify-content: space-between;
}
div:nth-child(5){
display: flex;
justify-content: space-between;
}
div:nth-child(5) p{
display: flex;
flex-direction: column;
justify-content: space-between;
}
div:nth-child(5) p:nth-child(2){
justify-content: center;
}
div:nth-child(6){
display: flex;
justify-content: space-between;
}
div:nth-child(6) p{
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div>
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div>
<p>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>
如果感覺對自己有幫助，麻煩點一下關注，會一直盒大家分享知識的，謝謝！！！
