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来对齐的;