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://kswsj.cn/article/gipdeg.html">http://kswsj.cn/article/gipdeg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dodcgip.html">python常用计算函数 python数学计算函数</a> </li><li> <a href="/article/dodcgsh.html">linux后台进程命令的简单介绍</a> </li><li> <a href="/article/dodcgsd.html">vb.net创建表格 vb如何制作表格</a> </li><li> <a href="/article/dodcgop.html">go语言教程标准 go语言编程规范</a> </li><li> <a href="/article/dodcgcg.html">php数据在线查询 php网站统计</a> </li> </ul> </div> </div> <div class="line"></div>  <footer id="5"> <div class="foot1 container"> <div class="list"> <div class="item"> <a href="javascript:;"> <span class="ico1"><i class="iconfont"></i><img src="/Public/Home/img/ewm.png" alt=""></span> <strong>关注我们</strong> </a> </div> <div class="item"> <a href="" target="_blank"> <span><i class="iconfont"></i></span> <strong>索要报价</strong> </a> </div> <div class="item"> <a href="" target="_blank"> <span><i class="iconfont"></i></span> <strong>我要咨询</strong> </a> </div> <div class="item"> <a href="" target="_blank"> <span><i class="iconfont"></i></span> <strong>找到我们</strong> </a> </div> <div class="item"> <a href="" target="_blank"> <span><i class="iconfont"></i></span> <strong>投诉建议</strong> </a> </div> </div> <div class="tel"> <dl> <tel><a href="tel:400-028-6601" target="_blank">400-028-6601</a></tel><br> <span>也许您需要专业的服务，欢迎来电咨询</span> </dl> <dl> <tel><a href="tel:18980820575" target="_blank">18980820575</a></tel><br> <span>您的需求，是我们前进的动力</span> </dl> </div> </div> <div class="friend"> <div class="container"> <span class="tit">友情链接：</span> <div class="inner"> <a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文推广</a><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank">响应式网站设计</a><a href="https://www.cdcxhl.com/" target="_blank">网站制作公司</a><a href="https://www.cdcxhl.com/" target="_blank">建站</a><a href="https://www.cdcxhl.com/mobile.html" target="_blank">手机网站建设公司</a><a href="https://www.cdcxhl.com/h5.html" target="_blank">成都h5网站建设</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">机柜租用</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">分类目录</a><a href="https://www.cdcxhl.com/yunying.html" target="_blank">网站托管运营</a><a href="https://www.cdcxhl.com/yunying.html" target="_blank">网站运营</a><a href="https://www.cdcxhl.com/link/" target="_blank">外链</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站免费收录</a><a href="https://www.cdcxhl.com/security/" target="_blank">成都等保测评</a><a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">小程序开发公司</a><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank">成都响应式网站设计</a><a href="https://www.cdcxhl.com/ddos/" target="_blank">高防IP防护</a><a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">成都西云机房</a><a href="https://www.cdcxhl.com/link/" target="_blank">友情链接购买</a> </div> </div> </div> <div class="foot"> <div class="container"> <div class="footNav"> <h3>网站建设</h3> <a href="http://seo.cdkjz.cn/yingxiao/" target="_blank">营销型网站建设</a><a href="http://chengdu.cdxwcx.cn/wangzhan/" target="_blank">公司网站建设</a><a href="http://www.cqcxhl.com/" target="_blank">重庆网站建设公司</a> </div> <div class="footNav"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/idc/mianyang.html" target="_blank">绵阳服务器托管</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">成都机柜租用</a><a href="http://www.cqfuwuqi.com/" target="_blank">重庆服务器托管</a> </div> <div class="footNav"> <h3>网站制作</h3> <a href="http://www.wjzwz.com/" target="_blank">温江网站制作</a><a href="https://www.cdxwcx.com/" target="_blank">网站制作</a><a href="https://www.cdcxhl.com/mobile.html" target="_blank">手机网站制作</a> </div> <div class="footNav"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/service/licence.html" target="_blank">药房许可证</a><a href="https://www.cdcxhl.com/link/" target="_blank">链接买卖</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站快速收录</a> </div> <div class="fr ecode"> <div class="fl"> <img src="/Public/Home/img/ewm.jpg"> <p>关注企业微信</p> </div> <div class="fr slogan"> <p class="icon"> <a class="ph" href=""><i class="iconfont"></i></a> <a class="qq" href="tencent://message/?uin=1683211881&Site=&Menu=yes"><i class="iconfont"></i></a> </p> <p> <i>想要找 </i> <a href="">小程序开发</a>、<a href="">APP开发</a>、 <a href="">营销型网站建设</a>、<a href="">网站建设</a>、 <i><a href="">网站定制开发</a></i> ，就选<a href="">创新互联</a> </p> </div> </div> </div> <div class="bottom container"> <p class="fl"> 版权所有：成都创新互联科技有限公司备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a> 服务热线：028-86922220 </p> <p class="fr"> <a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>： <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a> </p> </div> </div> </footer>  <div class="fot"> <ul> <li> <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank"> <img src="/Public/Home/img/fot1.png" alt=""> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/img/fot2.png" alt=""> <p>拨打电话</p> </a> </li> </ul> </div> </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>

关于创新互联

CSScontent的使用机制介绍

替换元素