liyinSakura

稻花香里说丰年，听取人生经验。

常用css片段

• 标签: css

部分常用代码参考 https://github.com/jsfront/src/blob/master/css.md

此篇只是收录部分，方便工作时查阅使用

IE盒子模型设置

1
2
3
4
5
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

网上查到的flex兼容，但是测试好像没有起作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */
 }
.flex1 {
    -webkit-flex: 1;        /* Chrome */
    -ms-flex: 1             /* IE 10 */
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;       /* OLD - Firefox 19- */
}

项目中用的flex兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-item1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 210px;
  flex: 0 0 210px;
}

常用清除浮动的CSS代码

1
2
3
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}

或者

1
2
.clearfix{*zoom: 1;}
.clearfix:after{clear:both;display:table;content:"";}

再或者

1
.clearfix{overflow:hidden;_zoom:1;}

最小高度兼容代码

1
.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}

单行文字过多后显示省略号

1
.ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

多行文字过多后显示省略号

1
2
3
4
5
6
.ellmore {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}/*适用手机端与webkit浏览器*/

rem布局手机端，以640px为宽的设计图为标准时html根字体设置

1
2
3
4
5
6
7
8
9
10
11
12
13
@media screen and (min-width:320px){html{font-size:50px;}
}
@media screen and (min-width:360px){html{font-size:56px;}
}
@media screen and (min-width:400px){html{font-size:63px;}
}
@media screen and (min-width:440px){html{font-size:69px;}
}
@media screen and (min-width:480px){html{font-size:75px;}
}
@media screen and (min-width:640px){html{font-size:100px;}
}
html{font-size:-webkit-calc(100vw/6.4);font-size:calc(100vw/6.4);}

css绘制三角形

1
2
3
4
5
6
7
8
9
10
11
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; }
.triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669; }
.triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-updown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669;position:relative;margin-bottom:50px}
.triangle-updown:after {content:" "; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669;position:absolute;top:50px;left:-50px;}
.triangle-topleft { width: 0; height: 0; border-top: 100px solid #669; border-right: 100px solid transparent; }
.triangle-topright { width: 0; height: 0; border-top: 100px solid #669; border-left: 100px solid transparent; }
.triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #669; border-right: 100px solid transparent; }
.triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #669; border-left: 100px solid transparent; }

尖括号边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.w-arrow:before, .w-arrow:after{
  width:0px;
  height:0px;
  border:transparent solid;
  position:absolute;
  bottom:100%;
  content:"";
}
.w-arrow:before{
  right: 0;
  border-width:25px;
  border-left-color: #fff;
  top: 0;
}
.w-arrow {
  padding-right: 126px;
}
.w-arrow:after{
  border-width:25px;
  border-left-color: #f6f6f6;
  top: 0;
  right: 5px;
}

向下的尖边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.w-arrow:before, .w-arrow:after{
    width: 0px;
    height: 0px;
    border: transparent solid;
    position: absolute;
    top: 100%;
    content: "";
}
.w-arrow:before{
    left: 100px;
    border-width: 15px;
    border-top-color: #622223;
    bottom: 30px;
}
.w-arrow:after{
    border-width: 14px;
    border-top-color: #fff;
    bottom: 32px;
    left: 101px;
}

美化chekbox

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.magic-checkbox,.magic-radio {
  position: absolute;
  display: none
}
.magic-checkbox[disabled],.magic-radio[disabled] {
  cursor: not-allowed
}
.magic-checkbox+label,.magic-radio+label {
  position: relative;
  display: block;
  padding-left: 30px;
  vertical-align: middle;
  cursor: pointer
}
.magic-checkbox+label:hover:before,.magic-radio+label:hover:before {
  animation-duration: .4s;
  animation-fill-mode: both;
  animation-name: hover-color
}
.magic-checkbox+label:before,.magic-radio+label:before {
  position: absolute;
  top: .7rem;
  left: 7px;
  display: inline-block;
  width: .3rem;
  height: .3rem;
  border: 1px solid silver;
  content: ''
}
.magic-checkbox+label:after,.magic-radio+label:after {
  position: absolute;
  display: none;
  content: ''
}
.magic-checkbox[disabled]+label,.magic-radio[disabled]+label {
  color: #e4e4e4;
  cursor: not-allowed
}
.magic-checkbox[disabled]+label:after,.magic-checkbox[disabled]+label:before,.magic-checkbox[disabled]+label:hover,.magic-radio[disabled]+label:after,.magic-radio[disabled]+label:before,.magic-radio[disabled]+label:hover {
  cursor: not-allowed
}
.magic-checkbox[disabled]+label:hover:before,.magic-radio[disabled]+label:hover:before {
  border: 1px solid #e4e4e4;
  animation-name: none
}
.magic-checkbox[disabled]+label:before,.magic-radio[disabled]+label:before {
  border-color: #e4e4e4
}
.magic-checkbox:checked+label:before,.magic-radio:checked+label:before {
  animation-name: none
}
.magic-checkbox:checked+label:after,.magic-radio:checked+label:after {
  display: block
}
.magic-radio+label:before {
  border-radius: 50%
}
.magic-radio+label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20bf55
}
.magic-radio:checked+label:before {
  border: 1px solid #20bf55
}
.magic-radio:checked[disabled]+label:before {
  border: 1px solid #c9e2f9
}
.magic-radio:checked[disabled]+label:after {
  background: #c9e2f9
}
.magic-checkbox+label:before {
  border-radius: 50%
}
.magic-checkbox+label:after {
  top: .73rem;
  left: 7px;
  box-sizing: border-box;
  width: .3rem;
  height: .3rem;
  background: url(../images/tuoyuan1.png) no-repeat center;
  background-size: .3rem
}
.magic-checkbox:checked+label:before {
  border: #20bf55
}
.magic-checkbox:checked[disabled]+label:before {
  border: #c9e2f9;
  background: #c9e2f9
}