css知识点记录

英文字母不自动换行

word-break: break-all;

多行文本超出隐藏

.hotList-item-title{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

关于阿里巴巴字体使用设置渐变字体图标

.icon-ziyuan1 {
  /* 设置背景渐变色 */
  background: -webkit-linear-gradient(left bottom, #fb2c61, #fac362);
  /* 规定绘制区域为文字部分 */
  -webkit-background-clip: text;
  /* 文字填充色 */
  -webkit-text-fill-color: transparent;
}

flex布局
flex:1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex是 flex-grow，flex-shrink，flex-basis的缩写
flex-grow:：当父控件还有剩余空间的时候，是否进行放大(grow)其中数值代表的是放大比例，值为0的时候表示不放大；
flex-shrink：当父控件空间不够的时候，是否进行缩小(shrink)其中数值代表的是与控件大小有关的缩小比例；
flex-basis：当子空间含有这个属性的时候，代表了子空间占主轴的大小，主轴就是flex的主方向row是横向，column是竖向

伪元素before和after
伪元素通过css样式展现的行为，不占用dom结构，所以不属于文档，js无法操作；减少了dom节点数，方便简单；不利于优化，不利于调试。伪元素:before/:after添加的内容默认是行内元素，使用时必须设置content属性