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

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

admin 2021-02-21 15:11 211人围观
简介 一些常用但是记不住的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);
}

阅读排行

  • Vue 的最佳使用方法

    Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...

  • FastClick是什么?一文搞懂原理解析​

    FastClick是什么?一文搞懂原理解析​ 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...

  • 提升CSS技能的20个小技巧

    提升CSS技能的20个小技巧 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Andr...

  • 一文彻底弄懂Event Loop!

    一文彻底弄懂Event Loop! 我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...

  • 生活中常用正则表达式

    生活中常用正则表达式 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...

  • vue组件通信你了解多少

    本文会介绍常见的通信方式,并分析每种方式的使用场景和注意点。

  • 10 种跨域解决方案

    10 种跨域解决方案 说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...

本栏推荐

官方微信