使用这个CSS的结果是什么？

Question

我经常在某些网站上看到此代码：

body:before {
  content: "";
  width: 0;
  height: 100%;
  float: left;
  margin-top: -31700px;
}

使用此CSS的结果是什么？

Answer 1

根据本网站，这是一个歌剧修复http://www.cssstickyfooter.com/using-sticky-footer-code.html，在这个网站上，它用于粘性页脚。
粘性页脚意味着它总是粘在任何窗口的底部，当没有足够的内容填满屏幕时。

  

CSS代码
  下面是CSS代码，使您的粘性页脚实际上粘在底部。

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

在这里看一个小提琴：http://jsfiddle.net/f3Uvs/2/

Answer 2

用于通过使用content属性向元素添加化妆品内容。默认情况下，此元素是内联的。在CSS 3中引入了:: before表示法，以便在pseudo-classes和pseudo-elements之间建立歧视。浏览器也接受表示法：在CSS 2中引入之前。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Opera浏览器抓住窗口底部并将其向上移动然后向下移动以查看它未按预期工作。这一直是歌剧的主要问题。

所以在这种情况下使用了body:before { }。