1. css的引入顺序可能改变页面的显示效果,甚至可能引起页面乱码。
2. 当所有文件引入没问题且路径没错误但字体图标不显示时,可引入网上的路径,href='http.....'
3. type = checkbox时复选框不显示,解决方法:加appearance:checkbox!important;
4. textarea在页面上可以随着拖动改变大小,解决办法:css中加:resize:none;
5. Opacity属性在ie8不兼容解决:添加css属性:filter:Alpha(Opacity=50);//100为不透明,0为全透明,所以不能用animate函数添加filter的渐变效果;
6. 无论几行文字都能水平垂直居中:.middle-box{display:table;height:xxpx;}.middle-inner{display:table-cell;text-align:center;vertical-align:middle;}如:<div class=”middle-box”><div class=”middle-inner”><p>666666</p></div></div>
7. 文字之间的距离:如lable的两个字与四个字上下对齐,给两个字的加:letter-spacing:1em;
8. line-height与高度相等但文字没有垂直居中时,在css中加上overflow:hidden;是为了防止内容超出容器或产生自动换行。
9. 在iPhone与iPad上页面展示中有电话号码时会被自动解析成蓝色,解决办法:加上<meta name=”format-detection” content=”telephone=no”>
10. 在iphone手机中若在头部或底部fixed定位,会出现掉落,当触摸屏幕时又恢复正常位置,解决方法:给其他同级元素也加上fixed定位
11. Ie8不兼容媒介查询,解决办法:在所有css引入后面引入respond.min.js文件。
12. ss3新特性:黏性定位position:sticky;
13. 当元素子元素没有包含在父元素里面时或父元素高度为0时,给父级元素加属性:overflow:hidden;
14. 想用css去除table单元格间隙时,table{border-collapse:collapse;}
15. Input框点击时会出现蓝边,解决办法:给css加border:0;outline:none;
16. overflow:hidden;失效时,给溢出元素的某祖先元素加:position:relative;
17. select框禁止选择,方法:disabled="disabled"。如:<select name="" disabled="disabled">
18. 有手机号码时可以用a标签写,点击可拨打。写法:<a href=”tel:15010551619”>15010551619</a>
19. Table的cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0};
20. input框获取焦点时,弹出键盘是数字键盘的方法:把input的type设置为number
21. css使select内的文字居右的方法:direction: rtl;
22. 垂直居中可以使用-webkit-transform:translateY(-50%)。
23. css文字超出显示省略号:容器宽度确定+overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
24. 带边框的小三角实现方法:
(1)、用border写:height:0;width:0;border:6px solid transparent;border-left-color:red;
(2)、用小正方形写:width:6px;height:6px;border:1px solid transparent;transform: rotate(45deg);border-bottom-color: red;border-left-color: red;这种方法是把小正方形旋转,然后把另一半用别的东西遮住或者直接看不出来;