CSScontent的使用机制介绍

本篇内容介绍了“CSS content的使用机制介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是一家专业提供永顺企业网站建设,专注与成都网站设计、网站建设、H5页面制作、小程序制作等业务。10年已为永顺众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

content 属性用于与 :before 及 :after 伪元素配合使用，来插入生成内容。使用 content 属性插入的内容都是匿名的可替换元素。首先我们先了解下什么是可替换元素呢？

替换元素

首先看下图片加载：

修改了 img 的 src 属性，导致显示的图片发生了变化。这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。

典型的替换元素：、、</code>、<code><textarea></code> 和 <code><input></code>。</p><p><strong>替换元素的尺寸计算规则</strong></p><p>替换元素的尺寸计算规则有三种尺寸：</p><ul><li><p>固有尺寸：替换内容原本的尺寸</p></li><li><p>HTML 尺寸：HTML 原生属性 width 和 height</p></li><li><p>CSS 尺寸：通过 CSS 设置的宽高属性</p></li></ul><p>下面我们以 img 为例：</p><pre><img src="../assets/test1.jpeg"> <img width="300" height="200" class="img-test" src="../assets/test1.jpeg"> <img class="img-box" width="300" height="200" src="../assets/test1.jpeg"> .img-box {   height: 100px;   width: 200px; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2341.jpg" alt="CSS content的使用机制介绍"></p><ul><li><p>第一张图：默认显示原图尺寸 267 * 200；</p></li><li><p>第二张图：设置了 HTML 尺寸 width 和 height，显示图片 300 * 200；</p></li><li><p>第三张图：设置了 CSS 尺寸 200 * 100。</p></li></ul><p>由此可见尺寸显示规则优先级为 CSS 尺寸 > HTML 尺寸 > 固有尺寸。</p><p><strong>替换元素和 content 是什么关系呢？</strong></p><p>替换元素之所以为替换元素，就是因为其内容可替换，即盒模型中的 content box 可替换。CSS 的 content 属性就用于替换内容，也可以说，content 属性决定了是替换元素还是非替换元素。代码如下：</p><pre><img width="300" height="200" class="img-test" src="../assets/test1.jpeg"> .img-test:hover {  content: url('../assets/test2.jpg'); }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2342.jpg" alt="CSS content的使用机制介绍"></p><p>此时鼠标悬浮的时候图片为 ’../assets/test2.jpg‘，使用 content 属性替换了 img 的 content box。</p><p>需要注意的是 content 属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片的时候，所保存的还是原来 src 对应的图片。</p><h3 data-id="heading-4"><strong>content 的使用场景</strong></h3><p>content 的定义中就提到过是和 :before 及 :after 伪元素配合使用。:before 及 :after 是最常见的伪元素，想必大家都不陌生。</p><p>再简单介绍下 :before 和 :after：</p><ul><li><p>默认 display: inline；</p></li><li><p>必须设置 content 属性，否则无效；</p></li><li><p>默认 user-select: none，即 :before 和 :after 的内容无法被用户选中；</p></li><li><p>不可通过 dom 使用，就是本身不存在的页面元素，HTML 源代码里，找不到它们，但从视觉上，却能看到它们的存在。</p></li></ul><p>下面我们看一下主要使用场景：</p><p><strong>插入字符</strong></p><p>使用 content 插入字符一般是给空元素设置默认值，类似 input 的 placeholder 属性一样，只在元素没有内容的时候展示，代码如下：</p><pre><p>有内容的段落</p> <p></p>  p:empty::before {   content: '空元素内容';   color: red; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2343.jpg" alt="CSS content的使用机制介绍"></p><p><strong>辅助元素生成</strong></p><p>此时核心点不在于 content 生成的内容，而是伪元素本身。通常我们会把 content 的属性值设置为空字符串，使用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。</p><p><strong>图形效果</strong></p><p>使用 ::after 伪元素插入匿名替换元素，设置 content 为空，此元素没有内容，通过 CSS 样式来达到想要的图形效果。代码如下：</p><pre><div class="content-box"></div> .content-box {   height: 100px;   width: 200px;   border-radius: 10px;   position: relative;   background: #fff; } .content-box::after {   content: '';   position: absolute;   top: 100%;   right: 16px;   width: 4px;   height: 16px;   border-width: 0;   border-right: 12px solid #fff;   border-radius: 0 0 32px 0; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2344.jpg" alt="CSS content的使用机制介绍"></p><p><strong>清除浮动</strong></p><p>清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为 0 的问题，代码如下：</p><pre><div class="info-box clear">   <div class="left">左</div>   <div class="right">右</div> </div> .clear::after {  content: '';  display: block;  clear: both; }</pre><p>上面三者缺一不可：</p><ul><li><p>content: ''：通过 ::after 给元素添加一个空的伪元素。</p></li><li><p>clear: both：清除浮动，使得元素周围两边都不浮动。</p></li><li><p>display: block：clear 只对块级元素生效。</p></li></ul><p>通过添加元素清除浮动，触动 BFC，使元素的高能够自适应子盒子的高。</p><p><strong>图片生成</strong></p><p>直接用 url 功能符显示图片，既可以在文字前后添加图片，又可以直接替换文字。</p><p>图片直接替换文字，代码如下：</p><pre><p class="img-test">文字</p> .img-test {   display: block;   height: 20px;   width: 20px;   border-radius: 100%;   content: url('../assets/test2.jpg'); }</pre><p>文字前后添加图片，代码如下：</p><pre> .img-test::after {   content: url('../assets/test2.jpg'); }  .img-test::after {   content: '';   display: block;   height: 20px;   width: 20px;   background: url('../assets/test2.jpg'); }</pre><p>方案一中伪元素通过 content 设置图片，图片的尺寸不好控制，显示图片为原尺寸，比较模糊，一般使用方案二背景图片的方式，可以按需设置尺寸。</p><p><strong>attr 属性值内容生成</strong></p><p>使用 attr 获取元素属性值达到效果，一般用于获取 a 标签的连接，代码如下：</p><pre><a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a> .baidu-link::after {   content: " (" attr(href) ") " }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2345.jpg" alt="CSS content的使用机制介绍"></p><p><strong>字符内容生成</strong></p><p>content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合 @font-face 规则实现图标字体效果。</p><p><strong>@font-face 规则</strong></p><p>@font-face 规则指定一个用于显示文本的自定义字体；字体能从远程<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>或者用户本地安装的字体加载。它的属性和字体相似，如下：</p><table><thead><trl><th>字体描述符</th><th>描述</th></tr></thead><tbody><tr><td>font-family</td><td>必需：所指定的字体名字将会被用于 font 或 font-family 属性</td></tr><tr><td>src</td><td>必需：远程字体文件位置的 url 或者用户计算机上的字体名称</td></tr><tr><td>font-style</td><td>对于 src 所指字体的样式</td></tr><tr><td>font-weight</td><td>字体粗细</td></tr><tr><td>font-stretch</td><td>定义应如何拉伸字体</td></tr><tr><td>unicode-range</td><td>该字体支持 Unicode 字符的范围</td></tr></tbody></table><p>使用 @font-face 规则的代码如下：</p><pre> @font-face {font-family: "iconfont";   src: url('iconfont.eot'); /* IE9*/   src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */   url('iconfont.woff') format('woff'), /* chrome, firefox */   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }  <div class="look-more">查看更多</div>  .look-more {   font-size: 14px;   &::after {     font-size: 14px;     font-family: 'iconfont';     content: '\e6a7';   } }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2346.jpg" alt="CSS content的使用机制介绍"></p><p>如上图，“查看更多”后面的箭头就是上面定义的字体图标。</p><p>当然 @font-face 也有不可避免的兼容性问题，可根据需要使用此规则，支持度如下图：</p><p><img src="/upload/otherpic54/2347.jpg" alt="CSS content的使用机制介绍"></p><p><strong>计数器</strong></p><p>content 的计数器是使用 CSS 代码实现随着元素数目增多，数值也跟着变大的效果。功能非常强大、实用，且不具有可替代性。</p><p>计数器包含两个属性和一个方法：</p><p>1、counter-reset：“计数器-重置”的意思，主要作用就是给计数器起个名字。也告诉从哪个数字开始计数，默认值是 0，值可以为负数。</p><pre> .count-test { counter-reset: counter; }  .count-test { counter-reset: counter 2; }  .count-test { counter-reset: counter 2 counterpre -1; }</pre><p>2、counterincrement：“计数器递增”的意思，值为 counter-reset 的 1 个或多个关键字，后面可以跟随数字，表示每次计数的变化值，默认变化值为 1，值可以为负数。</p><pre> counter-increment: counter;  counter-increment: counter 2;  counter-increment: counter 2 counterpre -1;</pre><p>“普照规则”：普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源增加一次计数值。</p><pre><p class="counter"></p>  .counter {  counter-reset: counter 2;  counter-increment: counter; } .counter:before {  content: counter(counter); }  .counter {  counter-reset: counter 2; } .counter:before {  counter-increment: counter;  content: counter(counter); }  .counter {  counter-reset: counter 2;  counter-increment: counter; } .counter:before {  counter-increment: counter;  content: counter(counter); }</pre><p>3、counter()/counters()：都是计数方法，显示计数，counters 用于嵌套计数。</p><pre> counter(name)  counter(name, style)  counters(name, string) counters(name, string, style)</pre><p>一般用于类似目录以及规律变化的计数，下面以层级目录为例，代码如下：</p><pre><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, '.') '. ';   counter-increment: counter; }</pre><ul><li><p>counter 默认值为 0，默认递增为  1；</p></li><li><p>第一个 reset 下面有两个兄弟 conter 标签，递增则为 1 和 2;</p></li><li><p>第一个 counter 下面有 reset 标签，嵌套了一层重置计数，则有 1.1、1.2 等；</p></li><li><p>同理第二个 counter 下面有 2.1、2.2 等。</p></li></ul><p>效果如下：</p><p><img src="/upload/otherpic54/2348.jpg" alt="CSS content的使用机制介绍"></p><h3 data-id="heading-14"><strong>总结</strong></h3><p>了解 CSS 的 content 属性，布局有了更多的可能性，有助于日常开发中根据需要使用一些布局小技巧，使布局简洁明了。</p><p>“CSS content的使用机制介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！</p> <br> 网页名称：CSScontent的使用机制介绍 <br> 网页URL：<a href="http://cdxtjz.com/article/gipdeg.html">http://cdxtjz.com/article/gipdeg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ijjcdo.html">Struts2漏洞怎么利用工具检查</a> </li><li> <a href="/article/ijjdjj.html">JavaScript常用的调试技巧</a> </li><li> <a href="/article/ijjdhe.html">kubernetes中的Scheduler原理是什么</a> </li><li> <a href="/article/ijjdgh.html">高防云服务器是什么意思</a> </li><li> <a href="/article/ijjdii.html">MySQL-bin.indexnofound(errcode:13-perssion)</a> </li> </ul> </div> </div> <footer> <div class="foot container"> <div class="footl fl"> <h3>联系我们</h3> <dl> 您好HELLO!<br> 感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们，我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。 </dl> <ul> <li>电话：028- <span>86922220 18980695689</span></li> <li>商务合作邮箱：631063699@qq.com</li> <li>合作QQ： 532337155</li> <li>成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼</li> </ul> </div> <div class="footr fr"> <h3>小谭建站工作室</h3> <dl> 成都小谭网站建设公司拥有多年以上互联网从业经验的精英团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！ </dl> <h3>小谭观点</h3> <dl> 相对传统的成都网站建设公司而言，小谭鼎是互联网中的网站品牌策划精英，我们精于企业品牌与互联网相结合的整体战略服务。<br> 我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。 </dl> </div> </div> <div class="link"> <div class="container"> <span> 友情链接：</span> <a href="http://www.kswsj.cn/tuiguang/" title="网站优化排名" target="_blank">网站优化排名</a>   <a href="http://www.cdhuace.com/faguangzi/xsz.html" title="广告吸塑字" target="_blank">广告吸塑字</a>   <a href="https://www.cdxwcx.com/city/shuangliu/" title="双流做网站" target="_blank">双流做网站</a>   <a href="https://www.cdcxhl.com/case/dfjg.html" title="东电技服" target="_blank">东电技服</a>   <a href="http://www.ty2auto.com/" title="成都添翼二手车" target="_blank">成都添翼二手车</a>   <a href="http://www.kfnxs.cn/" title="东方电机技改" target="_blank">东方电机技改</a>   <a href="http://www.ndjierui.cn/" title="南部网站建设" target="_blank">南部网站建设</a>   <a href="http://chengdu.cdcxhl.cn/qiye/" title="企业网站设计" target="_blank">企业网站设计</a>   <a href="https://www.cdcxhl.com/case/dfjg.html" title="东电技改" target="_blank">东电技改</a>   <a href="http://www.bzwzjz.com/" title="广东网站设计" target="_blank">广东网站设计</a>    </div> </div> <div class="copy">