zmx的前端日志

# Css相关笔记

# 1. css实现从左往右渐变

background: linear-gradient(to right,#2F76ED,#2451B1);

# 2. 使用flex的几个应用场景

<div class="time_box">
    <ul>
        <li>上班时间9:00</li>
        <li>下班时间18:00</li>
    </ul>
</div>
1
2
3
4
5
6
.kq_main_bot .time_box {
    position: absolute;
    width: 50%;
    height: 90%;
    top: 5%;
    left: 20px;
}
1
2
3
4
5
6
7

2.1 使用flex上下对齐

.time_box ul {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.time_box ul li:first-child {
    height: 93%;
}
1
2
3
4
5
6
7
8
9

2.2. 使用flex实现居中

.time_box ul {
    display: flex;
    height: 100%;
    align-items: center;
}
1
2
3
4
5

2.3 使用flex实现居中,个别元素的对齐方式和其他的不一样

.time_box ul {
    display: flex;
    height: 100%;
    align-items: center;
}
.time_box ul li:first-child {
    align-self: flex-end;
}
1
2
3
4
5
6
7
8

# 3. 浏览器下拉条样式

/* sass/less */
.xxx {
    &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(144,147,153,.3);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(144,147,153,.5)
    }

    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4. css p标签强制换行

p {
    width: 100%;
    word-wrap: break-word;
    font-size: 13.5px;
}
1
2
3
4
5

# 5. css实现超出部分显示省略号

/* 显示一行，省略号 */
p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
} 
    
 
/* 显示两行，省略号 */
p {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 6. 清除浮动

.f-cb:after,.f-cbli li:after{
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
    overflow:hidden;
    content:".";
}
1
2
3
4
5
6
7
8

# 7. 文字渐变

.font {
    background-image: linear-gradient(135deg,red,blue);
    -webkit-background-clip:text;
    color: transparent;
}
1
2
3
4
5

# 8. css初始化

  • reset.css
    /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a, button{
    cursor:pointer;
}
h1, h2, h3, h4, h5, h6, em, strong, b{
    font-weight:bold;
}

del, ins, u, s, a, a:hover{
    text-decoration:none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.el-loading{
position: absolute;
z-index: 2000;
background-color: rgba(255,255,255,.7);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.el-loading-spinner{
top: 50%;
margin-top: -21px;
width: 100%;
text-align: center;
position: absolute;
}
    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
  • common.css
    /**
 *  common css
 */
/* ==========================================================================
function
============================================================================ */
/* 清除浮动 */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
/* inline-block */
.f-ib li{display:inline-block;*display:inline;*zoom:1;}
/* 浮动 */
.f-fl{float:left;}
.f-fr{float:right;}
/* 显示/隐藏 */
.f-dn{display:none;}
.f-db{display:block;}
/* relative */
.f-pr{position:relative;}
/* 溢出隐藏 */
.f-oh{overflow:hidden;}
/* font-size */
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
/* font-weight */
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
/* text-align */
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
/* justify */
.f-taj{text-align:justify;text-justify:inter-ideograph;}
/* 垂直居中 */
.f-vam,.f-vama *{vertical-align:middle;}
/* 字间距 */
.f-ti2{text-indent:2em;}
/* 行高 */
.f-lhn{line-height:normal;}
/* 下划线 */
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
/* 超出部分省略号 */
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
/* 鼠标样式 */
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
/* 文本不能被选择 */
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
/* 边框圆角 */
.bdr_radiu{border-radius: 4px;}

/* ===============================================
    layout -- 不转换成rem - 主要修改第三方ui组件库
================================================= */
.main_cont{
padding: 8px 20px 0 20px;
}

[class*=" el-icon-"], [class^=el-icon-] {
font-size: 16px;
}
    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

# 9. flex两边对齐，中间有间隙

.wrap {
    width: 370px;
    height: 40px;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
}

ul {
    display: flex;
    justify-content: space-between;
}

li {
    margin-right: 1%;
    width: 47%;
    height: 100%;
    background: #000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 10. scss中做变量计算

min-height: calc(100vh - #{$navbar} - #{$tagHeight});

calc(100% - #{$a})
1
2
3

# 11. 三角形

<li>同比<b class="up">25.87%</b></li>

<style>
.compare {
    b {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 4px;
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-left: 5px solid transparent; /*transparent 表示透明*/
        border-right: 5px solid transparent;
        overflow: hidden;
    }

    &.up::before {
        border-bottom: 10px solid #E54246;
    }

    &.down::before {
        border-top: 10px solid #22D9DB;
    }
    }
}
</style>
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

# 12. p标签左右对齐

p {
    text-align:justify;
    text-justify:inter-ideograph;
}
1
2
3
4

← ts笔记 →