一、怪異盒模型：
1、box-sizing:
屬性值：
box-sizing:content-box; 常規盒模型
box-sizing:border-box: 怪異盒模型（ie盒模型）
2、觸發怪異盒模型：
box-sizing:border-box;
3、 怪異盒模型特點：padding和border都會在元素的寬高的內部，不會把盒子撐大。
*二、 彈性盒模型
作用：控制離它最近的一層子元素的布局方式。
特點：a：彈性盒子裡面的離它最近的一層子元素都可以新增大小。
b: 如果想讓彈性盒子裡面的乙個子元素左右上下居中，只需要給子元素新增 margin:auto;即可
c: 彈性盒子裡面的子元素都是沿著「主軸」排列
「主軸」:有可能是x軸也有可能是y軸，如果x軸為主軸，y軸就是側軸。
注：預設情況下x軸為主軸。
一：觸發彈性盒子：
display:flex;
二：改變主軸的方向：
flex-direction:
屬性值：
row (預設值：x軸為主軸)
column (y軸為主軸)
column-reverse (以y軸為主軸反向排列)
row-reverse (以x軸為主軸反向排列)
三：改變主軸的對齊方式：
justify-content:
屬性值：
flex-start 預設狀態：在彈性盒子開始的地方顯示
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
四：側軸的對齊方式:
align-items:
flex-start 側軸開始的位置
flex-end 側軸結束的位置
center 側軸居中的位置
baseline 基線（flex-start等效）
stretch（預設值） 拉伸
五：控制彈性盒子裡面的子元素（靈活元素）換行處理：
flex-wrap:
wrap 換行
nowrap 不換行
wrap-reverse 反向換行
六：控制行與行的對齊方式：
align-content:
flex-start 預設狀態：行與行之間不存在預設的行間距
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
新增在子元素上面的屬性：
一：控制彈性盒子裡面 某個 靈活元素 在側軸的對齊方式。
align-self:
auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
二：控制子元素的排列順序：
order: 數值越大越往後排列。支援負數。
三：剩餘空間的分配：
flex:1; 分配主軸剩餘空間。（父元素內有多個子元素，如果有元素沒有設定寬或高，那麼給那個元素新增此屬性就會自動分配父元素剩餘的空間）
css3標準盒模型和怪異 IE 盒模型
前端和盒模型包括兩種 分別是w3c盒模型和ie盒模型 w3c盒模型包括content padding border margin 其中width content ie盒模型包括content padding border margin 其中width content padding border 在...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...