APP落地页开发中的一些小经验~
在开发日常落地页的时候,每当碰到一些很酷炫的宣传图用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" />
最新文章
- 经典的Java基础面试题集锦
- windows内核需要注意的
- The working copy at &#39;xxx&#39; is too old 错误解决
- PL/SQL:使用pragma restrict_references限制包权限
- OSCache缓存框架介绍
- [置顶] Windows Phone后台音乐详解一
- 初识 ActiveMQ
- http://codeforces.com/problemset/problem/545/D
- Mysql 学习之EXPLAIN作用
- HTML词法和语法
- VUE iview date-picker取时间范围...
- oralce 的安装以及plsql的配置的html连接
- 莫烦scikit-learn学习自修第五天【训练模型的属性】
- Unable to find utility "instruments", not a developer tool or in PATH
- 数组排序自定义comparator()
- 【python】脚本连续发送QQ邮件
- BZOJ5010 FJOI2017矩阵填数(容斥原理)
- 三种迭代Java ArrayList方法及比较
- 用Visual C#来清空回收站(2)
- 【软件安装】Xshell + XFtp
热门文章
- Android界面布局基本属性
- Android样式的开发:drawable汇总篇
- 清除SQL数据库的日志
- mysql中替换字符串(正则) 模糊
- codeforces C. Diverse Permutation(构造)
- 后端码农谈前端(HTML篇)第一课:HTML概述
- UML系列01之 UML和绘图工具Visio介绍
- java io系列06之 序列化总结(Serializable 和 Externalizable)
- EXCEL 数字+E+数字 自动识别为指数形式的解决办法
- TOGAF:企业信息化复杂吗?