1. 定位方式

static 默认
relative: 相对原来位置定位
absolute:相对第一个祖先元素非 static
fixed: 相对窗口
sticky:可以设置滚动一段距离后定位在视口上方

一般是相对于它的父元素（能滚动的祖先），所以它设置的盒子要相对于视口

2. box-sizing

-     默认--仅包含width
-     width包含border、padding

3. 样式优先级

！important>内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

     属性选择器-- a[href='segmentFault.com']{}

4. transfrom

先旋转再平移
先平移再旋转

平移时，相对的坐标轴也跟着旋转了，所以结果不一样

旋转90 再旋转90 是倒过来的 --旋转原理--矩阵相乘

5. display:none、visbility:hidden、opacity:0

display:none
- 不保留物理位置

visbility:hidden
- 保留物理位置

opacity:0
- 仅不显示，点击事件保留

6. css 画屏幕宽度一半正方形

    width: 50vw;
    height: 50vw;

padding

    width: 50% // 如果盒子内有文字要用width  否则 可以用padding-left：50%
    
    padding-top: 50%;

7. animation

1. animation-direction: 播放方向
  - normal reverse alternate alternate-reverse

1. animation-duration 动画完成一个动画周期所需的时间
ms或者s

animation-iteration-count 动画播放次数
- infinite 无限播放

-animation-timing-function 速度曲线

linear 匀速

transform-origin
- 表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处
- juejin.cn/post/684490…
animation-fill-mode: forwards;
- 动画执行结束后，保留最后一个关键帧，而不是切换回最初状态。
实现旋转硬币

    .coin {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: yellow;
    animation: syn 0.2s alternate infinite linear;
    }
    @keyframes  syn {
        0% {
        transfrom : rotateY(0deg);
        }
         50% {
        transfrom : rotateY(180deg);
        }
        
        100% {
        transfrom: rotateY(360deg);
        }
    
    }

实现环形倒计时
1. 画一个圆
2.中间用同心圆盖住
1. 分为两个半圆，
- left 用left-border填充，初始旋转180度
- right 用right-border填充，初始旋转180度
- 分别各用一个box将他们盖住，超出overflow:hidden
- 动画
- 先旋转右侧再旋转左侧，两者可以用中间50%来控制顺序

    <div className="box">
        <div className="left_box">
            <div className="left"></div>
        </div>
        <div className="right_box">
            <div className="right"></div>
        </div>

        <div className="mark"></div>
    </div>

.box {
  width: 50px;
  height: 50px;
  position: relative;
}
.left_box {
  position: absolute;
  width: 25px;
  height: 50px;
  top: 0;
  left: 0;
  overflow: hidden;
}
.right_box {
  width: 25px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}
.left{
  height: 50px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  transform-origin:right center;
  background-color: pink;
  animation: left_run 4s linear  forwards ;
}
@keyframes left_run {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.right{
  height: 50px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: pink;
  transform-origin:left center;

  animation: right_run 4s linear forwards ;
}
@keyframes right_run {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.mark {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: aqua;

}

8.单行折断与多行折断

单行
    overflow:hidden;
    text-overflow: ellipsis;

多行

需要在单行基础上加上
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;（盒模型horizontal水平排列、vertical 垂直排列）

大部分H5都采用webkit内核，所以兼容性还可以，对于火狐 IE可能不太兼容

9.px em rem

10.行内元素/块级元素

常见的行内元素：<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo> -常见的块级元素<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video> p 、h 是块级元素

行内元素不会新起一行、块级元素新起一行
行内元素设置width、height无效

3. img、input、textarea 是行内元素、可替换元素、height\width\margin\padding都可以用

opacity 相对于父元素来定义的

如果父元素设置了opacity:0.5,子元素设置opacity:1 也是相对于父元素的0.5的一倍。

父元素背景使用rgba(0,0,0,0.5) 最后一个字符是控制透明度的
子元素抽出父元素，新建一个盒子，通过定位手段，移动到父元素之前的位置，这样就不受影响了。

从输入url到进入页面

浏览器缓存--dns-cdn-tcp连接-http请求-（缓存）-http响应-html|DOM树，css|CSSOM树-合并DOM\CSSOM形成渲染树-回流-重绘-js解析（事件循环）

CSS问题