行内元素视觉格式化_html/css_WEB-ITnose

目录 [1]基本术语 [2]构造行框 [3]非替换元素 [4]替换元素

前面的话

　　行内元素没有块级元素那么简单和直接，块级元素只是生成框，通常不允许其他内容与这些框并存。而控制行内元素视觉格式化的主要是font-size、line-height、vertical-align

 

基本术语

　　在了解行内元素视觉格式化之前要先了解一些涉及到的基本术语

匿名文本

　　匿名文本(anonymous text)是指所有未包含在行内元素中的字符串

em框

　　em框在字体中定义，也称为字符框(character box)。实际的字形可能比其em框更高或更矮。在CSS中，font-size的值确定了各个em框的高度

内容区

　　在非替换元素中，内容区可能在两种。内容区可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框；而在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。内容区类似于一个块级元素的内容框

行间距

　　行间距(leading)是font-size和line-height之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部

　　[注意]行间距只应用于非替换元素

行内框

　　行内框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度等于line-height的高度；对于替换元素，元素行内框的高度则恰好等于内容区的高度

行框

　　这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界；而行框的底边要放在最低行内框的下边界

 

构造行框

　　1、替换元素：得到各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它们加在一起；非替换元素：得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值，再将line-height减去font-size，得到行的行间距，这个行间距除以2，将其一半分别应用到em框的顶部和底部

　　2、对于各内容区，确定它在整行基线的上方和下方分别超出多少。替换元素：将其底边放在整行的基线上；非替换元素：确定各元素及匿名文本各部分的基线的位置，并知道该行本身基线的位置，然后将其对齐

　　3、对于指定了vertical-align值的元素，确定其垂直偏移量。由此可知，该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下方超出的距离

　　4、既然已经知道了所有行内框会放在哪里，再来计算最后的行框高度。为此，只需将基线与最高行内顶端之间的距离加上基线与最低行内框底端之间的距离

 

行内非替换元素

内容区

　　对于行内非替换元素或匿名文本某一部分，font-size值确定了内容区的高度。如果一个行内元素的font-size为15px，则内容区的高度为15px

行内框

　　内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px，line-height为21px，则相差6px。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框

 

　　当line-height小于font-size时，行内框实际上小于内容区

 

行框

　　行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，而且各行框的顶端挨着上一行行框的底端

框属性

　　内边距、外边距和边框不影响行框的高度，即不影响行高

　　行内元素的边框边界由font-size而不是line-height控制

　　外边距不会应用到行内非替换元素的顶端和底端

　　margin-left、padding-left、border-left应用到元素的开始处；而margin-right、padding-right、border-right应用到元素的结尾处

div{    width: 200px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    padding: 6px;        margin: 6px;    font-size: 30px;    line-height: 50px;}

<div><span>测试文字测试文字测试文字</span></div>

行内替换元素

框属性

　　行内替换元素有固有的高度和宽度，替换元素的整体包括内容、外边距、内边距和边框来定义元素的行内框

　　替换元素可以增加行框的高度，但不影响line-height值

div{    width: 300px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    font-size: 30px;    line-height: 50px;}img{    height: 26px;    padding: 2px;    margin: 2px;}

<div><span>测试文字测试<img src="/static/imghw/default1.png"  data-src="backup/lamp.gif"  class="lazy" alt="测试图片">文字测试文字</span></div>

行高

　　行内替换元素需要使用line-height值，从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值

基线

　　默认地，行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素并没有自己的基线，所以相对来说最好的办法是将其行内框的底端与基线对齐。因此，实际上是下外边距边界与基线对齐

　　对于这种情况最常见的解决办法是使图像成为块级元素，这样它们就不会产生行框。另一种可取的办法是将图像的父级的line-height设置为0