目录
前言
开篇
定义
ie盒
标准盒
真实占有宽度
结局
前言
很久很久以前，在一个小山庄里面住着一位少年。这位少年出生之时天有异向，七星连珠，乃神人也。三岁那年他跟着师傅上山学艺，面临这人生的第一道关卡。这位少年我们不妨叫其路人乙，他的师傅我们叫做路人甲。
路人甲:小徒弟，什么是CSS盒模型 谈谈你对他的认知和理解，三日之内给与回复
路人乙:师傅，徒儿告退，三日之后再来汇报
开篇
此时的路人甲年龄偏小，当时也没有什么笔记本电脑啥的。他来到了沙滩，思考着，css盒模型到底是什么呢，陷入了沉思
就在这时有一位仙人来此，我们叫他路人丙。路人丙想，要不敲他三下，晚上三更来找我，只不过这个小屁孩怕是领悟不了。随即在沙滩上找出了一根木棍，在沙滩上写下几行文字。
路人丙:小屁孩，看我操作。
路人乙：仙人，你为啥不是变的，还是找的木棍。
路人丙:这不是重点。
<html lang="en"><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的使用，进一步拓展了自己
一个沉迷于故事的讲述者，本故事纯属虚构，欢迎交流。后续有想法会继续更新修改，
本问题创作源于面经。
欢迎一起学习交流 让路人乙可以学到更多的知识。
扫一扫
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
