Small tips of APP H5 page

在开发日常落地页的时候,每当碰到一些很酷炫的宣传图用css实现很复杂且耗时的时候,一般采取切图然后将其放在页面中,在这个过程中发现<img/>标签中图片下方会有一行小空白,影响了与后一部分内容的衔接。

经查其原因是内联元素<img/>的默认vertical-align是baseline,可从以下几种方式解决这个问题:

1、设置此img元素的vertical-align为bottom;

2、设置此img元素的display:block;

3、设置图片的浮动属性,img {float:left;}。如果要实现图文混排,这种方法是很好的选择。

4、设置此img元素的父元素的行高为较小值,或者设置其font-size:0,不过这种方式会影响div内的其他inline元素,不推荐。

还有就是清楚浮动的常用的几种方法,网上教程五花八门很多很杂,整理了几种常见的兼容性好的方法留待以后参考:

1、添加新元素,应用clear:both;

2、使用伪类元素作用于浮动元素的父亲,这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

3、父级div定义 overflow: auto,使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好。

 

最后是关于meta标签的一些用法:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width:设置viewport的宽度为一个正整数或字符串'device=width',device-width 为设备的宽度,

height:设置viewport的高度,一般设置了宽度会自动解析出高度,可以不用设置

initial-sacle:默认缩放比例,为一个数字,可以带小数

minimum-scale:允许用户最小缩放比例,为一个数字,可以带小数

maximum-scale:允许用户最大缩放比例,为一个数字,可以带小数

user-scalable:是否允许手动缩放

针对IOS的Safari顶端状态条的演示(可选default/black/black-translucent)

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="telephone=no,email=no" />

posted @ 2016-12-26 16:07  keang  阅读(274)  评论(0编辑  收藏  举报