子元素超出了父元素的高度_CSS实现保持元素宽高比以及Vue组件实现

原理

1. 元素的padding值如果使用百分比，那这个百分比是相对于父元素宽度而言的，padding-top和padding-bottom指定百分比时也是相对于父元素高度而言；

2. IE盒模型中，width = content + padding + border，因此只设置padding也会使元素在页面上占据一部分区域；chromium内核浏览器大多采用IE盒模型而非W3C标准盒模型；

验证

写两个元素，父元素宽高200px，子元素padding为20%，可以在调试器里看到，四边padding都是20px；

截图里，.outter是父元素，右下角盒模型是.inner；思考：为什么.inner的盒模型中，content区域是160*0？

应用

实现保持宽高比

以实现宽高比为 11:9 为例。宽高比11:9，则高为宽的0.8181(=9/1