这篇文章整理一下常见的布局思路

腾讯面试问到的，问题是，在不规定父元素宽高的情况下，一行排列三个盒子，超出3个，按从左到右布局，每个子元素间隔10px，可以用flex也可以用float布局。。。一时半会儿还真没想到百分比来控制宽度，我好菜。。。 我没理解错的话，示意图如下：

效果图：

参考来源

高度height的百分比相对于父元素的高度，父元素默认是没有高度的。如果不给父元素一个高度，子元素也不会有高度。在普通文档流中，块级元素的宽度默认是浏览器的宽度，因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom和padding-top的百分比是相对于父元素的宽度，而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素，其高度就不再依赖于父元素高度了。由于padding-bottom和padding-top的百分比是相对于父元素的宽度，当屏幕大小出现变化时，元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。

效果图：

最终效果和float一样，重点在于width的计算，可以使用百分比或者是calc来计算宽，还有一个知识点是padding的使用，因为一般宽的100%就是浏览器窗口的宽度，但height是没有高度的，因此可以使用padding来设置盒子高度（padding-top、padding-bottom都可以）。

有任何错误欢迎指出～””(￣ー￣) (￣ー￣)//””