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://bjjierui.cn/article/gipdeg.html">http://bjjierui.cn/article/gipdeg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ihdsgc.html">css怎么实现数字分页效果</a> </li><li> <a href="/article/ihdssg.html">怎么对Mysql连接请求的tcpdump内容进行分析</a> </li><li> <a href="/article/ihdsgs.html">如何解决Redis缓存异常的问题</a> </li><li> <a href="/article/ihdchp.html">Docker下mysql设置字符集的方法</a> </li><li> <a href="/article/ihdcdh.html">PHP如何实现覆盖操作</a> </li> </ul> </div> </div> <ul class="kf"> <li class="kf1"><span class="tela">建站热线：<a href="tel:13518219792" target="_blank">13518219792</a></span></li> <li class="kf11"><span class="weixin"><img src="/Public/Home/images/weixin.jpg" alt="网站建设微信咨询"><br> 微信扫一扫在线咨询</span> </li> <li class="kf5">QQ客服： <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="建站业务咨询" title="建站业务咨询"></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="网站设计咨询" title="网站设计咨询"></a></li> <li class="kf2"><a href="http://www.bjjierui.cn/cases/" target="_blank">案例</a></li> <li class="kf4"><a href="http://www.bjjierui.cn/" target="_blank">价格</a></li> <li class="kf6" title="返回顶部"></li> </ul> <div class="footer"> <div class="footer_2"> <p>Copyright © 2012-2020 <strong>网创优客信息咨询</strong> 版权所有蜀ICP备2023009085号-7<br /> 手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号邮编:610000 Email:wh@cdxwcx.com<br/> 成都网络公司-网创优客建站品牌专注<a href="http://www.bjjierui.cn/">成都网站建设</a>、<a href="http://www.bjjierui.cn/">成都网站设计</a>服务，为成都公司建设高品质的网站</p> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".kf6").click(function() { $('body,html').animate({ scrollTop : 0 }, 500); return false; }); }) var bodyhe=$("body").height(); var winhe=330; var bodyf=bodyhe-winhe; var bodyft=bodyhe-365; window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; if(t>200){ $(".kf .kf6").stop().animate({opacity:'1'},200); }else{$(".kf .kf6").stop().animate({opacity:'0'},200);} if(t>1 && t<winhe){ $(".header").addClass('no'); $(".header").removeClass('notwo'); }else if(t>winhe){ $(".header").removeClass('no'); $(".header").addClass('notwo'); }else{ $(".header").removeClass('no'); } } </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>

定制建站费用3500元

品牌网站建设费用6000元

商城网站建设费用8000元

手机微信网站建站3000元

建站知识

CSScontent的使用机制介绍

替换元素