小知识点整理

标签：absolute   relative   position   知识点   display   

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（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。）

小知识点整理

标签：absolute   relative   position   知识点   display   

原文地址：http://ppxxll.blog.51cto.com/10549080/1683926