Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!

Dieser Artikel wird Ihnen helfen, das Inhaltsattribut in CSS zu verstehen und die Verwendungsszenarien von Inhalten vorzustellen. Ich hoffe, er wird Ihnen hilfreich sein!

Wenn Sie während der Entwicklung auf Szenarien wie das Löschen von Floats, kleinen Symbolen, das Ersetzen von Inhalten usw. stoßen, werden Sie unweigerlich auf das Inhaltsattribut stoßen. Im Allgemeinen ist es die Lösung auf Baidu, aber nur wenige Leute studieren es im Detail Beim Lesen des Buches „CSS World“ habe ich das Inhaltskapitel im Buch gelesen. Heute werde ich den Verwendungsmechanismus von Inhalten im Detail vorstellen. Das

content-Attribut wird mit :before- und :after-Pseudoelementen verwendet, um generierten Inhalt einzufügen. Mithilfe des Inhaltsattributs eingefügter Inhalt ist ein anonymes ersetzbares Element. Lassen Sie uns zunächst verstehen, was ein austauschbares Element ist.

Element ersetzen

Schauen Sie sich zunächst das Laden des Bildes an:

<img  src="1.jpg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >
<!--替换-->
<img  src="2.jpg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >

hat das src-Attribut von img geändert, wodurch sich das angezeigte Bild ändert. Dieses Element, das durch Ändern des durch einen bestimmten Attributwert dargestellten Inhalts ersetzt werden kann, wird als „Ersatzelement“ bezeichnet.

Typische Ersatzelemente: <img alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >、<video></video>、<iframe></iframe>、<textarea></textarea> 和 <input>.

Die Größenberechnungsregeln ersetzter Elemente

Die Größenberechnungsregeln ersetzter Elemente haben drei Größen:

• Intrinsische Größe: die ursprüngliche Größe des Ersatzinhalts
• HTML-Größe: Breite und Höhe der nativen HTML-Attribute
• CSS-Größe: Über CSS festgelegte Breiten- und Höhenattribute

Nehmen wir img als Beispiel:

<img  src="../assets/test1.jpeg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >
<img     style="max-width:90%"  style="max-width:90%" class="img-test" src="../assets/test1.jpeg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >
<img  class="img-box"    style="max-width:90%"  style="max-width:90%" src="../assets/test1.jpeg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >

.img-box {
  height: 100px;
  width: 200px;
}

Der Effekt ist wie folgt:

• Erstes Bild: Die Standardgröße des angezeigten Originalbilds beträgt 267 * 200;

• Das zweite Bild: Die HTML-Größe wird auf 300 * 200 eingestellt.

• Das dritte Bild: Die CSS-Größe wird auf 200 * 100 eingestellt.

Es ist ersichtlich, dass die Priorität der Größenanzeigeregel CSS-Größe > HTML-Größe > ist.

Welche Beziehung besteht zwischen Ersatzelementen und Inhalt?

Das Ersatzelement ist ein Ersatzelement, da sein Inhalt austauschbar ist, dh die Inhaltsbox im Boxmodell ist austauschbar. Das Inhaltsattribut von CSS wird zum Ersetzen von Inhalten verwendet. Man kann auch sagen, dass das Inhaltsattribut bestimmt, ob ein Element oder ein nicht ersetztes Element ersetzt wird. Der Code lautet wie folgt:

<img     style="max-width:90%"  style="max-width:90%" class="img-test" src="../assets/test1.jpeg" alt="Detaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!" >

