您现在的位置是:首页 > 文章列表 > Html + CSS > 一些常用但是记不住的css属性

一些常用但是记不住的css属性

admin 2021-02-21 15:11 278人围观
简介 一些常用但是记不住的css属性

文字超出显示省略号

1、超出一行显示省略号

.ellipsis {  
    text-overflow: ellipsis;  
    white-space: nowrap;  
    overflow: hidden;  
    width: 500px;
}

2、超出多行显示省略号

div {  
    display: -webkit-box;  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 3;  
    overflow: hidden;  
    word-break: break-all;
}

英文字符等自动换行

p {  
    word-wrap: break-word;  
    word-break: break-all;
}

表格边框合并

table {  
    border-collapse: collapse;
}

修改滚动条样式

::-webkit-scrollbar {  
    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .2);  
    background-color: red;  
    border-radius: 4px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {  
    border-radius: 4px;  
    -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .2);  
    background-color: pink;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {  
    background-color: green;
}

块超出宽度滚动

ul {  
    display: flex;  
    overflow-x: auto;  
    -webkit-overflow-scrolling: touch;  /*移动端*/
}
li {  
    flex-flow: row nowrap;  
    flex-shrink: 0;
}

上下左右居中

/*父级元素*/
.box{  
    display: flex;  
    justify-content: center;  
    align-items: center;
}

箭头(大于号)

&:after{  
    content: '';  
    width: 6px;  
    height: 6px;  
    border-left: 2px solid #e6e6e6;  
    border-bottom: 2px solid #e6e6e6;  
    -webkit-transform: translate(0, -50%) rotate(-135deg);  
    transform: translate(0, -50%) rotate(-135deg);
}

阅读排行

本栏推荐

官方微信