一些有用的技能点

最新推荐文章于 2024-08-14 11:20:14 发布

weixin_33713707

最新推荐文章于 2024-08-14 11:20:14 发布

阅读量74

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/langzi1989/p/5965815.html

版权

通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器点击按钮或超链接之类的默认灰色背景色
设置css属性 -webkit-user-select:none; 控制用户不可选择文字
区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

单行、多行溢出省略

/* 单行省略 */
.ellipsis {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行省略 */ .ellipsis-2l { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 数值代表显示几行 */ -webkit-box-orient: vertical; }

<!-- html结构 -->
<body>
<div class="wrap"> <div class="box"></div> </div> </body> /* css样式 */ /* (1) 模仿单行文字居中的方式 */ .wrap { width: 200px; height: 80px; line-height: 80px; } .box { display: inline-block; vertical-align:middle; } /* (2) 已知宽高，通过position:absolute; */ .wrap { width: 200px; height: 200px; position: relative; } .box { width: 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; } /* (3) 未知宽高，通过css3属性 transfrom */ .wrap { width: 200px; height: 200px; position: relative; } .box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* (4) 通过flex布局 */ <!-- html结构 --> <body> <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> </body> /* css样式 */ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* 水平居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

retina屏幕实现真正的1px边框

<!-- html结构 -->
<body>
<div class="box retina-border rt-bd-all"></div> </body> /* css样式 */ .box { width: 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; } /* 去掉元素原有的边框 */ .retina-border { position: relative; border: none; } /* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/ .retina-border:after { content: ''; display: block; width: 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); } .rt-bd-all:after { border-width: 1px; } /* 如果只是想设置一条边框，可以这样改一下，以此类推 */ <!-- html结构 --> <body> <div class="box retina-border rt-bd-b"></div> </body> /* css样式 */ .tr-bd-b:after { border-bottom-width: 1px; } .tr-bd-t:after { border-top-width: 1px; } .tr-bd-l:after { border-left-width: 1px; } .tr-bd-r:after { border-right-width: 1px; }

转载于:https://www.cnblogs.com/langzi1989/p/5965815.html

weixin_33713707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些有用的技能点

通过设置css属性-webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器点击按钮或超链接之类的默认灰色背景色设置css属性-webkit-user-select:none;控制用户不可选择文字区域性overflow: scroll | auto滚动时使用原生效果：-webk...
复制链接

扫一扫