网页设计参考线 第1篇
上面代码中 p 元素也是有参考线的，因为文字一定处在行盒的里面，如果没设置行盒，则会自动增加一个行盒包裹文字。因为文字是根据参考线排列的，如果没有行盒，就没有参考线，那么文字无法排列了。所以文字一定在行盒里面，会包裹一个匿名行盒。
文字也有参考线，元素也有参考线，默认情况下是基线对齐（文字的基线和元素的基线对齐）的，比如 p元素的基线和M文字的基线对齐。
行盒是：inline-box
**line-box：**行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
line-box 是承载文字内容的必要条件，以下情况不生成line-box
vertical-align的值：
baseline：该元素的基线与父元素的基线对齐 super：该元素的基线与父元素的上基线对齐 sub：该元素的基线与父元素的下基线对齐 text-top：该元素的 top 与父元素的 text top 对齐（注意是增加 gap 的） text-bottom：该元素的 bottom 与父元素的 text bottom 对齐（注意是增加 gap 的） top：该元素的 top 与 line-box 的顶边对齐 bottom：该元素的 bottom 与 line-box 的底边对齐 middle：该元素的中线（content-area的一半）与父元素的X字母高度的一半对齐。 数值：相对于父元素基线的偏移量。向上为正数，向下为负数。 百分比：相对于自身的 virtual-area 的高度。
一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
图片：图片的基线位置位于图片的下外边距位置，所以图片会有白边 两种解决方法：font-size:0 或者 display: block
表单元素：表单元素的基线位置在内容的底边
总结的比较乱，凑活看吧……
网页设计参考线 第2篇
font-size、line-height、vertical-align、font-family 这些属性的它们在页面里是参考的什么线，我们从文字的设计开始。
文字是通过一些文字制作软件制作的，比如fontforge 制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。 以Consolas字体为例： 文字的相对大小：1000、2048、1024 文字的实际大小（content-area，内容区）：文字顶线到底线的距离 所以行盒的背景大小，就是覆盖content-area。
网页设计参考线 第3篇
默认对齐方式为 baseline，数量值均是相对于 baseline 而言。
实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。 行盒：inline-box 行框：line-box 数值：相对于基线的偏移量，向上为正数，向下为负数。 百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度 line-box是承载文字内容的必要条件，以下情况不生成行框：