常用css样式

本文将介绍一下,工作中常用的 css 样式, 将会不断的添加丰富。

清除浮动

1
2
3
4
5
6
7
8
.fn-clear::after {
display: block;
font-size: 0;
height: 0;
visibility: hidden;
clear: both;
content: '';
}

雪碧图使用

1
2
3
background: url('/static/classic/purchase/resource/add-sub.png'); //获取图片
background-size: 200% 100%; //如果是 |图1|图2| 则 编写原图尺寸 200% 100%
background-position: 0; //0 显示用第一张图为背景,100%用第二张图为背景

强制换行不, 超出显示…

1
2
3
4
5
6
.no-wrap{
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}

强制换行

1
2
3
4
.wrap{
word-break:break-all;
word-wrap:break-word;
}

撤销所有元素的浏览器自带样式 及设置字体,

一下代码一般放在html文件头部,删除某些元素浏览器自带样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB","helvetica neue",helvetica,arial,Sans-serif,"Hiragino Sans GB","Hiragino Sans GB W3","SimHei";
margin: 0px;
background-color: #f5f5f5;
position: relative;
}
html,section,h1,p,input,label,textarea,span,ul,li,dl,dt,dd,button,h2 {
appearance: none;
-webkit-appearance: none;
margin:0; padding:0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
header, section, footer, aside, nav, article, figure {
display: block; /*h5语义表情*/
}
h2{
font-weight: normal;
}
button,textarea {
outline:0px none;border:0 none;background: transparent;
}
ul li {
list-style: none;
}

div内容居中, 采用表格模拟法

将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。

1
2
3
4
5
6
<div class="wrapper">
<div class="cell">
<p>测试垂直居中效果测试垂直居中效果</p>
<p>测试垂直居中效果测试垂直居中效果</p>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
.wrapper {
display:table;
width:300px;
height:300px;
background:#000;
margin:0 auto;
color:red;
}
.cell{
display:table-cell;
vertical-align:middle;
}

css 三角形实现

原理通过设置 border 来实现

1
2
3
<div class="arrowed">
<div class="arrow-3 down"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.arrowed {
display: inline-block;
position: relative;
}
.arrowed .arrow-3 {
position: absolute;
top: -9px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 0px; width: 0px; //高度宽度都为0
border: 6px solid; //边框有宽度
border-color: //核心
mediumseagreen
mediumseagreen
transparent
transparent;
transform: rotate(45deg);
}
.arrowed .down {
top: -15px;
transform: rotate(135deg); //旋转
}

更多箭头实现: arrow
如下图所示
arrow

radio / checkbox 样式替换

原理: input[type=’checkbox’]:checked+label

1
2
3
4
5
6
7
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrap {
width: 500px;
background-color: #EEE;
border: 2px solid #DEF;
}
/* 隐藏所有checkbox */
input[type='checkbox'] {
display: none;
}
label {
display: inline-block;
width: 60px;
height: 60px;
position: relative;
background: url(//www.chitanda.me/images/blank.png);
background-position: 0 0px;
-webkit-transition: background 0.5s linear;
}
/* 利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果(就是点击后那个勾号的效果) */
/*因为label本身是没有点击后被选中的状态的,checkbox被隐藏后,这个状态只能手动模拟*/
input[type='checkbox']:checked+label {
background-position: 0 -60px;
}

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定位失效

fix-iso
原因:软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。
解决思路: 不让整个页面滚动,将需要滚动的元素设置为 overflow-y: auto; 详细参见:fix-iso