sizebox模型下载_css盒子模型：内联盒模型、width、height、替换元素、边距、border...

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)。

width

width的默认值是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，元素都会撑破父元素&