2018.12月问题整理杂记

-12.24-：html布局如下：<div class=“tab-tit”> <a href=“javascript:;">html</a> <a href=“javascript:;">css</a> <a href=“javascript:;">javascript</a> <a href=“javascript:;">vue</a></div>css：tab{ width: 600px; margin: 0 auto;}.tab-tit{ width: 600px; font-size: 0;}.tab-tit a{ display: inline-block; height: 40px; line-height: 40px; font-size: 16px; width: 25%; text-align: center; background: #ccc; color: #333; text-decoration: none; /* float: left; */}.tab-tit .cur{ background: #09f; color: #fff;}对于这块，我不是很理解.tab-tit{font-size:0}，后发现，注销这个样式（font-size:0），用float：left可以解决。后查阅一些资料，get到了原因。以下是原文解释https://segmentfault.com/q/10…问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list-info 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。用到我这里，解决办法：1、去掉空白2、font-size:0 可以让空白区域消失