先来张Wikipedia上的The CSS Box Model：
https://en.wikipedia.org/wiki/CSS_box_model?wprov=sfti1
The CSS Box Model说明了盒模型的具体表现样式：
外边距（margin）边框（border）内边距（padding）内容（content）宽度（width）、高度（height）…… CSS 基础框盒模型介绍developer.mozilla.org网络上关于盒模型的各种解释都已经铺天盖地了，这里就不重复那些基础的了，只写我自己在意的部分：
CSS中有一个属性叫box-sizing:
box-sizingdeveloper.mozilla.orgbox-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
box-sizing只有两个属性：
content-box默认值，标准盒子模型。border-box
如果没有加padding和border，内容盒（content-box）和边框盒（border-box）之间并没有任何区别。同时指定width、padding和border后方可看出二者的区别，也会更明白为何border-box更好用，更符合人类大脑思维。
简述 padding规定了内容与边框之间的填充距离。border默认为0，可以随意指定它任何一边的边框。margin规定了盒子与盒子之间的距离，它不会被计算到盒子的总体宽高之中，盒子里面的盒子的margin会影响父级元素的宽高。margin用来隔开元素与元素的间距padding用来隔开元素与内容的间隔margin用于布局，分开元素，使元素与元素互不相干padding用于元素与内容之间的间隔，让内容与元素之间有一段距离有了CSS后，块元素、内联元素可以视乎不存在，反正CSS都能将其：
display:block;
display:inline;
display:inline-block;(以块状形式表现的行内元素)
margin合并
父子margin合并【此处是个奇葩……只有上下会重叠，左右从来不重叠，重叠的结果向来不符合人类思维……】不符合预期，合并要用padding/border挡住，或者用overflow:hidden，最好的方法就是display:flex;兄弟margin合并
符合预期，合并可用inline-block消除。