css的一些小坑

line-gradient渐变

background: linear-gradient(to right, blue, white);

绝对定位使元素居中

可以用left:50%加上margin-left:-(宽度/2)，来实现绝对定位的水平居中，这里的宽度指的是设置为绝对定位的元素的宽度

.d1 {
    width:200px;
    height: 200px;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

vertical-align属性图片与文字对齐

<view class="title_right">
      <text>全部订单</text>
      <image src="/images/left_icon.png" style="vertical-align:middle"></image>
</view>

关于图片、文字的居中

（1）图片居中要在图片本身上设置margin: 0 auto;
（2）文字居中要在其父元素上设置text-align: center;

    <image src="/images/fc.png"></image>
    <text>113131313</text>
</view>

// css
.father {
  text-align: center;
    image {
        width: 90rpx;
        height: 90rpx;
        display: block;
        margin: 0 auto;
    }
    text {
        font-size: 20rpx;
       color: #929292;
    }
}

单行居中，多行居左单行居中，多行居左

文字溢出并显示省略号？

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

box-sizing

1）问题场景
在CSS中，设置的width和height只会应用到这个元素的内容区；如果这个元素有border或padding，那么绘制到屏幕上时的盒子宽度和高度会加上设置的borde和padding。
这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距，在响应式布局时，这个特点很烦人。

（2）解决

// 默认值
box-sizing: content-box;
box-sizing: border-box;

border-box告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。