1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

 i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

首页 > 网页制作 > CSS

详解css中inline-block的最小宽度值

admin CSS 2022-02-06 00:41:28 css   inline-block   最小宽度值"

前言

最近晚上会抽出一点时间看《css世界》这本书，这本书讲的很有趣，让我知道css并非几个属性样式这么简单。昨天看到width在行内块元素中，如果设置其宽度为0，该元素标签里面的内容存在着一个最小的宽度，最小的宽度根据中文字符和英文字符又有所区别，中文字符是以每个汉字来分割，英文字符是以英文单词来分割。

文章的开始

书中举了一个凹凸的例子，但是并没有详细的讲解，下面我对这段代码详细解释一下。

代码操作




    

        我爱mother
        不爱你
        我爱你

结果演示

代码解读

两个span标签来展示凹凸的效果。span标签是行内元素，如果对三种样式不是很熟悉我在文章的后面都有说明。

1.首先通过display转换成行内块元素。然后宽度设置为0让span元素能够拥有最小宽度值。

2.对两个伪元素使用公共的伪元素before，伪元素不同的内容会不同的换行外边框样式为红色并且规定字体样式。
为什么要用伪元素，不用伪元素直接进行设置不行吗？我带着这个疑问又试了一次，发现不用伪元素的时候文字是凹凸显示，但是边框不是，而且文字之间还会叠加和重合。这个原因还没有想明白，大家可以看看讨论一下。

direction: rtl;是为了让文本方向从右到左，凸出来的部分正好对准凹进去的口子。

3.后面的我爱mother，不爱你会按照行内块元素的最下宽度值在before元素内容之后显示。

标签分类

