一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比
的值时,无论是left/right,还是top/bottom
,都是以父元素的width
为参照物的!
也许你会说,left/right以父元素的width
为参照物好理解,但是top/bottom
为什么也是以父元素的width
为参照物的呢?网上众说纷纭,关键还是看W3C的规范:
利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片。如果是用图片撑开div的话,那么在图片未加载出来时,整个页面的布局就会发生变化。即使图片加载速度很快,容器在图片加载前后都会有一个变型的过程,也就是俗称的“闪烁”,而如果图片加载不出来,整体布局就更是难看了。
现在,利用margin/padding的百分比值。就可以做到不靠图片本身就能把容器的高度撑开
div{ width:100% height:0 padding-top:100% position:relative background:rgba(7,17,27,.4) } div img{ position:absolute width:100% top:0 }
盒子模型如下:
从盒子模型可以看出,虽然容器的内容高度为0,但由于有了跟内容宽度一致的padding,因此整体视觉效果上像是被撑开了;
后记,当然还有其他的方案也能实现宽高自适应,例如css3新推出的长度单位vw。。。。
时间: 2024-07-29 22:34:42