css中的content: "."; 这段代码到底是什么意思？

Question

这段代码中的content: ".";有什么用，解决了什么问题，为什么要用他？
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Answer 1

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。

这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。

在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏，这样就达到了撑开容器的目的。

扩展资料：

content，英文单词，有满足的、使满足、目录等含义。同时也是计算机语言的一种方法。

计算机语言

概述

contents() 方法

找到段落中的所有文本节点，并用粗体标签包装它们。

("p").contents().filter(function(){returnthis.nodeType!=1;}).wrap("<b/>");

定义和用法

contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

语法

.contents()

说明

如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。

参考资料来源：百度百科-content

Answer 2

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

after是伪类这段css代码的主要用途是清除浮动，如果去掉这段css，#main这个容器的高度，有可能不会随其内容高度的增加而增加，它的背景图片也有可能显示不出来。

加上这个css就可以解决这个问题希望对你有帮助content用来和：after及：before伪元素一起使用，在对象前或后显示内容，也就是一个"。"

原理：

CSS解密算法与驱动器单元交换密钥，以生成加密用的密钥。这一生成的密钥用来扰乱盘片密钥与影视节目密钥的交换。影视节目密钥用来解密盘片上数据。有CSS电路的DVD播放机先对数据进行解密，然后再解码和播放。如果是计算机，那么DVD解码硬件和软件必须加入一个CSS解密模块。所有DVD-ROM驱动器都有一个附加固件，可以与计算机中的CSS模块交换鉴定和解密钥匙。

以上内容参考：百度百科-CSS

本回答被网友采纳

Answer 3

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。本回答被提问者采纳

Answer 4

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。