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> 地址分享：<a href="http://cdweb.net/article/gipdeg.html">http://cdweb.net/article/gipdeg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dhiiid.html">怎么使用AndroidStudio开发Gradle插件-创新互联</a> </li><li> <a href="/article/dhiihe.html">小程序接口指的是什么意思-创新互联</a> </li><li> <a href="/article/dhiijd.html">如何实现LinuxShell脚本数学运算-创新互联</a> </li><li> <a href="/article/dhiigj.html">Shell编程之正则表达式（三）-创新互联</a> </li><li> <a href="/article/dhiipj.html">用python创建一个函数的方法-创新互联</a> </li> </ul> </div> </div> </div> <footer> <div class="footop"> <div class="wrap"> <div class="bottomrpw"> <div class="erp arp"> <dl> <dt>ADDRESS</dt> <dd class="address"> <i class="icon"></i> <span class="word">成都市青羊区锦天国际1号楼1002室</span> </dd> </dl> </div> <div class="erp arp"> <dl> <dt>TEL</dt> <dd class="phonum"> <i class="icon"></i> <span class="word en"> <a href="tel:18980820575">18980820575</a> </span> </dd> </dl> </div> <div class="erp crp"> <dl> <dt>OTHER</dt> <dd> <a class="word get-quote">获得报价与方案</a> </dd> <dd> <a href="#" target="_blank" rel='nofollow' class="word" title="付款方式">付款方式</a> </dd> </dl> </div> <div class="erp code-rp"> <dl> <dt>Wechat</dt> <dd class="code-wrap"> <span class="code"> <img src="/Public/Home/images/qr-code.jpg" alt="快上网微信公众号" /> </span> </dd> </dl> </div> </div> </div> </div> <div class="footerbot"> <div class="friendlinks"> <div class="wrap"> <ul class="rpl"> <li><a href="https://www.cdxwcx.com/jifang/yaan.html" title="四川雅安服务器托管" target="_blank">四川雅安服务器托管</a></li><li><a href="http://chengdu.cdweb.net/weixinkaifa/" title="微信小程序公众号开发" target="_blank">微信小程序公众号开发</a></li><li><a href="https://www.cdcxhl.com/yingxiao.html" title="营销型网站" target="_blank">营销型网站</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/" title="成都主机托管" target="_blank">成都主机托管</a></li><li><a href="http://www.cxjianzhan.cn/fwxm/pinpai.html" title="品牌官网设计" target="_blank">品牌官网设计</a></li><li><a href="http://www.zgyiwo.cn/" title="普特斯腐植酸" target="_blank">普特斯腐植酸</a></li><li><a href="http://www.cdsjymy.cn/" title="路面机械及配件" target="_blank">路面机械及配件</a></li><li><a href="http://www.kswcd.com/mobile/" title="手机网站制作" target="_blank">手机网站制作</a></li><li><a href="http://www.4006tel.net/vision/website.html" title="网站设计" target="_blank">网站设计</a></li><li><a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="成都多线机房" target="_blank">成都多线机房</a></li> </ul> </div> </div> <div class="wrap"> <div class="copyright"> <span class="en">©2007-2022</span> 成都快上网科技有限公司 <span class="en">ALL RIGHTS RESERVED.</span> <a rel="nofollow" href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备19037934号</a> </div> </div> </div> </footer> <div class="fcwrap"> <ul class="rpl clearfix"> <li class="phone"> <a rel="nofollow" target="_blank" href="tel:18980820575"> <i class="icon"></i> <strong>18980820575</strong> </a> </li> <li class="qq"> <a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=1&uin=244261566&site=qq&menu=yes"> <i class="icon"></i> <strong>244261566</strong> </a> </li> <li class="back-top"> <a href="javascript:void(0)" rel="nofollow" class="back-to-top"> <i class="icon"></i> <strong>回到顶部</strong> </a> </li> </ul> </div>  <div class="n-Wrap"> <div class="navBar visble show"> <div class="barlogo"> <a href="/" rel="nofollow"> <img src="/Public/Home/images/logo1.png" alt="成都做网站" /> <img src="/Public/Home/images/logo2.png" alt="成都网站设计" /> </a> </div> <div class="bmenu"> <i class="bar-top"><span></span></i> <i class="bar-cen"><span></span></i> <i class="bar-bom"><span></span></i> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> </div> <section class="fixmenu"> <div class="close-bar"> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> <nav class="smph"> <ul> <li class="index-hrefs on"><a href="http://www.cdweb.net/"><font>首页</font></a></li> <li><a href="/about/" rel="nofollow"><font>关于快上网</font></a></li> <li><a href="/service/" rel="nofollow"><font>服务范围</font></a></li> <li><a href="/case/" rel="nofollow"><font>案例展示</font></a></li> <li><a href="/solve/" rel="nofollow"><font>解决方案</font></a></li> <li><a href="/news/" rel="nofollow"><font>建站资讯</font></a></li> <li><a href="/contact/" rel="nofollow"><font>联系快上网</font></a></li> </ul> <div class="pwrap"> <span class="label">服务热线</span> <strong class="phone"><a href="tel:18980820575">18980820575</a></strong> </div> </nav> </section> </div>  <script src="/Public/Home/js/hotcss.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>

NEWS

网站建设资讯

CSScontent的使用机制介绍

替换元素