CSS使用技巧

1. 将font-size和line-height设置为相同的值，消除文字上下无意义的空白，减少占用的空间。

2.清除position:relative进行定位，会占用原来位置的空间，改用margin负值。

3. 实现文本单行居中，多行最后一行不居中的效果。

/* html */
<view>
    <text></text>
</view>

/* css */
view {
  display: flex;
  justify-content: center;
}

view text {
  max-width: 550rpx;
}

效果：

4. align-items: baseline: 项目的第一行文字的基线对齐。

5. 扩大按钮可点击区域（移动端开发要经常考虑到）

button {
  position: relative;
}
button::before {
  content: '';
  position: absolute;
  top: -10px; 
  right: -10px;
  bottom: -10px; 
  left: -10px;
}

6.清除浮动

.clearfix:after {
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  height:0;
}

.clearfix {
  zoom: 1;
}

7. 多行文本溢出用省略号表示

p {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

8. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。要注意哪些属性是属于弹性盒子的，哪些属性是属于弹性元素的。

属于弹性盒子的属性：

1) display：指定 HTML 元素盒子类型。

2) flex-direction：指定了弹性容器中子元素的排列方式。

3) justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

4) align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

5) flex-wrap： 设置弹性盒子的子元素超出父容器时是否换行。

6) align-content： 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐。

7) flex-flow： flex-direction 和 flex-wrap 的简写。

属于弹性元素的属性：

1) order    设置弹性盒子的子元素排列顺序。
2) align-self    在弹性子元素上使用。覆盖容器的 align-items 属性。
3) flex    设置弹性盒子的子元素如何分配空间。

9. display:table和display:table-cell的妙用

display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，如下:

<div class="parent">
   <p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
   </p>
</div>

.parent {
  display: table;
  width: 300px;
  height: 300px;
  text-align: center;
}
.son  {
  display: table-cell;
  height: 200px;
  background-color: yellow;
  /* 设置文本垂直对齐的方式 */
  vertical-align: middle; 
}

10. 图片宽度自适应，宽高成自适应比例。

<div class="wrapper">
  <img src=""/>
</div>

.wrapper {
    position: relative;
    width: 100%;
    height: 0;
    // padding-top取值百分比是相对于包含块的宽度而定
    padding-top: 100%;
}

.wrapper img {
    // 手机宽度自适应，宽高相等
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}

11. 1px边框的实现（基于vue项目的结构,sass和stylus的实现）

其他方法参考：https://www.jianshu.com/p/fa670b737a29

css/mixin.scss,  css/base.scss(添加全局的类，给边框添加缩放),  css/index.scss

// mixin.scss

@mixin border-1px($color) {
  position: relative;
  &::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid $color;
  }
}

@mixin border-top-1px($color) {
  position: relative;
  &::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid $color;
  }
}


//mixin.styl

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

// base.scss

// 全局 class
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
    &::before {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &::before {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}


// base.styl
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

// index.scss

@import './base.scss';
@import './mixin.scss';


// index.styl

@import "./mixin"
@import "./base"

// main.js (两种预处理器相同)

import '../static/css/index.scss'

// test.vue

<template>
  <div class="test border-1px"></div>
</template>

<style lang="scss" scoped>
@import '../../static/css/mixin';
.test {
  @include border-top-1px(rgb(229,229,229));
  @include border-1px(rgb(229,229,229));
}
</style>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .test 
    border-1px(rgba(7, 17, 27, 0.1))
</style>

12. 带模糊效果的背景图片的实现

  <div class="header">
    <div class="header-content">
    <div></div>
    <div class="header-background">
      <img :src="seller.avatar"/>
    </div>
  </div>

.header {
  position: relative;
  background-color: rgba(7, 17,27, 0.5);
  .header-content {
  }
  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    filter: blur(10px);
    img {
      width: 100%;
      height: 100%;
    }
  }
}

13. stick-footer布局

在网页设计中, Sticky footers设计是最古老和最常见的效果之一. ,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候，页脚块粘贴在视窗底部;如果内容足够长时，页脚块会被内容向下推送。

 

    <div v-show="detailShow" class="detail" transition="fade">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
        </div>
      </div>
      <div class="detail-close" @click="hideDetail">
        <i class="icon-close"></i>
      </div>
    </div>

