一.css部分
清除浮动
清除盒子浮动方式1:在第一个盒子的css最后使用伪元素选择器:
.clearfix:after{
/设置添加的子元素内容为空/
content:"";
/设置添加的是块级元素/
display:block;
/设置元素的高度为0,不占用空间/
height:0;
/设置元素为不可见/
visibility:hidden;
/设置清除浮动/
clear:both;
}
.clearfix{
*zoom:1;
}
清除盒子浮动方式2:
.clearfix{
overflow:hidden;
zoom:1;
}
/overflow可以裁剪超出范围的内容,也可以用于清除浮动,也可以用于防止嵌套盒子的被顶开*/
1.切图时要保证图片大小一致，不然会导致样式错乱。
链接：http://m.jinzhuedu.org/mo_ztlist/duihua.html
2.meta标签
移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页
放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了
（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。
关于 initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5
IOS中safari允许全屏浏览
IOS中Safari顶端状态条样式
忽略将数字变为电话号码
忽略识别email
问题：绝对定位如何让元素居中
解决方法：
方法一：（不能微调）
父级：position:relative;
子元素：
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
代码例子：
https://jsbin.com/betijaloke/2/edit?html,css,js,output
方法二：（可微调）
position:absolute;
top:50%; left:50%;
margin-top:-100px; /元素高度的一半/
margin-left:-100px; /元素宽度的一半/
代码例子：http://jsbin.com/dejipitoji/edit?html,css,output
4.去除button在ios上的默认样式
-webkit-appearance: none;
border-radius: 0
5.placeholder元素样式的修改
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
6.不想让按钮touch时有蓝色的边框或半透明灰色遮罩（根据系统而定）
-webkit-tap-highlight-color:rgba(0,0,0,0);
7.在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition、transform或者animation的效果将会非常棒（这一方面IOS比android又要好不少）。
如果用**3d（translate3d）来实现动画，会开启GPU加速，动画会更加流畅，但硬件配置差的安卓用起来会耗很多性能
8.使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有
img{display:block}；
img{vertical-align:top}
也可取其他几个值，视情况而定
其他解决办法 见此
9.关于使用弹性盒子box布局
暂时有三种方案：
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
display:-webkit-flex; // 最新的版本
我暂时使用的是 display:-webkit-box;暂时只有这个的兼容性最好，flex是最好用，还可以如float一样排多个元素时自动换行，只是兼容性还太差，（即使是第一种，在火狐下兼容性也不是很好）
对于第一种常见用法是：
- 1
- 2
- 3
.box {
display: -webkit-box;
-webkit-box-align: center; // 设置里面的元素垂直居中
-webkit-box-pack: center; // 设置水平居中
}
.box .box_flex1 {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
display: block;
width: 0;
}
要想三个li元素平分box的宽度，width:0是关键（在这个坑里陷了好久，直到偶然的一次设置了width：0突然就好了，后来在天猫上也看到了同样的设置width:0）
弹性布局其他详解可见此
- 使用
a标签的话，尽量让a标签block，尽量让用户可点击区域最大化 - 对两个
div使用了transform之后，div下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了，如果遇到这个问题的，详细可以 看这 - 在
iOS中，当你点击比如input准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定，也有比如显示一个新的层，将含有fixed按钮的那一层隐藏的情况等等。
另外一种情况（一般在页面内容很少时iphone5及以上常发生），当输入框弹出时fixed元素挤到输入框上，当输入框消失时，fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在 减去键盘的 高度，需要手动去触发让视窗高度回到正常，然后试了很多方法都没成功，后来的方案是输入框消失时给页面加隐形的很大的padding比如1000px并在30ms后改为正常，具体可看这移动端IOS关于fixed元素的问题
- 禁止用户选中文字
-webkit-user-select:none - 当把
input设为width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性box-sizing:border-box
关于box-sizing:border-box，此属性是把边框的宽度和padding包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行
- 做一个方向箭头比如 “>” 时，可以用一个正方形的
div，设置border:1px 1px 0 0；然后rotate(45deg)，这样就省去了一个图片 -
CSS权重：style是1000，id是100，class是10，普通如li、div和伪类是1，通用如*是0； - 使用
rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用js获取文字line-height再去设置div高度 - 使用
background时，background-position里使用了比如center left后不能再加具体的数值去定位，比如center 10px left（暂时兼容性差）
19.使用rem布局时，由于webkit支持的最小字体大小是12px，所以使用html使用62.5%实际是12px，这样很难计算，我的做法是设置成625%即100px，然后1rem就相当于100px
20.移动端字体使用 font-family: Helvetica,sans-serif;我看这也是天猫使用的
- 在
iphone原生键盘上用keyup统计字符数时，系统不会自动监控你选择文字的事件，比如打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但无法在用户确定自己的输入时监控到keyup（其他事件也一样）判断字符数。 改成input事件就可以了
22.实现毛玻璃效果，透过背景看其他元素模糊，自身元素不模糊。
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
这个效果暂时只有IOS9上的safari可以。
用css3的blur效果的话，是整层元素全部模糊，而透过模糊层看其他的元素不模糊
- 如果需要展示小于
12px的文字，用transform:scale(%);它将元素缩小，但本身应该占的空间并不会变小，所以比如要元素居左对齐的话，还需设置translateX - 在移动端对
input框使用disabled属性，会导致元素里面value值在页面上被隐藏看不见，可以对元素使用css3效果pointer-event:none，意思就是此元素对鼠标事件无效
二、
1.问题：页面的图片被压缩了，清晰度变低。
解决方法：用：background-size:cover;
background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
2.下列两段代码区别：
.popCont .btnClose:hover {
background: url(images/close.png) no-repeat 0 0/2rem; 当前目录下的
}
.popCont .btnClose:hover {
background: url(/images/close.png) no-repeat 0 0/2rem; 根目录下
}
"."--代表目前所在的目录。
".."--代表上一层目录。
"/"--代表根目录。
问题：视频在苹果手机上播放不了。
解决方法：将http改为https