css小技巧

作者 新城 日期 2017-09-26
css
css小技巧

CSS 黑魔法小技巧

1.使用css的content属性attr抓取资料
//需求 鼠标悬停的时候出现文字提示 如下图所示：

1
2
3
<div data-msg="Open this file in Github Desktop">
``hover
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div{
    width:100px;
    border:1px solid red;
    position:relative;
}
div:hover:after{
    content:attr(data-msg);
    position:absolute;
    font-size: 12px;
    width:200%;
    line-height:30px;
    text-align:center;
    left:0;
    top:25px;
    border:1px solid green;
}

2.使用 :not() 去除导航上不需要的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="nav">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>
li{
list-style:none;
margin-bottom:10px;
display:inline-block;
}

ul > li:not(:last-child)::after {
  content: ",";
}

a, b, c, d, e

3.两端对齐

1
text-align-last: justify;

4.移动web页面支持弹性滚动
在IOS机型中，非body元素的滚动条会非常不流畅，又不想用JS模拟滚动条。

1
2
3
4
5
6
body{
-webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
overflow:auto;
}

JavaScript编程黑科技
匿名函数自执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

取整

1
2
3
var a = ~~2.33
var b= 2.33 | 0
var c= 2.33 >> 0

格式化金钱

1
2
3
var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
console.log(format) // 1,234,567,890