1、概念
IE盒子模型(怪異盒模型)

在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border寬度=我們設置的width(height也是如此)，盒子總寬度/高度=width/height + margin 。

2、Box-sizing
CSS3指定盒子模型種類
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing: content-box;//寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
box-sizing: border-box;// 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
即box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為W3C（標準盒模型），border-box為IE盒子模型（怪異盒模型）。
四、彈性盒模型（flex box）
1、定義
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

2、CSS3彈性盒內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。

css display:flex 屬性： https://www.jianshu.com/p/d9373a86b748

【實例4.1】<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px;} </style>

3、父元素上的屬性
3.1display 屬性
display:flex;開啟彈性盒
display:flex;屬性設置后子元素默認水平排列
3.2flex-direction屬性
（1）定義
flex-direction 屬性指定了彈性子元素在父容器中的位置。
（2）語法

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:（display: flex;必須同時有）
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
（3）實例

.flex-container { display: flex; flex-direction: column; width: 400px; height: 250px; background-color: lightgrey;}

3.3justify-content 屬性（主要是彈塊 初始位置 ）
（1）定義
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
（2）語法
justify-content: flex-start | flex-end | center | space-between | space-around
各個值解析:
①flex-start：
彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
②flex-end：
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續彈性項依次平齊擺放。
③center：
彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
④space-between：
彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
⑤space-around：
彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
效果圖展示：

（3）實例

.flex-container { display: flex; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; }

3.4align-items 屬性

（1）定義

align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

（2）語法

align-items: flex-start | flex-end | center

各個值解析:

①flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

②flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

③center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

（3）實例

4、子元素上的屬性

（但是注意：例如 中間 3個全是相同活塊注意）

4.1flex-grow
flex-grow 根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。
默認為0，即如果存在剩余空間，也不放大。
如果只有一個子元素設置，那么按擴展因子轉化的百分比對其分配剩余空間。0.1即10%，1即100%，超出按100%

【實例4-2】<div class="flex-container"> <div class="flex-item1">flex item 1</div> <div class="flex-item2">flex item 2</div> <div class="flex-item3">flex item 3</div> </div> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: gold; } .flex-item1 { height: 150px; background-color: red; flex-grow: 1; } .flex-item2 { height: 150px; background-color: green; flex-grow: 2; } .flex-item3 { height: 150px; background-color: blue; flex-grow: 1; } </style>

總結

以上是生活随笔為你收集整理的怪异盒模型and弹性盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。