纸月四的博客

通过这样写css，可以直接获取图片高度，而不用等到图片加载出再获得。 position: relative; width: 100%; height: 0; padding-top: 70%; transfrom-origin: top; background-size: cover; 通过 width:100%和 padding-top:70%控制图片的宽高比为10:7，当页面加载时，宽度确定了，高度也就确定了。 图片宽度设置100%，页面加载时会存在高度塌陷的问题，可以使用padding－top来设置

高度塌陷 当子元素浮动时，脱离了文档流，导致父元素高度撑不起来。 这时可以通过在在子元素后面添加内容，并且清楚它的浮动来使其跟在浮动元素的后面，这样就可以撑起父元素的高度了。 子元素加上下面这个 clearfix 类就可以了。 clearfix::after { content: ''; display: block; clear: both; } 相邻元素的外边距重叠 子元素与父元素，当给子元素设置 margin-top 时，子元素会与父元素一起向下移动，解决方法时使两个元素外边距不重叠