移动端_Day2

1.用css实现渐变色

background: linear-gradient(to right, #fa5986, #fb8650 54%);

direction：用角度值指定渐变的方向（或方向）；

color-stop1,color-stop2,…：用于指定渐变的起止颜色

ps：至少需要两种颜色

用百分比指定起始颜色的位置，默认值为0%；

to left 设置渐变从右到左，相当于270deg

to right设置渐变从左到右，相当于90deg

to top 设置渐变从下到上，相当于0deg

to bottom 设置渐变从下到上，相当于180deg

2.

max-width:516px;

 /* 设置真实宽度为calc(100% - 5%);是为了适应不同的手机屏幕而不发生差异。*/

 width:calc(100% - 5%);

3.

  /* 在设置圆角后可能会导致内容溢出，这时我们设置overflow:hidden;即可让圆角正确显示 */

    border-radius: 8px;

    overflow: hidden;

4.

 white-space: nowrap;

可以设置文字在盒子内不换行。

5.

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

这样可以让图片始终保持居中状态。

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.

 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

  translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

6.

/* 表示离用户的距离，为正数表示离用户越近，为负数则表示离用户越远。 */

    z-index:1;

7

多行文本溢出换行

display: -webkit-box;   

-webkit-box-orient: vertical;   

-webkit-line-clamp: 3;   

overflow: hidden;

单行文本溢出换行

width:300px;   

overflow: hidden;   

text-overflow:ellipsis;   

whitewhite-space: nowrap;

8.在flex布局下img标签变形的解决方法

一、flex-shrink: 0

给 img 设置 flex-shrink: 0;
flex-shrink 的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
缺点：仅兼容IE11

二、height: 100%

在父元素没有设置高度的情况下，给图片设置 height: 100%;

三、外层div标签包裹

用div标签包裹图片，这种方案比较通用，缺点：产生无用标签。

https://www.cnblogs.com/thinkingthigh/p/11726777.html（他的博客有一只可爱的猫，将来我要写一个）