CSS-笔记

1px像素问题在手机端，设置1px像素时，有时候看起来比一个像素粗

.a::after{ 
    content: ''; 
    display: block;
     width: 100%;
     height: 1px;
     background: #333;
     position: absolute;
    left: 0;
    bottom: 0; 
    transform: scaleY(0.5) 
}

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

上下拉动滚动条时卡顿、滚动很慢 Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling

body{
    -webkit-overflow-scrolling:touch; 
    overflow-scrolling:touch;
}

长时间按住页面出现闪退情况

element{-webkit-touch-callout:none;}

去掉iphone、ipad 输入框内阴影

element{ -webkit-appearance:none;}

ios和android下触摸元素时出现半透明灰色遮罩设置alpha值为0就可以去除本透明灰色遮罩，备注：transparent的属性值在android下无效。

element{ -webkit-tap-highlight-color:rgba(255,255,255,0);}

active兼容处理即伪类：active失效方法一： body 添加 ontouchstart 方法二：js给document绑定touchstart或touchend事件

document.addEventListentener('touchstart',function(){
    false;
}

Android手机圆角失效BUG background-clip:padding-box;
移动端clcik延时问题不用click事件，改用自定义事件** tap** 或者引入 **fastclick库 **解决建议：移动端尽量使用touch代替click事件
响应式图片在移动端中，图片的处理应该是很谨慎的，假设有一张图片本身的尺寸是X宽，设置和包裹它的div一样宽，如果是div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片被拉伸失真

img{ max-width: 100%; display: block; margin: 0 auto; }

常用mate标签设置
** **** 设置页面是否已全屏模式运行显示 <meta name="format-detection"content="telephone=no"> 设置是否自动识别电话号码，no为不识别 ** ** 设置页面视口区域为浏览器可见区域 user-scalable 为no:禁止缩放 **设置缓存每次刷新会使用缓存而不是去服务器发送请求浏览器兼容模式清楚iPhone 默认工具栏和菜单栏
H5提供的自动拨号功能

<a href="tel:123456789,1034">123456789 转 1034</a>

禁止复制，选中文本（PC，H5）

element {
    -webkit-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}

14.双行文字溢出显示省略号

word-break: break-all;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

15.背景图模糊

<div class="parent">
<img src="111.png" width="100%" height="100%"/>    
</div>

.parent{
	 position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .6;
    -webkit-filter: blur(20px);
    filter: blur(20px);
}

编辑

#前端 #css

上次更新: 3/10/2022, 3:57:03 AM