哈喽,点进来的朋友们好鸭~
工作中本人喜欢把一些没接触的记录在笔记中，翻看了一下超多耶！
所以萌生把笔记整理一下慢慢的发布到简书记录，让更多人看到！这是第一版！！！！
有不对的地方欢迎大神们及时指出
1、css3背景图片自适应大小
background-position:50% 23%;
background-size:contain;
background-repeat:no-repeat;
max-width: 62%;
2、适应手机尺寸(样式媒体查询)
@media screen and(min-width:1200px) {}
@media screen and(min-width:960px)and(max-width:1199px)
3、移动端为手机添加视口
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
4、内容与缓存
<html manifest="/mobile.manifest">
5、媒体查询
<link rel="stylesheet" href="css/theSecond2.css" media="(min-width:500px) and (max-width:899px)">
6、去除hr阴影
border-top:1px solid #D2D2D2;
border-left:none;
border-right:none;
border-bottom:none;
7、表单去除默认阴影
textarea::-webkit-input-placeholder {color: #00F0;}
input,textarea,select { -webkit-appearance: none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
input,button,textarea{outline:none;border:0;vertical-align:middle;border:0;font-family:Microsoft YaHei}
input[type="submit"],input[type="reset"],input[type="button"],button {-webkit-appearance:none;border-radius:0}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
textarea{resize:none}
8、超出预设宽度的文字段'...'截断
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
9、样式的优先级最高
.a{color:#fff !important;}＞.a{color:#fff;}
10、垂直线
<hr size="300" width="1">
11、css布局时，为什么fixed定位元素设置width:100%会超出父容器的右侧
父元素加上3d转换就可以了，比如：transform: scale3d(1, 1, 1);
12、绝对定位居中显示
position: absolute;
top: 90px;
left: 50%; //水平居中50%，同理垂直居中。
margin-left: -321px; //居中重要属性，整个盒子的宽度除以2为数值
13、移动端的meta标签
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
禁止用户缩放页面，user-scalable=yes"表示可以缩放页面
<meta name="format-detection" content="telephone=no" />
告诉设备不要将页面中的数字识别为电话号码
14、输入框获取焦点页面放大解决方法
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
15、文字不继承背景的透明度
background:rgba(0,0,0,0.3)//最后一个值是透明度
16、div的heigh为auto时背景图不显示
.wrap:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
17、去除input点击时的蓝色聚焦框
.input{outline:none;}
18、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
兼容IE6-9的写法：onselectstart="return false;" unselectable="on"
19、消除transition闪屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
20、对于网站字体设置
字体设置可根据需求设置
移动端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
移动和pc端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;
网友评论