ivew的Select元素的Option在代码这样写时会出现空格
<Option
v-for="item in arr"
:key="item.id"
>
{{ item.val }}
</Option>
display:inline-block导致的间隙
- 原因:浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是
<li>换行后会产生换行字符，而它会变成一个空格，空格就占用一个字符的宽度。 - 整理一下解决方案:
<div class="box">
<ul>
<!-- 解决方案1: 写在一行,消除回车;写多行,回车换行用注释包起来;</li>从>前面换行;不写结束标签 都是些不大在实际中使用的操作哈哈 -->
<!-- <li class="part1">red</li><li class="part2">blue</li><li class="part3">yellow</li><li class="part4">green</li> -->
<li class="part1">red</li><!--
--><li class="part2">blue</li><!--
--><li class="part3">yellow</li><!--
--><li class="part4">green</li>
<li class="part1">red</li
><li class="part2">blue</li
><li class="part3">yellow</li
><li class="part4">green</li>
<li class="part1">red
<li class="part2">blue
<li class="part3">yellow
<li class="part4">green
<li class="part1">red</li>
<li class="part2">blue</li>
<li class="part3">yellow</li>
<li class="part4">green</li>
<!-- 3.空div清除浮动 -->
<!-- <div style="clear: both"></div> -->
</ul>
</div>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
width:100%;
}
ul li {
list-style-type: none;
}
/* 解决方案2: ul font-size为0 由于font-size属性会被继承 再单独设置 li font-size */
/* 看到有说这种方案在safari上不能解决问题,然鹅我没有复现,safari打开是可以消除空隙的,safari版本:13.0.3 */
/* ul {
font-size: 0;
}
li {
font-size: 12px;
} */
.box{
width:600px;
margin:0 auto;
margin-top:100px;
padding: 10px;
border: 5px solid #000;
}
/* 解决方案3: float浮动 */
/* .box li {
float: left;
} */
/* 注意需要清除浮动 */
/* 1.BFC
ul {
overflow: hidden;
} */
/* 2.伪元素 注意需要写content和display
这里的after伪元素不能被before替换,指定位置
如果使用before伪元素,写在ul的下一个兄弟元素上 */
/* after,before伪元素是在指定元素的*内部*最后或者最前 */
/* ul::after {
content: '';
display: block;
clear: both;
} */
/* 解决方案4: letter-spacing */
/* 思路和font-size相同,空格的letter-spacing是8px */
/* 但是这种方案我试了下在safari(13.0.3)会有莫名奇妙的问题 chrome正常(83.0.4103.116（正式版本）)见下图 */
/* ul {
letter-spacing: -8px;
}
li {
letter-spacing: normal;
} */
/* 解决方案5: flex */
/* 我爱flex 万能的flex哈哈 flex简直是前端救星 */
/* ul {
display: flex;
} */
.box li {
width:25%;
height: 150px;
display:inline-block;
}
.part1 {background-color:red;}
.part2 {background-color:blue;}
.part3 {background-color:yellow;}
.part4 {background-color:green;}
</style>
