行内元素

1,行内元素有哪些？

——非替换元素：a,span,strong,b,abbr等；

——替换元素： img,input等；

2，行内元素有哪些特征？

——不会在内容前后产生“换行符”。

水平方向上可以设置内、外边距，但是垂直方向上即使设置了外边距也不会起作用。(对于非替换元素)

3，行内元素的基本术语？

——匿名文本：指没有放置在行内元素里的文本。

              例：<p>匿名文本<span>行内元素里的文本</span></p>

——内容框： 内容框的高度等于font-size的值。

——行间距：行间距等于line-height与font-size的差值。该差值的一半分别放在字体的上，下，分别称为半间距。

——行内框： 对于非替换元素而言，行内框的高度等于line-height的值。（由内容框和行间距组成。）对于替换元素而言，行内框的高度则恰好等于内容区的高度，行间距不应用到替换元素。

——行框： 包含该行中的行内框的最高点和最低点的框。

例：这个行框由两种行内框组成；

 

非替换元素： 

4，关于line-height:

代码：

 

分析： 父元素p设置了line-height为20px,font-size为20px,匿名文本的行框高度为20px;

Span元素设置font-size为40px,但是它的line-height继承父元素的，所以行内框高度为20px;得出它的半间距为-10px;可以看到文字发生了重合；这一行的行框高度为40px;

Strong元素的font-size设置为12px；它的半间距为4px;行内框高度为20px;

5，管理line-height:

为了防止文本发生重合，可以对font-size发生改变的元素的line-height结合使用em单位；

还可以在父元素里将line-height的值设置成为数值，这个数值会成为缩放因子；如：

Body {line-height: 1.5;}表示子元素文本的行高是文本大小的1.5倍；

6，vertical-align: 

代码：

 

分析：span元素添加了vertical-align: 10px，即span里包含的文本会向上移动10px,从而使行框也增大了10px;

Strong元素的行内框的顶端相对于行框顶端来进行对齐；

注：

Top,bottom属性值的对齐是  行内框相对于行框来进行的；

Text-top,text-bottom   是行内框相对于父元素内容区来对齐的；

替换元素：

可以存在内、外边距，并影响着行内框的大小。Line-height值与行内框高度无关。行内框的高度取决于内容的大小。

替换元素里，设置vertical-align的值是百分数时是相对于line-height来对齐的；