兩種模式可以利用box-sizing屬性進行自行選擇：
標準模式：box-sizing:content-box;
怪異模式：box-sizing:border-box;
兩種模式的區別：
標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。
標準模式：盒子總寬度/高度 = 內容區寬度 /高度+padding+border + margin。
效果：
怪異模式：盒子總寬度/高度=width/height+margin。
效果：
在標準盒模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
行為型模型 策略模式
策略 演算法 抽象。concretestrategy 各種策略 演算法 的具體實現。context 策略的外部封裝類，或者說策略的容器類。根據不同策略執行不同的行為。策略由外部環境決定。好處 演算法的實現 和 客戶端的使用 解耦合 使得演算法變化，不會影響客戶端 適用於 準備一組演算法，並將每乙個演...
行為型模型 狀態模式
context 使用者物件 擁有乙個state型別的成員，以標識物件的當前狀態 state 介面或基類 封裝與context的特定狀態相關的行為 concretestate 介面實現類或子類 實現了乙個與context某個狀態相關的行為。適用於 物件的行為，依賴於它所處的當前狀態。行為隨狀態改變而改...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...