目錄
前言
開篇
定義
ie盒
标準盒
真實占有寬度
結局
前言
很久很久以前，在一個小山莊裡面住着一位少年。這位少年出生之時天有異向，七星連珠，乃神人也。三歲那年他跟着師傅上山學藝，面臨這人生的第一道關卡。這位少年我們不妨叫其路人乙，他的師傅我們叫做路人甲。
路人甲:小徒弟，什麼是CSS盒模型 談談你對他的認知和了解，三日之内給與回複
路人乙:師傅，徒兒告退，三日之後再來彙報
開篇
此時的路人甲年齡偏小，當時也沒有什麼筆記本電腦啥的。他來到了沙灘，思考着，css盒模型到底是什麼呢，陷入了沉思
就在這時有一位仙人來此，我們叫他路人丙。路人丙想，要不敲他三下，晚上三更來找我，隻不過這個小屁孩怕是領悟不了。随即在沙灘上找出了一根木棍，在沙灘上寫下幾行文字。
路人丙:小屁孩，看我操作。
路人乙：仙人，你為啥不是變的，還是找的木棍。
路人丙:這不是重點。
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> div { width: 100px; height: 100px; border: 10px solid red; background-color: pink; margin: 10px; padding: 10px; }style>head><body> <div> 我是路人乙 我比較帥氣 div>body>html>
路人丙:看懂了嗎，談談你的了解
路人乙：
定義在 CSS 盒子模型 規定了元素處理元素的幾種方式：1width和height：内容的寬度、高度(不是盒子的寬度、高度)。2padding：内邊距。3border：邊框。4margin：外邊距。
路人丙心想，這小屁孩果然是一名奇才，容我好好點撥一番，以後好在社會上真正立足。
說這時，
路人丙:你知道在IE盒子和标準盒的差別嗎
路人乙:我不知道 可否告知一下
說着打開
标準盒
路人丙:标準盒包括margin border padding content部分 content部分不包括padding，border内容
ie盒包括margin border padding content部分 content部分包括padding，border内容
路人乙
CSS盒模型和IE盒模型的差別：在 标準盒子模型中，width 和 height 指的是内容區域的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。IE盒子模型中，width 和 height 指的是内容區域+border+padding的寬度和高度。
路人丙：既然你對盒子有了新的體會和了解，我們來看看真實占用寬高
.box1{ width: 100px; height: 100px; padding: 100px; border: 1px solid red; }
.box2{ width: 250px; height: 250px; padding: 25px; border: 1px solid red; }
路人乙：
真實占有寬度 = 左border + 左padding + width + 右padding + 右border如果想保持一個盒子的真實占有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把别的盒子擠下去。
路人丙:
切換盒模型
box-sizing: context-box; 這是W3C盒模型，width = contentbox-sizing: border-box; 這是IE盒模型， width = border + padding + content
現在你對css盒子有了更深的了解了，可以回去找你的師傅了
說着就又消失在茫茫的大海裡。
結局
說着路人乙興沖沖的到達了山門，找到了師傅。告知他所遇到的一切
師傅很滿意，将小徒弟收入了山門。
在山門裡小徒弟有開始學習了margin，border，padding，width，height的使用，進一步拓展了自己
一個沉迷于故事的講述者，本故事純屬虛構，歡迎交流。後續有想法會繼續更新修改，
本問題創作源于面經。
歡迎一起學習交流 讓路人乙可以學到更多的知識。