css中tab-size属性的使用方法

小编给大家分享一下css中tab-size属性的使用方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联公司-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、成都服务器托管、等保安全、私有云建设等企业级互联网基础服务，联系热线：028-86922220

css tab-size属性定义及用法

在css中，tab-size属性是使用来规定制表符（tab）字符的空格长度，在HTML中，制表符（tab）字符通常显示为一个单一的空格字符，除了一些元素，比如和 <pre>，tab-size属性的结果只对这些元素有效。</p><p>tab-size属性是css3中新增属性，目前只有Chrome浏览器支持tab-size属性；Firefox浏览器支持-moz-tab-size属性来替代该属性；Opera浏览器支持-o-tab-size属性来替代该属性。没有浏览器支持该值作为长度单位。</p><p><strong>css tab-size属性语法格式</strong></p><p>css语法：tab-size: number/length/initial/inherit</p><p>JavaScript语法： object.style.tableLayout="fixed"</p><p><strong>属性值说</strong></p><p>number：规定每个制表符（tab）字符要显示的空格字符的数量（默认值为8）</p><p>length：规定制表符（tab）字符的长度（几乎所有的主流浏览器都还不支持该属性值）</p><p>initial：设置该属性为它的默认值</p><p>inherit：从父元素继承tab-size属性的值</p><p><strong>实例</strong></p><pre><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css tab-size属性制表符的空格长度</title> <style type="text/css"> #t1{tab-size: 4; -moz-tab-size: 4; /*Firefox */ -o-tab-size: 4; /*Opera */ } #t2{tab-size: 8; -moz-tab-size: 8; /*Firefox */ -o-tab-size: 8; /* Opera */ } </style> </head> <body> <pre id="t1">I use tab-size 4</pre> <pre id="t2">I use tab-size 16</pre> <p>目前只有Chrome支持 tab-size属性。</p> <p>Firefox支持可替代该属性的属性-moz-tab-size属性。</p> <p>Opera支持可替代该属性的属性-o-tab-size属性。</p> </body> </html></pre><p><strong>运行结果</strong></p><p><strong><img src="/upload/otherpic55/10459.jpg" alt="css中tab-size属性的使用方法"></strong></p><p>看完了这篇文章，相信你对css中tab-size属性的使用方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！</p> <br> 分享名称：css中tab-size属性的使用方法 <br> URL链接：<a href="http://kswsj.cn/article/gjcioj.html">http://kswsj.cn/article/gjcioj.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcheigi.html">c语言实现自己的库函数 c语言的库函数源码</a> </li><li> <a href="/article/dcheips.html">sap采购系统学习视频的简单介绍</a> </li><li> <a href="/article/dcheijh.html">帝国cms加主动推送帝国cms自动发布</a> </li><li> <a href="/article/dcheiip.html">帝国cms密码忘记帝国cms忘记登陆账号密码</a> </li><li> <a href="/article/dcheepp.html">阿里云给服务器开端口号阿里云服务器开启端口</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/zuyong/" target="_blank">成都租用服务器</a><a href="https://www.cdcxhl.com/shop.html" target="_blank">商城网站建设</a><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank">成都响应式网站设计</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文推广</a><a href="https://www.cdcxhl.com/link/" target="_blank">友情链接</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a><a href="https://www.cdcxhl.com/sosuo.html" target="_blank">关键词优化排名</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文发稿投放</a><a href="https://www.cdcxhl.com/" target="_blank">做网站</a><a href="https://www.cdcxhl.com/link/" target="_blank">外链</a><a href="https://www.cdcxhl.com/qiye.html" target="_blank">成都企业网站建设</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">营销软文</a><a href="https://www.cdcxhl.com/" target="_blank">成都建站公司</a><a href="https://www.cdcxhl.com/gaofang/" target="_blank">高防服务器</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文发布平台</a><a href="https://www.cdcxhl.com/qiye.html" target="_blank">企业网站建设</a><a href="https://www.cdcxhl.com/tuoguan/yaan/" target="_blank">雅安云锦天府</a><a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">小程序开发</a> </div> </div> </div> <div class="foot"> <div class="container"> <div class="footNav"> <h3>网站建设</h3> <a href="http://www.sclezhi.cn/" target="_blank">乐至网站建设</a><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank">品牌网站建设</a><a href="http://www.kswcd.com/service/" target="_blank">上市集团网站建设</a> </div> <div class="footNav"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/idc/wenjiang.html" target="_blank">温江服务器托管</a><a href="https://www.cdcxhl.com/idc/gadx.html" target="_blank">贵安电信机房</a><a href="http://www.cqfuwuqi.com/" target="_blank">重庆服务器托管</a> </div> <div class="footNav"> <h3>网站制作</h3> <a href="http://www.cqcxhl.com/" target="_blank">重庆网站制作</a><a href="http://www.cqcxhl.com/" target="_blank">网站制作</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站制作</a> </div> <div class="footNav"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/hangyead/" target="_blank">一元广告</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文营销</a><a href="https://www.cdcxhl.com/mianfei/jianzhan/" 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>

关于创新互联

css中tab-size属性的使用方法