不学好css模型的怎么入山门？师傅与徒弟的真实独白
目錄
前言
開篇
定義
ie盒
標準盒
真實占有寬度
結局
前言
很久很久以前，在一個小山莊里面住著一位少年。這位少年出生之時天有異向，七星連珠，乃神人也。三歲那年他跟著師傅上山學藝，面臨這人生的第一道關卡。這位少年我們不妨叫其路人乙，他的師傅我們叫做路人甲。
路人甲:小徒弟，什么是CSS盒模型 談談你對他的認知和理解，三日之內給與回復
路人乙:師傅，徒兒告退，三日之后再來匯報
開篇
此時的路人甲年齡偏小，當時也沒有什么筆記本電腦啥的。他來到了沙灘，思考著，css盒模型到底是什么呢，陷入了沉思
就在這時有一位仙人來此，我們叫他路人丙。路人丙想，要不敲他三下，晚上三更來找我，只不過這個小屁孩怕是領悟不了。隨即在沙灘上找出了一根木棍，在沙灘上寫下幾行文字。
路人丙:小屁孩，看我操作。
路人乙：仙人，你為啥不是變的，還是找的木棍。
路人丙:這不是重點。
<!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>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 = content box-sizing: border-box; 這是IE盒模型， width = border + padding + content現在你對css盒子有了更深的理解了，可以回去找你的師傅了?
說著就又消失在茫茫的大海里。
結局
說著路人乙興沖沖的到達了山門，找到了師傅。告知他所遇到的一切
師傅很滿意，將小徒弟收入了山門。
在山門里小徒弟有開始學習了margin，border，padding，width，height的使用，進一步拓展了自己
一個沉迷于故事的講述者，本故事純屬虛構，歡迎交流。后續有想法會繼續更新修改，
本問題創作源于面經。
歡迎一起學習交流 讓路人乙可以學到更多的知識。
?
總結
以上是生活随笔為你收集整理的不学好css模型的怎么入山门？师傅与徒弟的真实独白的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于QT实现简单的音乐播放器
- 下一篇： RIA技术概括