摘要：下面我们就一步一步揭开的神秘面纱，深入理解盒模型，这对我们在布局上会有一个质的提升。与内联元素的百分比值与内联元素。
css是一门具象语言，并不像js那样具有逻辑性，因此，就算入行了前端很久的工程师，也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱，深入理解css盒模型，这对我们在布局上会有一个质的提升。
盒子模型
相信很多人对这幅图都不陌生，盒子模型简单点理解就是外边距(margin)+边框(border)+内边距(padding)+内容(content)，页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个“外在盒子”和一个“内在盒子”，其中“外在盒子”负责元素是一行显示还是换行显示，而“内在盒子”则负责宽高、内容展现。我们都知道inline-block（inline对应于“外在盒子”，block对应于“内在盒子”），而block可以简单地理解为block-block，table为block-table（因为还有一个inline-table）。
内容区域(content area)
内联盒子(inline box)
行框盒子(line box)
包含盒子(containing box)
内容区域(content area)。内容区域指的是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(character box)；但是图片这样的替换元素，其显示内容不是文字，因此内容区域可以看成是元素自身。
内联盒子(inline box)。“内联盒子”不会让内容成块显示，而是排成一行，这里的内联盒子指的是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。如下：
行框盒子(line box)。每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成，注意：line-height是作用在行框盒子上的，并最终决定高度(替换元素除外，后面会讲解什么是替换元素)。
包含盒子(containing box)。此盒子由一行一行的“行框盒子”组成（css规范中，并没有“包含盒子”的说法，更准确的称呼是“包含块”(containing block)。
widthwidth的默认值是auto，但很多人却都不理解这个值是什么意思，因为auto在不同场景会有不同的表现：
fill-available
fit-content
min-content
max-content
fill-available：充分利用可用空间，例如div、p这些元素的宽度是默认100%于父级容器的。但是width: auto却不同于width: 100%，这是很多人不理解的地方。如果你设置了width: 100%，这里指的是内容区域100%，即css3中的content-box，这时如果你设置了padding、border或者margin，元素都会撑破父元素，从而破坏布局。你当然可以设置box-sizing: border-box，但可惜的是css3中没有margin-box，这时候你如果设置了margin，依然会撑破父元素，但是width: auto却不会，如下所示：
fit-content：收缩到合适，典型代表浮动、绝对定位（有例外，设置了对立属性：left、right、top、bottom时，宽度和高度由祖先元素position非static的元素决定，但是替换元素除外：img、video、canvas等）、inline-block、table。利用这个特性我们可以实现，文字整体居中，多行则居左显示，如下：
min-content：收缩到最小。在表格中最常见，当每一列空间都不够的时候，文字能断则断，中文随便断，英文单词不能断。可以根据这个特性实现凹凸图形等效果，如下：
max-content：超出容器限制，内容很长的连续英文或数字，或者内联元素被设置为了white-space: nowrap。
heightheight的默认值也是auto，指的是其高度由内部元素堆叠而成，内部元素盒子有多高，元素就有多高。但在绝对定位中，若同时设置了top与bottom，则其高度由父盒子高度减去top与bottom。
height: 100%。如果父元素height为auto，则子元素height:100%是无效的，要想子元素height: 100%生效，则：
父元素设定显式高度值
使用绝对定位（绝对定位元素的百分比是根据padding box计算的，非绝对定位元素百分比是根据content box计算的）
替换元素由于替换元素在很多表现上都与普通内联元素不一样，因此在这里着重介绍一下替换元素。
根据“外在盒子”是内联还是块级，我们把元素分为内联元素和块级元素，而根据内容是否可替换，我们把元素分为可替换元素和非替换元素。
，