.img-test:hover {
 content: url(&#39;../assets/test2.jpg&#39;);
}

Der Effekt ist wie folgt:

Wenn sich die Maus darüber bewegt, lautet das Bild „../assets/test2.jpg“ und das Inhaltsfeld von img wird durch das ersetzt Inhaltsattribut.

Es ist zu beachten, dass das Inhaltsattribut nur die visuelle Darstellung ändert. Wenn wir dieses Bild durch Klicken mit der rechten Maustaste oder in anderen Formen speichern, wird weiterhin das Bild gespeichert, das der ursprünglichen Quelle entspricht.

Inhaltsnutzungsszenarien

Inhalte werden in der Definition der Verwendung in Verbindung mit :before- und :after-Pseudoelementen erwähnt. :before und :after sind die häufigsten Pseudoelemente und jeder muss mit ihnen vertraut sein.

Eine kurze Einführung in :before und :after:

• Standardanzeige: inline;
• Das Inhaltsattribut muss festgelegt werden, sonst ist es ungültig;
• Standardbenutzerauswahl: keine, d. h. der Inhalt von :before und :after können vom Benutzer nicht verwendet werden.
• kann nicht über dom verwendet werden, was bedeutet, dass Seitenelemente nicht im HTML-Quellcode gefunden werden können, aber visuell sichtbar sind.

Werfen wir einen Blick auf die wichtigsten Verwendungsszenarien:

Einfügen von Zeichen

Die Verwendung von Inhalten zum Einfügen von Zeichen legt im Allgemeinen einen Standardwert für ein leeres Element fest, ähnlich dem Platzhalterattribut der Eingabe, das nur angezeigt wird Wenn das Element keinen Inhalt hat, lautet der Code wie folgt:

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

Der Effekt ist wie folgt:

Hilfselementgenerierung

Der Kernpunkt ist derzeit nicht der durch Inhalte generierte Inhalt. sondern das Pseudoelement selbst. Normalerweise stellen wir Inhalte ein Der Eigenschaftswert wird auf eine leere Zeichenfolge gesetzt und anderer CSS-Code wird verwendet, um Hilfselemente zu generieren, grafische Effekte zu erzielen oder ein bestimmtes Layout zu erreichen.

Grafischer Effekt

Verwenden Sie das Pseudoelement ::after, um ein anonymes Ersatzelement einzufügen, setzen Sie den Inhalt auf leer, dieses Element hat keinen Inhalt, und verwenden Sie CSS-Stile, um den gewünschten grafischen Effekt zu erzielen. Der Code lautet wie folgt:

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

Der Effekt ist wie folgt:

Clear float

Clear float dient hauptsächlich dazu, das Problem zu lösen, dass die Innenhöhe des übergeordneten Elements 0 ist, was durch das Floating des untergeordneten Elements verursacht wird Der Code lautet wie folgt:

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

Oben Eines der drei ist unverzichtbar:

• content: ''：通过 ::after 给元素添加一个空的伪元素。
• clear: both：清除浮动，使得元素周围两边都不浮动。
• display: block：clear 只对块级元素生效。

通过添加元素清除浮动，触动 BFC，使元素的高能够自适应子盒子的高。

图片生成

直接用 url 功能符显示图片，既可以在文字前后添加图片，又可以直接替换文字。

图片直接替换文字，代码如下：

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url(&#39;../assets/test2.jpg&#39;);
}

文字前后添加图片，代码如下：

<!--方案一 -->
.img-test::after {
  content: url(&#39;../assets/test2.jpg&#39;);
}

<!--方案二 -->
.img-test::after {
  content: &#39;&#39;;
  display: block;
  height: 20px;
  width: 20px;
  background: url(&#39;../assets/test2.jpg&#39;);
}

方案一中伪元素通过 content 设置图片，图片的尺寸不好控制，显示图片为原尺寸，比较模糊，一般使用方案二背景图片的方式，可以按需设置尺寸。

attr 属性值内容生成

使用 attr 获取元素属性值达到效果，一般用于获取 a 标签的连接，代码如下：

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

效果如下：

字符内容生成

content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合 @font-face 规则实现图标字体效果。

@font-face 规则

@font-face 规则指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。它的属性和字体相似，如下：

字体描述符	描述
font-family	必需：所指定的字体名字将会被用于 font 或 font-family 属性
src	必需：远程字体文件位置的 url 或者用户计算机上的字体名称
font-style	对于 src 所指字体的样式
font-weight	字体粗细
font-stretch	定义应如何拉伸字体
unicode-range	该字体支持 Unicode 字符的范围

使用 @font-face 规则的代码如下：

<!--format 属性是帮助浏览器识别字体的-->
@font-face {font-family: "iconfont";
  src: url(&#39;iconfont.eot&#39;); /* IE9*/
  src: url(&#39;iconfont.eot#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
  url(&#39;iconfont.woff&#39;) format(&#39;woff&#39;), /* chrome, firefox */
  url(&#39;iconfont.ttf&#39;) format(&#39;truetype&#39;), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url(&#39;iconfont.svg#iconfont&#39;) format(&#39;svg&#39;); /* iOS 4.1- */
}

<!--html-->
<div class="look-more">查看更多</div>

<!--css-->
.look-more {
  font-size: 14px;
  &::after {
    font-size: 14px;
    font-family: &#39;iconfont&#39;;
    content: &#39;\e6a7&#39;;
  }
}

效果如下：

如上图，“查看更多”后面的箭头就是上面定义的字体图标。

当然 @font-face 也有不可避免的兼容性问题，可根据需要使用此规则，支持度如下图：

计数器

content 的计数器是使用 CSS 代码实现随着元素数目增多，数值也跟着变大的效果。功能非常强大、实用，且不具有可替代性。

计数器包含两个属性和一个方法：

1、counter-reset：“计数器-重置”的意思，主要作用就是给计数器起个名字。也告诉从哪个数字开始计数，默认值是 0，值可以为负数。

<!--计数器名字为 counter，默认值为 0-->
.count-test { counter-reset: counter; }

<!--计数器名字为 counter，初始计数为 2-->
.count-test { counter-reset: counter 2; }

<!--多个计数器同时命名，使用空格分隔-->
.count-test { counter-reset: counter 2 counterpre -1; }

2、counterincrement：“计数器递增”的意思，值为 counter-reset 的 1 个或多个关键字，后面可以跟随数字，表示每次计数的变化值，默认变化值为 1，值可以为负数。

<!--counter 计数器默认递增 1-->
counter-increment: counter;

<!--counter 计数器递增 2-->
counter-increment: counter 2;

<!--counter 计数器递增 2，counterpre 计数器递减 -1-->
counter-increment: counter 2 counterpre -1;

“普照规则”：普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源增加一次计数值。

<p class="counter"></p>

<!--counter-increment 普照源 <p> 标签，初始值为 2，counter-reset 值增加，默认递增 1，最终显示为 3-->
.counter {
 counter-reset: counter 2;
 counter-increment: counter;
}
.counter:before {
 content: counter(counter);
}

<!-- counter-increment 直接设置在伪元素上普照自身，和上述一样显示 3-->
.counter {
 counter-reset: counter 2;
}
.counter:before {
 counter-increment: counter;
 content: counter(counter);
}

<!--父元素和子元素都被 counter-increment 普照 1 次，递增了两次，最终显示为 4-->
.counter {
 counter-reset: counter 2;
 counter-increment: counter;
}
.counter:before {
 counter-increment: counter;
 content: counter(counter);
}

3、counter()/counters()：都是计数方法，显示计数，counters 用于嵌套计数。

<!--name 就是 counter-reset 的名称-->
counter(name)

<!--style 值就是 list-style-type 支持的那些值，可以是英文等-->
counter(name, style)

<!--string 参数为字符串（需要引号包围的，是必需参数），表示子序号的连接字符串。例如，1.1 的 string 就是&#39;.&#39;，1-1 就是&#39;-&#39;-->
counters(name, string)

counters(name, string, style)

一般用于类似目录以及规律变化的计数，下面以层级目录为例，代码如下：

<div class="reset">
    <div class="counter">替换元素
        <div class="reset">
            <div class="counter">替换元素的尺寸计算规则</div>
            <div class="counter">替换元素和 content 是什么关系呢？</div>
        </div>
    </div>
    <div class="counter">content 的使用场景
        <div class="reset">
            <div class="counter">插入字符</div>
            <div class="counter">辅助元素生成</div>
            <div class="counter">图片生成</div>
            <div class="counter">attr 属性值内容生成</div>
            <div class="counter">字符内容生成</div>
            <div class="counter">计数器</div>
        </div>
    </div>
</div>

.reset {
  counter-reset: counter;
}
.counter:before {
  content: counters(counter, &#39;.&#39;) &#39;. &#39;;
  counter-increment: counter;
}

• counter 默认值为 0，默认递增为  1；
• 第一个 reset 下面有两个兄弟 conter 标签，递增则为 1 和 2;
• 第一个 counter 下面有 reset 标签，嵌套了一层重置计数，则有 1.1、1.2 等；
• 同理第二个 counter 下面有 2.1、2.2 等。

效果如下：

总结

了解 CSS 的 content 属性，布局有了更多的可能性，有助于日常开发中根据需要使用一些布局小技巧，使布局简洁明了。

原文地址：https://juejin.cn/post/6989017411261300750

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Verwendungsmechanismus von CSS-Inhalten. Es stellt sich heraus, dass er auch auf diese Weise verwendet werden kann!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!