css相关用法

动态添加行内样式background-image

<div class="icon" :style="{backgroundImage:'url('+item.attr.img_url+')'}"></div><span class="name">{{item.attr.name}}：</span>{{item.content}}

超过一行用省略号代替

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

css背景色逐渐透明

background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent);

css事件穿透

pointer-events: none;
pointer-events: auto;

动态绑定style还能这样写

<div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}"></div>

rotate_angle和rotate_transition为动态的值。

背景图使用雪碧图的坑

1.必须要有background-size（之前没有加，怎么弄都显示不完整）；
2.必须要有content:‘’；
3.必须要有宽高；
4.必要要有背景图片 background:url(‘…’)；
举个栗子：

&::before{
  display: block;
  content: '';
  height: 33px;
  width: 33px;
  border-radius: 50%;
  background: url('~@/static/images/index/index_ifchoose.png') no-repeat left bottom;
  background-size: 33px auto;     
  }

下划线随字体长短变化

width: auto;
display: inline-block !important;
display: inline;

添加滤镜

filter: grayscale(100%);

让一个盒子大小不随屏幕大小而变化

white-space: nowrap

该属性可以让文本不换行，所以即使屏幕变小了，盒子由于里面的字体不能换行，所以就不能被压缩。

文字上标

效果图：

代码实现：

主要是 vertical-align:super; 这个属性。

标签分类

1. 男标签（块标签）：独占一行，eg:div hn p ul ol li dt…
   可以设置宽高，如果不设，则默认为父元素的100%；
2. 女标签（行内元素）：并排显示，eg:span em b i…
   不能设置宽高，且垂直方向的值不起作用；
3. 人妖标签（行内块元素）：可以并排显示，其余和男标签一样，eg:input img;

标签相关知识

1. 男女性别互换:
   变成女：display:inline;
   变成男：display:block;
   变成人妖：display；inline-block;
2. 让男标签并排显示的方法：
   浮动
   flex 布局
   层布局

font相关属性

1. font-family:设置字体，默认为宋体，后面可加多个属性值，电脑会以最先出现的字体显示；
2. font-weight:设置字体是否加粗，blod为加粗，nomal为正常；
3. font-size:设置字体的大小，谷歌浏览器默认字体为16px;
4. font-style:设置字体是否倾斜；
5. font:14px/28px:表示字体大小为14px，行高为28px;
6. font:14px/2:与上述相同

文本修饰线

1. text-decoration:underline >下划线
2. text-decoration:overline >上划线
3. text-decoration:linethrough >删除线
4. text-decoration；none >取消下划线

列表相关设置

1. list-style-type:none;去掉列表前的小圆点或者数字。
2. 有序列表可设置type=“i”,表示后面的li以i开头,依次i,ii,iii,iiii…
   同理可以设置其他的type类型。

居中方案

1. text-align=center;让一个盒子中的文字或图片居中
   (不过此方案在特定的情况下也可以让盒子直接居中，即可以让一个盒子里面的女标签或者人妖标签直接居中)
2. margin=0 auto;让一个盒子居中
3. 设一个盒子设置了行高，其子标签如果是男标签，则高度可以被撑起来，然后居中；如果不是男标签，他高度不会被撑起来，但是会继承父元素的行高，所以仍会居中。

清除浮动影响

对于父元素而言
   会使父元素的高度塌陷，清除浮动影响方法如下：

1. 使用overflow:hidden
   （overflow:hidden的本意是隐藏多余部分）
2. 手动加高

对于兄弟元素而言
    元素浮动会使兄弟元素后面的元素钻上去，但文字不会，所以会造成字围效果，可以使用clear:both；将这个属性放在的第一个受影响的兄弟元素上面。

background相关知识

1. 为背景插入图片：background:url();
2. 设置背景是否平铺：background-repeat;
   取值为x-repeat表示在X轴方向平铺；
   取值为Y-repeat表示在Y轴方向平铺；
   取值为no-repeat表示不平铺；
3. 设置背景大小：background-size；
   取值为over表示让图片充满盒子，解决了装不下的问题；
4. 设置背景图片的位置：background-position;
   取值有两种形式：根据图片的坐标eg:20px -30px（针对大图）;可设置left center（尺寸与背景相符）；