css是一种具体的语言，不像js那么逻辑。因此，即使是长期从事前端的工程师，也很难掌握css。接下来，我们将一步步揭开css的神秘面纱，深入理解css的盒子模型，让我们在布局上有一个质的提升。盒子模型相信很多人都不陌生。盒子模型简单的理解就是margin+border+padding+content。页面上呈现的效果其实就是一个堆叠起来的盒子。每个元素实际上包含一个“外框”和一个“内框”。“外框”负责元素是显示在一行还是换行，而“内框”负责宽度、高度和内容显示。我们都知道inline-block（inline对应“外框”，block对应“内框”），而block可以简单理解为block-block，table为block-table（因为还有inline-table）.内联盒模型内容区（contentarea）内联盒（inlinebox）线盒盒（linebox）包含盒（containingbox）内容区（contentarea）。内容区域是指围绕文本的不可见框。它的大小只受角色本身的特性控制。它本质上是一个字符框。但是，图片等替换元素的显示内容并不是文本，所以内容区域可以看成是元素本身。行内框（inlinebox）。“行内框”并不是让内容分块显示，而是排成一行。这里的行内框指的是元素的“外部框”，用来判断元素是行内还是块级。框又可以细分为“行内框”和“匿名行内框”。如下：线框（linebox）。每一行都是一个行框，每个行框又由行内框组成。注意：line-height作用于linebox，最终决定了高度（替换元素除外，后面会讲到的是替换元素）。含盒。这个盒子是由一行一行的“lineboxboxes”组成的（在css规范中，没有“containingboxes”这个词，更准确的叫法是“containingblock”。width的默认值是auto，但是很多人不明白这个值是什么意思，因为auto在不同的场景下会有不同的表现：fill-availablefit-contentmin-contentmax-contentfill-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不会，如下图：left,right,top,bottom，宽高由非静态祖先元素位置决定，替换元素除外：img,video,canvas等),inline-block,table。利用这个特性，我们可以实现文本整体居中，多行显示在左侧，如下：min-content：收缩到最小。它在表格中最常见。当每栏空间不够时，文字能断就断。中文单词可以随便断，但是英文单词不能断。根据这个特性，可以实现凹凸图形等效果，如下：max-content：超出容器限制，内容很长的连续英文或数字，或者行内元素设置为white-space：nowrap。heightheight的默认值也是auto，也就是说它的高度是由内部元素堆叠形成的。内部元素框的高度就是元素的高度。但是在绝对定位中，如果同时设置了top和bottom，它的高度是用top和bottom从父框的高度中减去的。高度：100%。如果父元素高度为auto，则子元素高度：100%无效。要让子元素height:100%生效，那么：设置父元素的显式高度值，并使用绝对定位（绝对定位元素的百分比是根据paddingBox计算的，非绝对定位的百分比elements是根据contentbox计算的）替换元素因为替换元素在很多方面都和普通的内联元素不同，所以这里我们重点说说替换元素。根据“外部盒子”是行内还是块级，我们将元素分为行内元素和块级元素，根据内容是否可替换，我们将元素分为可替换元素和不可替换元素。、
