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://cxhlcq.com/article/gipdeg.html">http://cxhlcq.com/article/gipdeg.html</a> </div> </div> </div> <div class="other container"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcoshii.html">go语言可以开发什么开发go语言用什么ide</a> </li><li> <a href="/article/dcoshce.html">go语言和编写后端接口 go语言和编写后端接口是什么</a> </li><li> <a href="/article/dcoshsh.html">测试JAVA代码冗余 java代码在线测试</a> </li><li> <a href="/article/dcoshdh.html">java关闭流对象代码 javafinally关闭流</a> </li><li> <a href="/article/dcosheh.html">03服务器安全策略软件服务器安全软件哪个好</a> </li> </ul> </div> <div class="footer"> <div class="foota container"> <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站制作</h3> <a href="http://www.cqcxhl.com/" target="_blank">网站制作</a><a href="http://www.cxjianzhan.com/mobile/" target="_blank">wap网站制作</a><a href="http://www.cxjianzhan.com/mobile/" target="_blank">手机网站制作</a><a href="https://www.cdxwcx.com/" target="_blank">网站制作</a><a href="http://www.myzwz.com/" target="_blank">绵阳网站制作</a><a href="http://www.cdxwcx.cn/bj/" target="_blank">网站制作价格</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/mianfei/jianzhan/" target="_blank">免费建站模板</a><a href="https://www.cdcxhl.com/service/guangdianxuke.html" target="_blank">广播电视节目制作许可证</a><a href="https://www.cdcxhl.com/ruanwen/yingxiao/" target="_blank">软文发稿</a><a href="https://www.cdcxhl.com/service/dailijizhang.html" target="_blank">代理记账</a><a href="https://www.cdcxhl.com/mianfei/jianzhan/" target="_blank">免费建站</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">分类目录</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站建设</h3> <a href="http://m.cdcxhl.cn/shop/" target="_blank">成都商城网站建设公司</a><a href="http://www.cqcxhl.com/" target="_blank">网站建设</a><a href="http://www.cxjianzhan.cn/fwxm/yingxiao.html" target="_blank">营销型网站建设</a><a href="http://www.cdkjz.cn/fangan/cosmetics/" target="_blank">化妆品企业网站建设方案</a><a href="http://www.kswcd.cn/serve/" target="_blank">专业网站建设</a><a href="http://m.cdcxhl.cn/seo/" target="_blank">营销网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/idc/cqlt.html" target="_blank">重庆联通机房托管</a><a href="https://www.cdcxhl.com/idc/gysx.html" target="_blank">贵阳三线机房</a><a href="https://www.cdcxhl.com/tuoguan/zongshu/" target="_blank">成都棕树机房</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳托管服务器</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳机房托管</a><a href="https://www.cdcxhl.com/tuoguan.html" target="_blank">成都服务器托管</a> </li> </ul> </div> <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全国免费咨询:</p> <b>400-028-6601</b> <p>业务咨询：028-86922220 / 13518219792</p> <p>节假值班：18980820575 / 13518219792</p> <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p> </div> </div> <div class="footb"> <div class="copy container"> <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司 <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div>  </div> </div> <div class="link"> <div class="container"> 友情链接:： <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a> <a href="">四川网站建设</a> <a href="">重庆建设网站</a> <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a> <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a> <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a> <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a> <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a> <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a> <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a> <a href="">重庆网站建设</a> <a href="">重庆网站公司</a> <a href="">渝中网站制作</a> <a href="">重庆网站设计</a> </div> </div> </div> <div class="foot"> <ul class="public-celan"> <li> <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span class="span-txt">在线咨询</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span class="span-txt">电话咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span class="span-txt">QQ咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span class="span-txt">预约顾问</span> </a> </li> </ul> </div> <div class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在线咨询</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p> </a> </dt> </dl> </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>