-移动端 CSS 常用小结【黑马web前端】

更新时间:2019年07月26日 10时54分09秒来源:黑马程序员论坛

1、Meta 标签

[HTML] 纯文本查看 复制代码

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

移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。
2、禁止 iOS 自动识别电话和 Android 自动识别邮箱

[HTML] 纯文本查看 复制代码

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

3、禁止文本选择

[CSS] 纯文本查看 复制代码

-webkit-user-select:none

4、屏蔽输入框阴影，去掉按钮默认样式

[CSS] 纯文本查看 复制代码

-webkit-appearance:none

5、border-box
想要设置一个宽度100%的元素，又要设置元素固定的 padding-left 或 padding-right，还有边框，就会出现水平滚动条，可以用 box-sizing 来解决。

[CSS] 纯文本查看 复制代码

*, *: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;  
}

6、css3 多行文本换行

[CSS] 纯文本查看 复制代码

overflow : hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;

7、清除浮动

[CSS] 纯文本查看 复制代码

.clearfix:after {  
  content: ".";  
  display: block;  
  height: 0;  
  visibility: hidden;  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}

8、表格内容自动换行

[CSS] 纯文本查看 复制代码

table-layout :fixed;word-break: break-all;word-wrap :break-word;

9、iOS 快速回弹
在 iOS 上如果想让一个元素拥有像 Native 的滚动效果，可以这样写

[CSS] 纯文本查看 复制代码

overflow-y: scroll;  
-webkit-overflow-scrolling: touch;

10、css3 元素居中

[CSS] 纯文本查看 复制代码

position: absolute;  
top: 50%;  
left: 50%;  
-ms-transform: translate3d(-50%,-50%,0);/*IE9*/  
-moz-transform: translate3d(-50%,-50%,0);/*Firefox*/  
-webkit-transform: translate3d(-50%,-50%,0);/*Safari and Chrome*/  
-o-transform: translate3d(-50%,-50%,0);/*Opera*/  
transform: translate3d(-50%,-50%,0);

[CSS] 纯文本查看 复制代码

position: absolute;  
top: 50%;  
left: 50%;  
-ms-transform: translate(-50%,-50%);/*IE9*/  
-moz-transform: translate(-50%,-50%);/*Firefox*/  
-webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/  
-o-transform: translate(-50%,-50%);/*Opera*/  
transform: translate(-50%,-50%);

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

-移动端 CSS 常用小结【黑马web前端】

相关阅读