小知识点整理

1、img一般要设置display:block,解决空白问题;

2、移动端H5,图片自适应问题,宽与高,用大值除以小值,获得的值设置父元素DIV的padding-top;

 <div class="topic"><img src="images/topic.jpg" alt="资源开放说明与进驻登记"></div>

.topic{position:relative;padding-top:177.5%;background-color:#891f35;}
    .topic img{position:absolute;left:0;top:0;width:100%;height:100%;}

上面是为了图片还没加载出来时,先占位,而且设置一个跟图片差不多的背景颜色。记得图片的alt属性还是写上较好;

3、移动端H5,width与heigh,font-size的设定,参考设计图的数字/2;切图时切偶数值;

<div class="title">一站式满足家长求助、求知、社交需求</div>

.platform .title{margin:0 auto 1em auto;width:247px;height:31px;background:url(images/title-bg.png) 0 0 no-repeat;background-size:contain;
        font-size:13px;text-align:center;line-height:31px;
    }

设置DIV的宽高为背景图片的一半,使用background-size:contain(把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。)


你可能感兴趣的:(display,知识点,absolute,position,relative)