块级元素

   定义地址
   定义表格标题
    定义列表中定义条目
   定义文档中的分区或节
    定义列表
    定义列表中的项目
  定义一个框架集
  创建 HTML 表单

    定义最大的标题

    定义副标题

    定义标题

    定义标题

    定义标题
    定义最小的标题
    创建一条水平线
    元素为 fieldset 元素定义标题
  •     标签定义列表项目
      为那些不支持框架的浏览器显示文本，于 frameset 元素内部<br /> <noscript>  定义在脚本未被执行时的替代内容<br /> <ol>    定义有序列表<br /> <ul>    定义无序列表<br /> <p> 标签定义段落<br /> <pre>   定义预格式化的文本<br /> <table> 标签定义 HTML 表格<br /> <tbody> 标签表格主体（正文）<br /> <td>    表格中的标准单元格<br /> <tfoot> 定义表格的页脚（脚注或表注）<br /> <th>    定义表头单元格<br /> <thead> 标签定义表格的表头<br /> <tr>    定义表格中的行</p> <p><strong>行内元素</strong></p> <p><a> 标签可定义锚<br /> <abbr>  表示一个缩写形式<br /> <acronym>   定义只取首字母缩写<br /> <b> 字体加粗<br /> <bdo>   可覆盖默认的文本方向<br /> <big>   大号字体加粗<br /> <br>    换行<br /> <cite>  引用进行定义<br /> <code>  定义计算机代码文本<br /> <dfn>   定义一个定义项目<br /> <em>    定义为强调的内容<br /> <i> 斜体文本效果<br /> <img>   向网页中嵌入一幅图像<br /> <input> 输入框<br /> <kbd>   定义键盘文本<br /> <label> 标签为 input 元素定义标注（标记）<br /> <q> 定义短的引用<br /> <samp>  定义样本文本<br /> <select>    创建单选或多选菜单<br /> <small> 呈现小号字体效果<br /> <span>  组合文档中的行内元素//本例子当中用到了span<br /> <strong>    语气更强的强调的内容<br /> <sub>   定义下标文本<br /> <sup>   定义上标文本<br /> <textarea>  多行的文本输入控件<br /> <tt>    打字机或者等宽的文本效果<br /> <var>   定义变量</p> <p><strong>行内块元素</strong></p> <p><button>    按钮<br /> <del>   定义文档中已被删除的文本<br /> <iframe>    创建包含另外一个文档的内联框架（即行内框架）<br /> <ins>   标签定义已经被插入文档中的文本<br /> <map>   客户端图像映射（即热区）<br /> <object>    object对象<br /> <script>    客户端脚本</p> <p><span style="color: #ff0000"><strong>文章的末尾</strong></span></p> <p>总结为一句话，就是行内块元素的width==0的时候，元素里面的内容有一个最小的宽度值。大家也可以动手试一试，有什么问题欢迎评论区留言，一起学习。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。</p> <span id="art_bot" class="jbTestPos"></span> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div> <div class="mbd_ad"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9825815134" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br> 本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/CSS/74611.html</p> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script> </div> <div class="r-pn-post"> <div class="shang"><a title="不可思议的CSS导航栏下划线跟随效果" href="/web/CSS/74609.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> 不可思议的CSS导航栏下划线跟随效果 </a></div> <div class="xia"><a href="/web/CSS/74612.html" rel="bookmark" class="next_p"><span>下一篇 :</span> 深度理解CSS clear:both的使用</a></div> <div class="clear"></div> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> <li> <a href="/PMsheji/PS/157209.html"> <div class="img"><img src="https://img.jbzj.com/do/upimg/080906/1220A92202T401J95.gif" alt="Photoshop做简单的xhtml+css网页"></div> <p>Photoshop做简单的xhtml+css网页</p> </a> </li><li> <a href="/websafe/anquanjiaocheng/147827.html"> <div class="img"><img src="https://www.jb51.net/hack/javascript:[code]" alt="无聊的Css跨站挂马"></div> <p>无聊的Css跨站挂马</p> </a> </li><li> <a href="/PMsheji/PS/148190.html"> <div class="img"><img src="https:https://www.jb51.net/img.jbzj.com/file_images/photoshop/200810511545485977801.gif" alt="Photoshop简单制作xhtml css网页页面"></div> <p>Photoshop简单制作xhtml css网页页面</p> </a> </li><li> <a href="/jtjc/win10/132046.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201507/20150703150427270.jpg" alt="win7系统因MMCSS服务让系统变卡怎么解决？"></div> <p>win7系统因MMCSS服务让系统变卡怎么解决？</p> </a> </li><li> <a href="/yunying/SEO/113666.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201411/2014112014163029.png" alt="网站性能优化之CSS无图片技术"></div> <p>网站性能优化之CSS无图片技术</p> </a> </li><li> <a href="/yunying/jianzhan/111770.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201205/2253020.jpg" alt="基于CSS3+jQuery的动态时钟制作过程"></div> <p>基于CSS3+jQuery的动态时钟制作过程</p> </a> </li><li> <a href="/jtjc/Linux/111029.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201907/201907230926588.png" alt="nginx 部署 vue 项目找不到js css文件的解决方法"></div> <p>nginx 部署 vue 项目找不到js css文件的解决方法</p> </a> </li><li> <a href="/web/xinde/80249.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201512/20151221235212.png" alt="CSS实现单行、多行文本溢出显示省略号的实现方法"></div> <p>CSS实现单行、多行文本溢出显示省略号的实现方法</p> </a> </li> </ul> </div> <div class="post_comments"> <div id="comment"> <link href="/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <script src="/d/js/js/plface.js"></script>&nbsp;&nbsp;&nbsp; <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="74611" /> <input name="classid" type="hidden" id="classid" value="48" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="/web/CSS/74611.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="/e/extend/infocomment/commentajax.php?classid=48&id=74611"></script> </div> </div> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea18.js></script></div> <div class="mbd_ad"> <!-- 手机广告位-评论底部广告位新 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9383780240" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript" src="//gg.iwyv.com/production/mh_g/i/static/wi_djn.js"></script> </div> </div> <!--@ mainl--> <div class="mainr"> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea14.js></script> </div> <div class="widget widget_hotpost"> <h4>热门文章</h4> <ul> <li><i class="red">1</i><a href="/web/CSS/78258.html" target="_blank">CSS解决页面图片水平垂直居中问题的方法</a></li> <li><i class="red">2</i><a href="/web/CSS/73410.html" target="_blank">详解css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）</a></li> <li><i class="red">3</i><a href="/web/CSS/72994.html" target="_blank">css3中transform属性实现的4种功能</a></li> <li><i>4</i><a href="/web/CSS/76648.html" target="_blank">详解CSS3 rem(设置字体大小) 教程</a></li> <li><i>5</i><a href="/web/CSS/76552.html" target="_blank">css判断某元素的子元素个数并分别设置样式的方法</a></li> <li><i>6</i><a href="/web/CSS/74587.html" target="_blank">基于html+css做一个好看的可翻转登录注册界面</a></li> <li><i>7</i><a href="/web/CSS/73319.html" target="_blank">CSS3 rgb and rgba（透明色）的使用详解</a></li> <li><i>8</i><a href="/web/CSS/73195.html" target="_blank">css3中flex布局宽度不生效的解决</a></li> <li><i>9</i><a href="/web/CSS/77889.html" target="_blank">border-radius以外的CSS圆角边框制作方法</a></li> <li><i>10</i><a href="/web/CSS/73280.html" target="_blank">Typora代码块配色和标题自带序号的实现代码</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea10.js></script> </div> <div class="widget widget_previous"> <h4>最近发表</h4> <ul> <li><a href="/ITzixun/178187.html">日本雷蛇官网实习生上错价了？游戏本只卖15950日元？</a></li> <li><a href="/youxi/175574.html">《原神》物归原主又归原主世界任务指南 游戏攻略</a></li> <li><a href="/youxi/175631.html">《原神》振晶的研究第三天试用角色2000分攻略 游戏攻略</a></li> <li><a href="/youxi/175559.html">《原神》2.6版全旋曜玉帛点位说明_蒙德 游戏攻略</a></li> <li><a href="/youxi/175547.html">《原神》2.6版深渊11-1守护镇石技巧 游戏攻略</a></li> <li><a href="/youxi/175604.html">《原神》神里绫华装备搭配推荐 游戏攻略</a></li> <li><a href="/youxi/175516.html">《原神》云堇突破材料获取方法 游戏攻略</a></li> <li><a href="/youxi/175494.html">《原神》世界任务他乡迷失客攻略 游戏攻略</a></li> <li><a href="/youxi/175497.html">《原神》神里绫华全面培养指南 神里绫华技能详解与出装建议 游戏攻略</a></li> <li><a href="/youxi/175460.html">《原神》神里绫人平民向大世界配队思路 游戏攻略</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea11.js></script> </div> <div class="widget widget_tags"> <h4>标签列表</h4> <ul> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C">开放世界</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%B2%99%E7%9B%92">沙盒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win10">win10</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=3D%E8%AE%BE%E8%AE%A1">3D设计</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=PS">PS</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E9%AC%BC%E8%B0%B7%E5%85%AB%E8%8D%92">鬼谷八荒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win7">win7</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%89%8B%E6%B8%B8">手游</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%9B%A2%E9%98%9F%E7%AB%9E%E6%8A%80">团队竞技</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%8E%9F%E7%A5%9E">原神</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E4%BA%8C%E6%AC%A1%E5%85%83%E6%B8%B8%E6%88%8F">二次元游戏</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AD%96%E7%95%A5">策略</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%94%B5%E8%84%91%E5%B8%B8%E8%AF%86">电脑常识</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80">王者荣耀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%85%A7%E7%89%87%E5%A4%84%E7%90%86">照片处理</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=MySQL">MySQL</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%90%83%E9%B8%A1">吃鸡</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AC%94%E8%AE%B0%E6%9C%AC">笔记本</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F%E5%A4%A7%E9%80%83%E6%9D%80">绝地求生大逃杀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%B0%84%E5%87%BB%E7%AB%9E%E4%BA%89">射击竞争</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea12.js></script> </div> </div> </div> </div> <script type="text/javascript"> // JavaScript Document function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop || document.body.scrollTop; } function setScrollTop(value){ if(document.documentElement.scrollTop){ document.documentElement.scrollTop=value; }else{ document.body.scrollTop=value; } } window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none"; var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight; obj.style.bottom=0+"px"; if(h<350){ obj.style.bottom=340+"px"; obj.style.top="auto"; } } obj.onclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } </script> <!--向上 --> <div id="jz52top" > <span> <DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV> </span> <SCRIPT type=text/javascript>goTopEx();</SCRIPT> <span> <ul id="navmenu"> <li><a title="QR Code" class="jzqr" ><b>QR Code</b></a> <ul> <div id="jzqrn"> <img src="/skin/ecms172/images/weixin.png" width="228" height="228" /> <p>打开手机扫描上面的二维码</p> </div> </ul> </li> </ul> </span> </div> <!--向上完 --> <!-- 底部广告--> <!-- 底部广告--> <!--底部信息 --> <div class="ft_wp"> <div id="ft" class="wp cl ftddd" > <div class="ft_info" > <div class="ft_z1"> <p>潘少俊衡</p> <h3 class="ft_z_zdxx_zx"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <span class="pipe"> | </span> 桂ICP备2023010378号-4 </h3> <h2 class="ft_z_zdxx_zx"> <p style="font-size:12px;">Powered By <a href="https://www.iwyv.com/" title="潘少俊衡" target="_blank">EmpireCMS</a> </p> </h2> </div> <div class="ft_z2"> </div> <div class="ft_z2"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMBHZNTEL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XFMBHZNTEL'); </script> <p><a target="_blank" href="https://www.iixiang.com/">爱享小站</a></p> <p><a target="_blank" href="https://www.sdzdyn.com/">中德益农</a></p> <p><a target="_blank" href="https://www.guujie.com">谷姐神农</a></p> <p><a target="_blank" href="https://huanyafeiliao.com/">环亚肥料</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://beian.miit.gov.cn/Integrated/index">桂ICP备2023010378号-4</a></p> <p><a href="https://beian.miit.gov.cn" title="桂公网备 45012202000125号" target="_blank">桂公网备 45012202000125号</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">联系我们</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">商业合作</a></p> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">广告投放</a></p> <p><a target="_blank" href="/tgxz/">投稿须知</a></p> </div> <div class="ft_bx"style="left:335px;"> </div> <div class="ft_bx ft_t1"> </div> <div class="ft_bx ft_t2"> </div> <div class="ft_bx ft_t3"> </div> <div class="ft_bx ft_t4"> </div> <div class="ft_z3"> <dd> <span><img src="/skin/ecms172/images/weixin.png" width="75" height="72.2" /></span> <p> <!-- 引用官方图标 --> <!-- 引用官方图标百度统计 --> </p> <p>使用手机软件扫描微信二维码</p> <p>关注我们可获取更多热点资讯</p> <p>感谢潘少俊衡友情技术支持</p> </dd> </div> </div> </div> </div> <div class="clear"></div> <!--底部信息完 --> <script src="/skin/ecms172/js/common.min.js" type="text/javascript"></script> <script></script> </body> </html>