常用样式

143 阅读1分钟

1、important权重比行内样式高

2、单个文字下沉

text-indent:11PX;
writing-mode: vertical-lr;

3、单行文本溢出省略号显示

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

4、多行文本溢出省略号显示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

5、css控制按钮是否可点击

pointer-events: auto; 恢复可点击状态
pointer-events: none;设置为不可点击状态

6、order设置flex的子元素可以进行排序,为0是排在最前面

7、文档流、文本流

文档流,指的是盒子元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 文本流,指的是文字元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

8、calc在css样式中计算属性的值

9、背景颜色和透明度的冲突

当背景颜色为渐进色时,opacity的数值需要乘以渐进色的每个阶段的rgba透明度数据,避免全局污染

10、vue中组件上的类名样式大于组件内部的样式

11、textarea 文本框禁止拖动改变大小

resize:none;

12、画虚线样式

// 值表示与下一段虚线的距离
stroke-dasharray: 4;

13、渐变边框border

border-image: linear-gradient(180deg, rgba(119, 210, 252, 0) 0%,rgba(104, 188, 253, 1) 20%, rgba(87, 164, 255, 0) 99%) 20 2 2 2;

14、vue项目中样式穿透的写法

// 方式1:
::v-deep{
  类名{
  	样式书写
  }
}
// 方式2:
/deep/ {
	类名{
    样式书写
  }
}