盒模型盒模型之所以被称为“盒”是因为在一个页面布局中，文档中的每一个元素（块级元素）呈现为一个长方形的“盒子”，这个“盒子”包含：内容（content）+内边距（padding）+边框（border）+外边距（padding），如图：图片引用自“https://developer.mozilla.org...”盒子模型分为标准盒子模型和IE盒子模型。在标准盒子模型下，设置盒子的width值后，这个值只包含内容的宽高，而在IE盒子模型下，这个值是content+padding+border后的宽高。示例：.test1{宽度：200px；高度：200px；填充：50px；border:10pxdottedred;}在标准盒模型下，test1实际占用的宽度为：border-left-width+padding-left+width+padding-right+border-right-width=320px;实际高度是一样的。在IE盒子模型中，test1实际占用的宽度为200px；而内容部分的实际宽度为：width-border-left-width-padding-left-padding-right-border-right-width=80px;内容部分的实际宽度是高同理心。IE6+浏览器默认使用标准框模型。随着ie6-的淘汰，标准/IE盒模型问题不再是问题。在实际开发过程中，当宽度为百分比时，往往会因为1px的边框导致宽度无法控制。这时候可以使用box-sizing:border-box;对特定元素应用IE盒模型，使border和padding值都包含在设置的宽高范围内。内联盒盒模型（line-boxes）在上面对盒模型的解释中，增加了一个限制，指的是块级元素。对于行内元素，在页面布局结构中，它们也会呈现为一个矩形框，但是这个框的宽度和高度是无法定义的。内联元素的盒子可以称为行内盒子。行内框的宽和高分别是周围元素的宽和高。例如：图中文字的白色区域为行内框，白色区域的宽高为行内框的宽高，这里设置的文字大小为60px；7个字符，所以行内框的宽高为420X60；说到行内盒，通常会提到几个属性，line-height和vertical-align。line-heightline-height的含义是指定行内框的高度。对于块级元素，line-height指定块级元素内行框的最小高度。对于非可替换内联元素，line-height用于计算内联框的高度，对于可替换内联元素，line-height大部分时间是没有作用的。line-height的值可以是一个特定的值/数字/百分比。具体值：这个不用怀疑，你定多少就多少，但一般不推荐。number：实际的line-height值是当前字体*number，如font-size:60px；行高：1.5；相当于行高：90px；百分比：计算方式同数字，如font-size:60px；行高：150%；相当于line-height:90px;line-height是继承的，但是numbers和percentages的继承方式不同，number是继承的number值，然后子元素取当前font-size的数字，percentage是根据font-size的百分比父元素的。计算后，继承结果单位的具体值。示例：数字：父元素：`.test1{font-size:20px;line-height:1.5;}`子元素:`.test2{font-size:60px;}`父元素的实际line-height为1.5*20px为30px；子元素的实际line-height继承父元素计算前的值，即1.5，所以子元素的实际line-height为1.5*60px或90px；percentage:parentelement:`.test1{font-size:20px;line-height:150%;}`Childelement:`.test2{font-size:60px;}`父元素的实际line-height是150%*20像素或30像素；子元素的实际line-height直接继承父元素，计算结果为30px；浏览器默认的line-height值是正常的，W3C将其解释为设置合理的行间距；MDN将其解释为取决于用户代理和元素的字体系列，通常默认为1.2左右。上例中chrome下使用斜体，line-height估计为1.14。在上图中，我们没有设置line-height的值，但是可以看到文字的上边缘后面有一个空隙，这就是所谓合理行距的结果。但实际上，行内盒模型的高度与line-height没有关系，我们在上图中也可以发现，行内盒在布局中所占的高度其实是由line-height决定的。当line-height为0时，linebox不再占据页面布局的位置。除了层级关系相互覆盖外，linebox不会影响其他元素的布局。是这样吗？例子：其实我们发现红色test2的上边缘位置并不是parent(0,0)的位置，也就是说我们的linebox还是占据了一部分位置，其实就是同vertical-align相关。Tips：代入内联元素是指根据元素的不同属性，值决定元素具体显示的内容，如inputtype="text/button/file"等。其他如：object/video/textarea/img等，一些在这种情况下canvas和audio也可能是替换元素。vertal-alignvertal-align用于指定行内或表格单元格元素的垂直对齐方式。vertical-align的值主要包括：baseline/top/middle/bottom/sub/super/text-top/text-bottom/percentage/specificvalue。我们先来了解一下各个值对应的位置。baseline：默认值，self-baseline与parentbox的baseline对齐，如果没有self-baseline（如img），margin的底边与parent的baseline对齐；middle：自身的垂直中点与父级的基线+位置的x-height一半对齐；percentage：在baseline的基础上，向上（百分比为正）或向下（百分比为负）抵消line-height*percentage的值；具体值：在基线的基础上，向上（值为正）或向下（负值）抵消该值；top和bottom是两个特殊值，它们使元素与线框的边框对齐，而不是参考基线。top：对齐到行内框的顶部；bottom：对齐到行内框的底部。