.detail {
  position: fixed
  z-index: 100
  top: 0
  left: 0
  width: 100%
  height: 100%
  overflow: auto
  .detail-wrapper {
     width: 100%
     min-height: 100%
     .detail-main {
        // 不要在此处设置margin-top，会导致margin重叠。
        padding-bottom: 64px
      }
  }  
  .detail-close {
    position: relative
    width: 32px
    height: 32px
    margin: -64px auto 0 auto
    clear: both
    font-size: 32px
}

14. 当要在页面添加一条横线时，页面结构是<div></div>，不要通过设置height来得到横线，而要通过设置border来得到横线，同时要设置<div>的height为0。

15. 模糊背景，而不模糊子元素

// 只有ios下能够显示
backdrop-filter: blur(10px);

16. 关于display:flex碰上white-space nowrap 影响布局的问题

背景：做一个左边图片宽度固定，右边宽度自适应，使用到了flex布局，但是想让右边div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响

官方解释：因为设置了white-space:nowrap，所以content没法收缩了，设置0后就有了固定尺寸就可以收缩了

解决方法：在div元素的父元素上添加min-width:0（注意！如果嵌套了多个flex布局，则每个flex:1的父元素都需要添加该属性）

<div class="container">
  <img class="avatar" src="./avatar.jpg">
  <div class="info">
    <h3 class="title">
      首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的
    </h3>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  width: 600px;
  .avatar {
    width: 50px;
    height: 50px;
  }
  .info {
    flex: 1;
    min-width: 0; // 关键代码
    .title {
      // 文本超出折叠 显示...
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

17. 贝塞尔曲线

cubic-bezier 又称三次贝塞尔，用四个点（p0,p1,p2,p3）描绘一条曲线。（p0-p1,p2-p3构成两个切角）

 在css3中，p0默认为（0，0），p3默认为（1，1）。所以，我们只需关注p1，p2。

在css3动画中，用来表示速度曲线。

公式：B(t) = P0(1 - t)3 + 3P1t(1 - t)2+3P2t2(1 - t) + P3t3,  t ∈ [0, 1];

可以在这个网站上直接调节：https://cubic-bezier.com/#.3,-0.2,.73,.4  得到参数。

cubic-bezier(.51,-0.3,.7,.43)，先运行一段慢速的负向动画，然后加速运行正向动画。

18. background-position 设置背景图像在容器中的位置。

雪碧图中的坐标：

当要显示雪碧图中的某个图标时，雪碧图作为背景图的background-position

19. word-break:break-all和word-wrap:break-word的区别

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break 属性用来标明怎么样进行单词内的断句。

用法：   word-wrap: normal|break-word;

　　　　word-break: normal|break-all|keep-all;

可以发现，word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而word-wrap:break-word则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。

20. z-index

21. animation-fill-mode属性

animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。 
animation-fill-mode共有四个属性值，分别为：none、forwards、backwards、both。 
注：IE9-不支持此属性。

（1）当值为none时
none为默认值，在动画执行前和动画执行后，对元素的样式不会产生影响。 
从上图可以看到，值为none时，动画执行前和执行后的状态和无动画的状态是一致的，动画执行前和执行后对元素没有产生任何样式影响。动画执行后跳到无动画状态。

（2）当值为forwards时
forwards当使用这个值时，告诉浏览器：动画结束后，元素的样式将设置为动画的最后一帧的样式。 
从上图可以看出，值为forwards时，动画执行前的状态和无动画状态一致，但是动画执行后状态却不一样，查看动画效果，你会发现他的状态和动画最后一帧的状态相同。

（3）当值为backwards时
从CSS样式可以看到，动画我们有设置延迟1s,为了便于观察动画执行前的状态。 
backwards当使用这个值时，告诉浏览器：动画开始前，元素的样式将设置为动画的第一帧的样式。 
从上图可以看出，值为backwards时，动画执行前的状态和无动画状态不一致，可以看出，它的状态和动画第一帧相同，但是动画执行后状态却和无动画时的状态相同。

（4）当值为both时
both当使用这个值时，告诉浏览器：同时使用forwards和backwards两个属性值的效果。 
从上图可以看出，动画执行前是动画第一帧的效果，动画执行后是动画最后一帧的效果。