css样式中content:"."是啥意思？

Posted 2023-04-20

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 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

参考技术A 一般content用在 元素的after或者before中使用，显示特殊字符。 参考技术B :after是伪类 这段css代码的主要用途是清除浮动，如果去掉这段css，#main这个容器的高度，有可能不会随其内容高度的增加而增加，它的背景图片也有可能显示不出来。 加上这个css就可以解决这个问题 希望对你有帮助 content用来和:after及:before 伪元素一起使用，在对象前或后显示内容。也就是一个"." 参考技术C

意思是对内容添加一个.

例：

解释：在a标签中原本是没有内容.的存在，通过content:"."，即添加了一个点的存在！！！

参考技术D content,

定义和用法
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
说明
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
---------分割线-------------------------------------------------
像是content:"."这样的写法,
主要是用来占位清除浮动的,
类似
p:after
display:block;
content:".";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;

怎么用CSS+DIV样式同步左右两个DIV的高度？

LZ 我知道你想干甚麼… 那个在 CSS 是做不到的
必须有 JS 帮助，我平常都自己写 function，下面给你一个 eqHeight() 的 JQuery 函数给你用呗

先你把两个浮动的 div 加上同一个 class

<div class="floating" id="left">...</div>
<div class="floating" id="right">...</div>

$(document).ready(function()
$.fn.eqHeight = function(minH, maxH)
var tallest = minH || 0;
this.each(function()
if ($(this).height() > tallest)
tallest = $(this).height();

);
if ((maxH) && tallest > maxH) tallest = maxH;
return this.each(function()
$(this).height(tallest);
);
);

$('.floating').eqHeight(); // 这句就是呼唤 eqHeight 函数，把你两个 <div> 弄到同一最高度
);​追问

我最晕js了 不用不行么

追答

整个功能都写给你了, 你就只需要把 floating 的 class 加进去你两个 而已啊

* 你猜对… 不用不行，最高高度跟内容自适应只可以用 JS 实现嘛

如果按一楼的 CSS 方法只可以做到背景色占满高度而已
效果如下

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字
​

.main overflow:hidden;width:460px;
.main .padding
padding: 10px;
margin: 10px;
border:#c00 1px solid;

.main > div
padding-bottom:1000em;margin-bottom:-1000em;
background: #eee;

.left display:inline-block;width:200px;overflow:hidden;float:left;
.right display:inline-block;width:200px;overflow:hidden;float:right;
.main .clear clear:both
​

追问

好吧 我试试

参考技术A 需要在外部加个div，然后设置宽、溢出隐藏，不设置高；

里面的2个div除浮动、宽外同时加上padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden就可以了

当然2000这个数值你可以改大或小，具体效果自己测试下就ok了追问

这个不行 我要的是右边的内容不隐藏
开始有一个高度 如果右边的内容多了就挤出来
左边就和右边一起动 能实现么

追答

我没说右边的隐藏啊~~

main就是我说的外部的div，
你是想让2个层的背景一样高？按我说的设置就可以了

追问

背景一样高？还不是div一样高么

追答

那就可以实现，这个效果做了N遍了，三栏、四栏都一样的方法实现~

追问

好吧 我试试

追答

.main width:1000px;overflow:hidden
.left width:200px;padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden;float:left
.right width:200px;padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden;float:right
.clear clear:both

参考技术B 就是2个div一样高吗? 没其他的要求了? 在CSS中 写入.div1,.div2height:XX px; <------XX为你要的DIV的高度~ 2个DIV一样的！追问

这样普通的方法是不行的 我试过

追答

不明白你的意思？同步高度2个DIV 如果是这样的话是绝对行的

参考技术C

设置一个class样式


将这两个div的class都设置为上述样式。

参考技术D 不考虑IE6的情况下 用min-height:？px; IE6不支持这个追问

那不行 测试都要用很多浏览器

本回答被提问者采纳