css一些常用知识

垂直水平居中

我常用的有
1.定位+transform
2.flex布局 justify-content和align-item 设置居中
3.水平居中 margin：0 auto

其他方式

/* table布局*/
display: table-cell;
vertical-align: middle;
text-align: center；

/* grid布局*/
display:grid;
justify-items:center;
aligen-items:center;

文本超出打点

/* 单行文本超出打点*/
overflow: hidden;
white-space: nowrap;
text-overflow：ellipsis;

/* 多行文本超出打点*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical;

BFC

Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只考虑内部元素布局，与这个区域外部毫不相干，通俗地讲，BFC是一个容器，用于管理块级元素。

BFC条件

• float为 left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block|inline-flex|flex
• position为 absolute|fixed
• 根元素

BFC可以做什么

1.清除浮动导致的高度塌陷，因为在计算bfc高度时，内部的浮动元素也会参与计算。
2.阻止外边距重叠/外边距塌陷，属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。可以给需要阻止外边距塌陷的元素外包裹一个容器，设置一个新的bfc，不同bfc中的元素不发生外边距重叠。
3.进行一些动画操作时，给该动画元素外包裹一层容器，并设置bfc，可以减少回流/重绘造成的影响，只会回流/重绘该bfc，不会回流/重绘整个页面。

在web端设置小于16px的字体，或者在移动端设置1px的字体？

1. 利用css3 缩放 transform: scale(0.5)
2. 移动端可以使用 viewport + rem
3. 切图/svg

利用border画三角

    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

宽高设为0，然后给3个方向的border给一个宽度，两个颜色设置为透明，一边设置为需要展示的颜色即可。

利用css画出曲线运动的动画

一般keyfram可以实现从一点到另一点的直线运动
想要实现曲线运动可以利用一个外层盒子嵌套内层盒子的方式，给外层盒子设置一个竖直方向上的动画，给内层盒子设置一个水平方向上的动画，通过控制keyframe的时间点就可以做到曲线运动的动画。

 <div class="dot-box">
 	<div class="dot"></div>
 </div>

	/* x轴从0->960px 运动*/
  @keyframes xAxis {
    100% {
      transform: translateX(960px);
      opacity: 0;
    }
  }
  /* y轴从0->50%时不移动，从50%->67%向下移动78px，67%->100% 不移动*/
   @keyframes yAxis {
    50% {
      transform: translateY(0);
    }
    67% {
      transform: translateY(78px);
    }
    100% {
      transform: translateY(78px);
    }
  }
  .dot-box{
  	animation: yAxis 2s ease-in infinite;
  }
  .dot {
  	width: 10px;
    height: 3px;
    background: blue;
    box-shadow: 0px 0px 10px 5px blue;
    animation: xAxis 2s ease-in infinite;
  }

样式如下
这种可以给一些标题的边框添加一些简单的动效，也可以实现一些抛物线的动画。