【黑马程序员】移动端css常用小结.docxVIP

【黑马程序员】 移动端 CSS 常用小 结 1、Meta标签 [HTML]纯文本查看 复制代码 ? <meta name="viewport" content="width=device-width, 1initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持 1:1，文档的 最大宽度比例是 1.0，不允许用户点击屏幕放大浏览。 2、禁止 iOS 自动识别电话 和 Android 自动识别邮 箱 [HTML]纯文本查看 复制代码 ? 1<meta name="format-detection" content="telephone=no"/> 2<meta name="format-detection" content= “email=no"/> 3、禁止文本 选择 [CSS]纯文本查看 复制代码 ? 1- webkit-user-select:none 4、屏蔽输入框阴影，去掉按 钮默认样式 [CSS]纯文本查看 复制代码 ? 1- webkit-appearance:none 5、border-box 想要设置一个宽度 100%的元素，又要 设置元素固定的 padding-或leftpadding-，right还有 边框，就会出 现水平滚动条，可以用 box-sizing来解决。 [CSS] 纯文本查看 复制代码 ? 黑马程序员成都中心 编著 1*, *:before, *:after { -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; 7} 6、css3多行文本 换行 [CSS] 纯文本查看 复制代码 ? 1overflow : hidden; 2text-overflow: ellipsis; 3display: -webkit-box; 4-webkit-line-clamp: 2; 5-webkit-box-orient: vertical; 7、清除浮动 [CSS] 纯文本查看 复制代码 ? 01.clearfix:after { content: "."; display: block; 04 height: 0; 05 visibility: hidden; 06 clear: both; 07} 08.clearfix { 09 *zoom: 1; 10} 8、表格内容自 动换行 [CSS] 纯文本查看 复制代码 ? table-layout :fixed;word-break: 1break-all;word-wrap :break-word; 9、iOS快速回弹 在 iOS上如果想 让一个元素 拥有像 Native的滚动效果，可以 这样写 [CSS] 纯文本查看 复制代码 ? 黑马程序员成都中心 编著 1overflow-y: scroll; 2-webkit-overflow-scrolling: touch; 10、css3元素居中 [CSS] 纯文本查看 复制代码 ? position: absolute; 1top: 50%; 2left: 50%; 3-ms-transform: translate3d(-50%,-50%,0);/*IE9*/ 4-moz-transform: translate3d(-50%,-50%,0);/*Firefox*/ 5 -webkit-transform: translate3d(-50%,-50%,0);/*Safari and 6 Chrome*/ 7-o-transform: translate3d(-50%,-50%,0);/*Opera*/ 8transform: translate3d(-50%,-50%,0); [CSS] 纯文本查看 复制代码 ? position: absolute; 1top: 50%; 2left: 50%; 3-ms-transform: translate(-50%,-50%);/*IE9*/ 4-moz-transform: translate(-50%,-50%);/*Firefox*/ 5 -webkit-transform:translate(-50%,-50%);/*Safari and 6 Chrome*/ 7-o-transform: translate(-50%,-50%);/*Opera*/ 8transfo