为什么要添加块级伪元素？ [英] Why add block level to pseudo-element?

问题描述

从此网页上的代码： http://css-tricks.com/snippets / css / sticky-footer /

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

任何人都可以解释 .page-wrap：之后阻止了吗？我理解之后伪元素，但我不明白这里发生了什么。

Can anyone explain what the .page-wrap:after block is doing? I understand the after pseudo-element but I don't understand what is happening here.

推荐答案

检查编辑Codepen演示，并删除 .page-wrap：之后从设置其高度的行或其 display：block 属性。然后单击添加内容。因为 .page-wrap 有一个负的下边距，它只会将页脚向下推动142像素太晚，让文本溢出。 简而言之，它填充负底部边距 ...是的，你可能通过使用一个简单的div与相对定位，Z-索引等相同。在 .page-wrap 之后添加块元素，像这样工作：

Check out when you edit the Codepen demo and remove either .page-wrap:after from the line which sets its height or its display: block property. Then click 'Add content'. Because .page-wrap has a negative margin-bottom, it will only push the footer down 142 pixels too late and let the text overflow. So in short, it fills the negative bottom margin... Yes, you could probably do the same by using a simple div with relative positioning, z-indexing etc. Actually tested it & adding a block element after .page-wrap, like this works too:

.fix {
  position: relative;
  display: block;
  z-index: -2;
  bottom: 0;
  height: 142px;
  width: 100%;
}

CSS3有，为什么不使用..嘿，你不必创建一个新的元素，只是从CSS设置它..多么真棒！

But while HTML5 & CSS3 are there, why not use that.. And hey, you don't have to create a new element, simply set it from CSS.. How awesome is that!

其他更多&更常用的：后前缀（我在WP主题中看到一些）包括使用它作为clearfix div的替代。请参阅这篇文章，进一步阅读： http://css-tricks.com/snippets/ css / clear-fix /

Other more & more popular uses of the :after prefix (I saw some in WP themes) include using it as a replacement for clearfix divs. Check out this article for further reading: http://css-tricks.com/snippets/css/clear-fix/

你可能想知道为什么他首先设置负底部边距;答案：因为他希望在页面加载时， .page-wrap {min-height：100％} 不要将页脚压入页面，如果内容不扩展任何进一步。百分比高度将消除任何这些技巧的需要，例如页脚高度10％，翻页最小高度90％，但有缺点，你不能控制确切的页脚高度...

You might wonder why he set the negative bottom margin in the first place; Answer: because he wanted the .page-wrap {min-height: 100% } not to push the footer under the fold on page load, IF the content doesn't extend any further. Percentage heights would have eliminated the need of any of these tricks, eg footer height 10%, page-wrap min-height 90%, but have the disadvantage that you can't control the exact footer height...

这篇关于为什么要添加块级伪元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！