前言汇总inline-block的系列子元素的没有垂直对齐单行文本省略号生效的前提：盒模型正确tab中关于激活样式的下划线更多 前言本文主要汇总写样式时常见的问题，按照问题、原因、方案三个方面说明。 汇总 inline-block的系列子元素的没有垂直对齐语雀截图： 原因：针对inline-block的元素对于有无文本基线对齐标准不同。行内元素和替换元素（如等）会有一个叫做基线（baseline）的玩意，他的位置位于文本框的底部，即文字的最底端；当块状行内元素无文本填充的时候，它的基线就会自动移至元素的最底端；同时，图片以及其他非替换元素的基线也为元素的最底端。</p> <p>既然页面的混乱是因为“基线对齐”导致的，那只需要设置元素的垂直对齐不参照基线即可，引入vertical-align属性，设置元素的垂直对齐方式。</p> <p>方案：<br />设置所有的子元素，vertical-align：middle</p> <p>备注：<br />1 案例codepen地址：<a rel="nofollow" href="https://codepen.io/robinson90/pen/YzPmWjQ">https://codepen.io/robinson90/pen/YzPmWjQ</a><br />2 文字大小的不同也会引起这个问题 </p> <p><a name="iJLUa"></a></p> <h3 id="dt16lo"><a name="dt16lo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>单行文本省略号生效的前提：盒模型正确</h3><p>单行省略号生效的必要前提是盒模型一定要正确，如果你用了margin-left实现一些对齐的效果，并因此导致了盒模型错误，那么就会导致省略号无法出现，这种时候，可以考虑其他方式，比如把margin-left换成padding-left。</p> <p>截图：<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/202135/1580627150115-7ed9aab2-de4b-45c2-82df-f6b22a5e1979.png#align=left&display=inline&height=173&name=image.png&originHeight=346&originWidth=1270&size=44339&status=done&style=none&width=635" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/202135/1580627084073-ba342f5a-4fdd-4b72-a1fa-ba7252825d4f.png#align=left&display=inline&height=291&name=image.png&originHeight=582&originWidth=844&size=83502&status=done&style=none&width=422" alt="image.png"></p> <p>出现问题的原因：<br />margin-left虽然纠正左边的对齐，但影响了模型导致最终无法实现单行省略号。</p> <p>解决方案：<br />margin-left换位padding-left ，语雀官方最后也采用了这种样式方案。</p> <p><a name="J5Szd"></a></p> <h3 id="69kfzx"><a name="69kfzx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>tab中关于激活样式的下划线</h3><p>我们经常会为tab中当前激活设置一个下划线样式，包括颜色以及下划线颜色。</p> <p>但这会导致一个问题，因为border的问题会导致盒模型有问题，即使设置为border-box，也会因为其他选项没有border部分导致抖动，但设置不同的行高也不理想，所以一般的样式设置都是紧紧改变非激活的文字颜色以及下划线颜色。</p> <p>比如天猫的分类下划线就是如此：</p> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/202135/1581222721905-98b7392a-6083-44cb-b586-e58a0581d0a4.png#align=left&display=inline&height=56&name=image.png&originHeight=56&originWidth=326&size=3042&status=done&style=none&width=326" alt="image.png"></p> <pre><code class="lang-css">.header-dom .header-nav .active { color: #ff0036; border-color: #ff0036; } .header-dom .header-nav li { color: #999; height: 44px; line-height: 44px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 2px solid #fff; } </code></pre> <p><a name="WD2t4"></a></p> <h3 id="1fsudz"><a name="1fsudz" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p><a name="uOwcH"></a></p> <h2 id="blza2q"><a name="blza2q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>更多</h2><p>补充中，，，</p>
