[网页前台设计] html小知识点梳理

禁止 iOS 识别长串数字为电话

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

不让 Android 手机识别邮箱

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

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

手机端打开时 页面是否缩放

不进行缩放

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

进行缩放

无需添加上述标签即可

html span inline宽度不起作用

设置 display: inline-block

谷歌浏览器F12改变网页大小时 元素被挤到下一行

 给父元素 添加  min-width 可以改善这个问题

元素或者文本居中的方式

水平居中	兄弟元素对齐 vertical-align:top;
	让元素水平居中，使用 text-align: center;
	让图片水平居中，父元素使用 text-align: center;
	块级元素水平居中，使用 margin-right: auto; margin-left: auto;
垂直居中	单行文本的垂直居中，让 line-height 和 height 相等。
	不确定高度的一段文本竖直居中，这里不适用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.
	确定高度的块级元素竖直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值为自身高度的值的一半的负值);
	绝对定位实现水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
	平移实现水平垂直居中法：通过使用 transform: translate(-50%,-50%); 添加厂商前缀 -webkit- 兼容 Safari 和 Chrome
	让浏览器计算子元素的宽高并让其水平垂直居中：通过使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四个方向上的值缺一不可。

一行文字 和两行文字 省略并显示...

//一行     white-space: nowrap;     text-overflow: ellipsis;     overflow: hidden;     word-break: break-all; //两行  text-overflow: -o-ellipsis-lastline;   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-line-clamp: 2;   line-clamp: 2;   -webkit-box-orient: vertical;

html 换行导致有空格的问题

最好的方式 直接使用 flota:left  浮动来消除

position 定位让子控件居中

#indicator{
			width: 88px;           //最终宽度
			text-align: center;    //子控件对齐方式
			position:absolute;     //基于父控件的相对定位
			bottom: 20px;          //上下控制 top 和 bottom均可以定位
            left: 0px;             //左边0
            right: 0px;            //右边0
            margin: auto;          //margin自动
}

两个十分有用的属性

contenteditable="true"     //Div变成文本框
placeholder=“预展示文字”

Input框添加 disabled="disabled"  手机端显示透明问题

/*修复手机端input框显示问题*/
input[disabled]{
	filter: alpha(opacity=100);
	opacity:1;
}

input框输入时前方插入空隙

text-indent:6px;

解决手机端滑动卡顿问题

<meta name="apple-mobile-web-app-capable" content="yes" />

video 标签 duration 取值永远为NaN的情况

确认视频文件是否是mp4 结尾   mkv转mp4的文件依然格式是不正确的  一个大坑

电脑端手机端制作 百分比适用问题

电脑端  若只是单页面可完全显示 宽度高度都可以设置为100% 方便其他浏览器适配 若是长内容页 则 宽度100% 高度按em匹配

手机端  单页面完全显示也依然将高度按em设置  高度不可百分比  因为不同的手机端高度不同 同时需要使用viewport 和禁止缩放

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

手机端上下滑动顿住问题

body标签中不能添加 overflow:hidden  以及 overflow-x:hidden  会导致上下滑动顿住

子元素添加margin-top  父元素下落的问题

#给父元素添加padding 来解决
padding-top: 1px;