本文将介绍一下,工作中常用的 css 样式, 将会不断的添加丰富。
清除浮动
12345678 .fn-clear::after {display: block;font-size: 0;height: 0;visibility: hidden;clear: both;content: '';}
雪碧图使用
|
|
强制换行不, 超出显示…
|
|
强制换行
|
|
撤销所有元素的浏览器自带样式 及设置字体,
一下代码一般放在html文件头部,删除某些元素浏览器自带样式
|
|
div内容居中, 采用表格模拟法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
123456 <div class="wrapper"><div class="cell"><p>测试垂直居中效果测试垂直居中效果</p><p>测试垂直居中效果测试垂直居中效果</p></div></div>
|
|
css 三角形实现
原理通过设置 border 来实现
123 <div class="arrowed"><div class="arrow-3 down"></div></div>
|
|
更多箭头实现: arrow
如下图所示
radio / checkbox 样式替换
原理: input[type=’checkbox’]:checked+label
1234567 <div class="wrap"><!-- input id 属性必须有,这个是label进行元素匹配所必需的,每个input的id和label的“for”属性对应同一字符串 --><input type="checkbox" id="checkbox01" /><label for="checkbox01"></label><input type="checkbox" id="checkbox02" /><label for="checkbox02"></label></div>
|
|
IOS h5 页面滑动卡顿问题
IOS端的h5页面中使用了 fixed or absolute 定位时,会出现页面滑动卡顿的现象,
如果要恢复原有的弹性滚动,需要添加 webkit 私有属性: -webkit-overflow-scrolling: touch; //let’s it scroll lazy 就能恢复流畅滚动
例如: .wrap { position: fixed; -webkit-overflow-scrolling: touch; }
dom.style.WebkitOverflowScrolling = ‘touch’
IOS 键盘唤起后fix定位失效
原因:软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。
解决思路: 不让整个页面滚动,将需要滚动的元素设置为 overflow-y: auto; 详细参见:fix-iso