行内盒子

作者：管理员

发布时间：2020/11/14 10:39:18

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=2935

行内元素分为两个，一个是非置换元素，一个是置换元素。这两个元素在布局上也是有所不同的。

老规矩，先来说些概念：

• 匿名文本，就是不包含标签的文本，比如之前例子中我们给 span 元素前面加上了x-height这样的文本就是匿名文本。
• 字体框，顾名思义，就是font-size属性决定的字体占据的框
• 行距，就是line-height属性设置的值减去font-size的值就是行高，除以2分配和字体上下两端，则是半行距。
• 行内框，就是行距加上内容区，也就是字体文本的区域，对行内非置换元素来说，就是line-height设置的值，对于置换元素来说，就是他的内容区。
• 行框，经过一行内所有的行内框的最高点到一行内行内框的最低点之间的距离。

下面是他的示意图

1. 非置换元素 结合上面的概念，来看个

.line10 {
  border: 1px solid red;
}
.line10 > p {
  font-size: 12px;
  line-height: 12px;
}
.line10 > p::first-line {
  border: 1px solid #ccc;
  background: #f2f2f2;
}
.line10 > p > strong {
  font-size: 24px;
}

得到如下的显示：

可以看出来，加粗文本那段明显超出了内容区，即便如此，文本也都还是默认对齐的，下面改变一下强调文本，添加一些样式：

.line10 > p > em {
  padding: 20px;
}
.line10 > p > em {
  border: 20px solid blue;
}
.line10 > p > em {
  margin: 20px;
}

这里 1 像素的蓝色边框是为了能够看清强调文本所占据的范围，通过这几个结果对比，我们能看到，对于行内元素来说，无论是padding、border、还是margin对于行框来说完全没有影响，也就是纵向距离保持不变，不过文本的左右还是会产生了间距，同理对于负margin来说，行框大小依然不变，不过左右会产生重叠。

那么既然行内元素纵向布局不受这些组成盒模型的属性所影响，那么到底什么属性影响行框大小呢，试试这个属性：

.line10 > p > strong {
  font-size: 24px;
  vertical-align: 4px;
}

可以看到行框的高度比之前多出了4px，这也就是说vertical-align会影响到纵向布局。在前一部分的时候说过，vertical-align计算是会受到line-height影响的，并且对于下面说到的置换元素而言，line-height就是置换元素的内容区，所以我们知道，影响行内元素纵向布局的主要属性就是这两个了。

1. 置换元素 置换元素的布局则又不同了，还是看个

.line11 {
  font-size: 15px;
  line-height: 18px;
  border: 1px solid red;
}
.line11 > img {
  height: 30px;
  /* margin: 20px; */
  /* border: 0; */
  /* padding: 0; */
}

展示的结果其实和我们上面介绍图片间隙的例子是一样的，现在来看看对布局的影响，上面注释的三个属性，一个一个尝试一下，会发现都会对行内框的高度有影响，这是和非置换元素完全不同的表现。这里就不展示具体的结果了，可以自己去尝试看看。

1. 行内块级元素 这里将行内块级元素放在这里是因为行内块级元素可以看做是置换元素，因此他们的布局影响是一样的，盒模型的属性都会对上下左右产生影响，因此不再赘述。

关键字：css