常用css样式

Posted on   |   In   |  

本文将介绍一下，工作中常用的 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