代码记录

https://www.w3school.com.cn/css/css_table.asp

设置行内元素使高度能垂直居中

line-height: 50px;

设置行内元素能水平居中

text-align:center;

高度塌陷与BFC

overflow:hidden;

使用after偽類解決高度塌陷

.box1::after{
    content: '';
    display: block;
    clear: both;
}

使用clearfix解決高度塌陷和父子塊外邊距重疊問題

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

使用 FontAwesome图标

.location::before {
    content: "\f3c5";
    font-family: "FontAwesome";
    color: red;
}

box的阴影效果

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

三角形效果

.appa::after {
    content: '';
    border: 10px solid transparent;
    border-top: none;
    border-bottom-color: white;
    position: relative;
    top: 2px;
    left: -20px
}

hover选择after

.appa::after {
    content: '';
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: white;
    position: absolute;
    bottom: 0;
    left: 12px;
    display: none;

}

.appa:hover .qrcode,
.appa:hover::after {
    display: block;
}

固定定位的写法

    position: fixed;
    right: 50%;
    margin-right: -643px;