CSS reset文件

发表于 | 分类于 | 浏览

css reset文件

为了复用一些css属性，最近花了点时间把一些常用的总结一下
不多说，上代码

代码如下：

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
*{
    margin: 0;
    padding: 0;
}
html{ 
    overflow-y: scroll; 
}
a{
    text-decoration: none;
}
a:active,a:hover,a:link,a:visited{
    text-decoration: underline;
}
input,button{
    border: none;
    outline: none;
}
textarea{
    outline: none;
}
li,ol{
    list-style: none;
}
i {
    font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* 多行文本域的控制 */
textarea{
    resize: none;                   /*用户无法调整元素的尺寸*/
    /*resize: vertical;*/           /*用户可调整元素的高度*/
    /*resize: horizontal;*/         /*用户可调整元素的宽度*/
}
/* 文字对齐方式 */
.text_ce{
    text-align: center
}
.text_rt{
    text-align: right
}
.text_lf{
    text-align: left
}
/* 浮动 */
.fl{
    float: left;
}
.fr{
    float: right;
}
/* 清除浮动 */
.clearfix:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* 弹性盒子 */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flex_v{
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex2{
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}
.flex3{
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}
.flex_hc{
    -webkit-justify-content: center;
    justify-content: center;
}
.flex_hm{
    display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
}
.flex_ld{
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_k{
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
/* 字体超出省略号 */
/* 一行文字 */
.text_ellipsis{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
}
/* 多行文字   谷歌才会出现的效果，为确保其他浏览器不出现样式问题，height:xxxpx  */
.moretext_ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
}

欢迎补充

-------------本文结束感谢您的阅读-------------