CSS中父盒子宽度100%，四个子盒子宽度25%，为什么不能排成一行？

今天在学习微信小程序布局的时候发现了一个很有意思的问题：在一个width:100%的父盒子下有四个width:25%的子盒子，但是这四个盒子并不能排在一行中，最后的一个盒子被挤到了下面，并且盒子之间有细微的宽度。

 <div class="father">
     <div class="son">div>
     <div class="son">div>
     <div class="son">div>
     <div class="son">div>
 div>

* {
     
 margin: 0;
 padding: 0;
 }
 .father {
     
     width: 100%;
     height: 500px;
     border: 1px solid #ccc;
 }
 .son {
     
     width: 25%;
     height: 100%;
     display: inline-block;
 }
 .son:nth-child(1){
     
     background-color: pink;
 }
 .son:nth-child(2){
     
     background-color: blue;
 }
 .son:nth-child(3){
     
     background-color: yellow;
 }
 .son:nth-child(4){
     
     background-color: red;
 }

效果如图，第四个盒子被挤到了下面。

我们注意到盒子中间有细微的缝隙，这是由于在HTML代码中，多个空格会折算成一个字符，所以子盒子的

之间的空格和回车折算成了字符，造成了空隙。

解决的方法可以把子盒子的

之间的空格全部删掉，但是这样会造成HTML的代码非常难看，为了代码维护强烈不推荐使用。

所以我们可以给父盒子.father的类上面加一个font-size: 0;，这样就能解决这个缝隙。

另外我们也可以用flex布局非常简单的实现这个效果，只需要给父盒子加上display: flex;即可。

但是又有了一个新的问题：现在我们把子盒子的宽度写成了width:25%，但是如果后续又要添加或者删除一个子盒子，它的宽度又要手动去计算和修改。
我们既然用了flex布局，就可以使用flex布局的特性来实现这个布局，给子盒子的样式加一个flex:1，即可实现。
如果有某个盒子宽度要搞特殊，我们还可以指定一个固定像素宽的盒子，然后给别的盒子加flex:1。

代码链接