百分比布局中子元素的百分比设定

前端开发中，响应式布局是开发人员必须要考虑的重要部分，方式也有很多种，包括@media媒体查询、相对单位布局（vw、vh、rem等）、流体布局等，也包括本文要讲述的百分比布局。

百分比布局能够通过%达到一种非常方便的响应式布局的方式，我们都知道他的百分比是相对于父级元素的，但是开发过程中有时候的效果也不尽如人意，比如在margin、padding等属性的百分比设置时。

那么我们来介绍一下，具体各个子元素或属性的百分比是根据谁来设定的。

• 子元素width、height：给子元素的width、height设置百分比时，是直接相对于父元素的宽高度实现的。（这里要注意要给父元素设置高度，如果父元素也是相对高度的话，那么要给祖先元素设置宽高，否则会对布局有影响）
• margin和padding：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关
• border-radius：相对于自身宽度，与父元素无关

以上就是目前我在开发过程中发现的关于百分比布局需要注意的点，也欢迎大家补充。