Question

有人能解释这里发生了什么吗？查看下面的代码，您可能希望这两个项目彼此对齐。情况似乎并非如此。

HTML

<div class="BX"></div>

CSS

.BX{
  position:absolute;
  top:10px;
  left:10px;
  height:30px;
  width:30px;
}
.BX:after{
  content:"×";
  position:absolute;
  font-size:50px;
  top:0;
  left:0;
}

问题

我知道我可以很容易地破解代码来改变绝对偏移但是我更感兴趣的是了解后选择器从哪里派生出它的左上角位置？

http://jsfiddle.net/793vk/

Answer 1

这是我的两分钱。首先，为了诊断问题，我将overflow:hidden设置为父元素.BX以研究问题。这就是我所看到的。子元素有明显的溢出，而overflow:hidden则表明了这一点。但这仍然无法解释为什么＆＃34;推倒＆＃34;影响。让我们直观地了解font-size和line-height的关联方式。

enter image description here

子类继承父类＆＃39; line-height我们必须过度写作。实际上默认使用line-height计算font-size。发生溢出，通过前线高度和后线高度阶段可视化，如上图所示。请记住，line-height用于居中并不是最好的主意。请注意枢轴如何向上移动。

所以这里发生了什么。我们不会移动＆＃34; X＆＃34;在飞机上神奇地守卫，但我们只是转向相同的点，只是放置它的容器类来提升一步。这可以从＆＃34; X＆＃34;底部的距离看出。到结束轮廓线。

enter image description here

为什么行高：30px有效？

通常的做法是使用黄金比率值1.618来计算完美线高，即line-height = font-size / 1.618。如果你取50px的当前font-size并计算line-height = 50 / 1.618 = 30.你得到~30px。

显式重现行高

默认line-height的原因是由于公式line-height = font-size * 1.2，在我们的例子中等于60px。 (l = 50*1.2)

如果您尝试通过明确点击CSS中的属性来重现line-height，执行line-height:60px，您将重现浏览器默认设置的line-height。

enter image description here

Answer 2

创建伪元素的顶部偏移量是因为应用了line-height的默认font-size:50px;它使伪元素59px变高并使其内容垂直居中。

您可以通过设置自定义line-height DEMO

来更改此行为

Answer 3

你的伪元素比它的父元素大，这就是它溢出的原因。

为什么它更大？由于font-size，根据这些min-height给出了font-size等于line-height和默认50px。

要查看它的实际操作，请将边框或背景颜色添加到伪：http://jsfiddle.net/793vk/2/

Answer 4

根据预期的父元素定位它。

很明显，如果您在border

附近添加::after

JSfiddle

如果您删除了花哨的font-size，font-weight等，您将获得预期的结果......

选中此JSfiddle

Answer 5

尝试添加

line-height: 25px;

to：之后，25px工作得很好。小提琴 - http://jsfiddle.net/ackerman/3JS3a/

Answer 6

：伪元素IS位于.BX元素的左上角。

我在它上面放了一个边框来证明情况就是这样：

border: 1px solid red;

http://jsfiddle.net/793vk/4/

它看起来偏离中心的原因是伪元素高于.BX

在伪选择器之后使用css完美地居中内容

6 个答案:

为什么行高：30px有效？

显式重现行高