标签、类、ID、*
后代、子代、交集、并集

通用选择器：* 选择到所有的元素 
选择子元素：> 选择到元素的直接后代(第一级子元素) 
相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素 
普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素 

:link        :visited        :hover        :active        :focus

:first-child{}
:last-child{}
:nth-child(n){}
:nth-last-child(n){}  /* 选中父元素中倒数第几个子元素。 */

E[attr] 属性名，不确定具体属性值 
E[attr=”value”] 指定属性名，并指定其对应属性值 
E[attr ~=”value”] 指定属性名，找到的是具有此属性名，且与其它属性名之间用空格隔开

E[attr ^= “value”] 指定属性名，属性值以value开头 
E[attr $=”value”] 指定属性名，属性值以value结束 
E[attr *=”value”] 指定了属性名，属性值中包含了value 
E[attr |= “value”] 指定属性名，属性值以value-开头或者值为value 
    1. 
       /*将页面中所有标签具有class属性的标签选中*/
        [class] {
            width: 200px;
        }

    2. 
       /*将页面中标签既具有class属性并且class属性的值是one的标签选中*/
        [class="one"] {
            width: 200px;
        }

    3. 
       /*将页面中具有class属性且class属性中的值包含o的标签选中*/
        [class*="o"] {
            width:  200px;
        }

     4. 
       /*将页面中标签具有class属性且class属性值以o开始的标签选中*/
       [class^="o"] {
           width: 200px;
       }

      5. 
        /*将页面中标签具有class属性且class属性值以o结束的标签选中*/
         [class$="o"] {
            width: 200px;
         }

? 写法：
    :target { 属性: 值;...... }    

 例如：

      当使用锚链接指向该标签的时候设置样式
      p:target {
             color: red;
      }
 总结：
      1. 目标伪类选择器要和锚链接配合使用。

? 作用：实现鼠标选中段落文字时候的样式。
/*设置当鼠标选中p标签中的文字时候改变样式*/
p::selection {
    color: red;
    background-color: pink;
}

注意： 在该选择器中只能设置与颜色相关的属性。

font: 700 italic 50px/50px "SimSun/SimHei/Microsoft YaHei";
/* 顺序： font-style | font-variant | font-weight | font-size | line-height | font-family */

  <style>
    @font-face { 
    font-family: BorderWeb; 
    src:url(BORDERW0.eot); 
    } 
    @font-face { 
    font-family: Runic; 
    src:url(RUNICMT0.eot); 
    } 
    
    .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
    .event { FONT-SIZE: 24px; COLOR: black; FONT-FAMILY: "Runic" }
  </style>

  <p><font face="arial">arial courier verdana</font></p>
  <p><font style="font-family: arial">arial courier verdana</font></p>
  <p class="border">BorderWeb courier verdana</p>
  <p class="event">Runic courier verdana</p>

<div style="width:300px; border:1px solid #999999; overflow: hidden">    wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>

<div style="width:300px; border:1px solid #999999; word-wrap:break-word;">   wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>
<!--加入了“word-wrap: break-word”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。-->

  <style>
    .code {
      font-size: 80px;
      -webkit-text-fill-color: red; /*  文字内部填充颜色 */
      -webkit-text-stroke-color: blue; /*  文字边界填充颜色 */
      -webkit-text-stroke-width: 3px; /*  文字边界宽度 */
      }
  </style>

  <div class="code">Text-decoration 效果图</div>

  <style>
    .multi_column_style {
      width: 600px;
      border: 1px solid red;
      padding: 20px;
      -webkit-column-count: 3;
      -webkit-column-rule: 1px solid #bbb;
      -webkit-column-gap: 2em;
    }
  </style>
  <div class="multi_column_style">
    问：据报道，13日，美政府委内瑞拉问题特使艾布拉姆斯称，因担忧委还贷能力，中国或将不再对委提供贷款。中方对此有何评论？
    答：关于中委合作的问题我已讲过多次。我愿重申，中委关系是正常的国与国关系，中委务实合作本着平等互利、共同发展和商业化原则进行，合法利民。中方将继续遵循上述原则同委内瑞拉开展各领域交流与合作。
    问：你能否介绍中美两国元首近期可能会晤的时间和地点？
    答：我们注意到特朗普总统多次表示期待同主席再次会晤。中方愿意同美方通过各种方式保持密切联系。至于具体情况，我目前没有这方面信息。
  </div>

background-color: #fff; /* 背景颜色。 */
background-position: 0 0; /* 背景图像的位置。 */
background-size: contain; /* 背景图片的尺寸。 */
background-repeat: no-repeat; /* 如何重复背景图像。 */
background-origin: padding-box; /* 背景图片的定位区域。 */
background-clip: border-box; /* 背景的绘制区域。 */
background-attachment: fixed; /* 图像不会随页面的其余部分滚动。 */
background-image: url(); /* 规定要使用的背景图像。 */

background-size属性：  通过该属性可以设置背景图片的大小。
      1. 可以设置具体值
          background-size: 400px 400px;
      2. 可以设置 cover：  
         通过设置cover值后，可以让背景图片按照原来缩放比，将整个盒子沾满。
      3.  可以设置contain：
         通过设置contain值后，可以让背景图片按照原来的缩放比，将背景图片完整的显示到父容器中。

background-origin属性：调整背景图片在盒子模型中开始显示的位置
      默认值：padding-box （代表背景图片从padding区域左上角开始显示）
            content-box （代表背景图片从内容区域开始显示）
             border-box   （代表背景图片从整个盒子左上角开始显示）
      
background-clip属性： 设置背景图片在哪块区域中显示
     默认值： border-box (代表背景图片要在整个盒子范围内显示)
             content-box（代表背景图片只会在内容区域显示）
            padding-box（代表背景图片在内边距区域显示【包括内容区域】）

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;  /* 背景合写 */

/* 语法 text-shadow: h-shadow v-shadow blur color;
水平阴影的位置。允许负值。 
垂直阴影的位置。允许负值。
模糊的距离。
阴影的颜色。
*/
text-shadow: -10px -10px 10px red,
               5px 10px 10px blue;

box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
/* box-shadow: 0px 0px 10px blue,
            -5px -5px 5px orange;
水平 垂直 模糊度 颜色 */
-webkit-box-reflect: below 10px;


border-radius:  水平半径/垂直半径 ;
如果垂直半径与水平半径相等，那么垂直半径可以不用设置
 border-radius:  水平半径 ;
例如：border-radius: 50%;  绘制的是一个圆

字体格式：
    1、TureType(.ttf)格式
        .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

    2、OpenType(.otf)格式
         .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

    3、Web Open Font Format(.woff)格式
        woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

    4、Embedded Open Type(.eot)格式
       .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

    5、SVG(.svg)格式
    .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS     Mobile Safari3.2+；

.line {
    height: 100px;
    /*线性渐变语法*/
    background-image: linear-gradient(             
        /*渐变的方向 ： to + 方位名称（left| right| top| bottom）*/
        to right,
        /*设置渐变的开始颜色*/
        red,
        /*设置渐变的结束颜色*/
        blue
    );·
}

? 详细介绍线性渐变中的细节：
1. 渐变方向问题：
? to + 具体的方位名称 left| right | top | bottom
? 通过一个角度表示一个渐变方向   例如： 0deg   90deg
0deg 代表渐变是从下向上渐变
90deg 代表渐变从左向右渐变
其他角度按照顺时针设置即可。

background-image: linear-gradient(
    /*设置渐变的方向*/
    135deg,
    /*开始颜色*/
    red,
    /*结束颜色*/
    blue
);

2. 渐变的范围问题：
? 通过设置一个百分比表示一个渐变的范围
? 默认设置的范围百分比是相对当前元素的宽度
? 当设置了background-size之后，那么范围的百分比是相对background-size的值。

    background-image:  radial-gradient(
            /*100px代表半径
            center 代表圆心点位置*/
            100px at center,
            red,
            blue
    );

1.  圆心位置确定可以通过   
    at + 方位名称  left | right | top | bottom | center
2.  圆点位置还可以通过    at + 具体坐标值
       /*径向渐变*/
        background-image:  radial-gradient(
            /*100px代表半径
            center/120px 150px 代表圆心点位置*/
            100px at 120px 150px,
            red,
            blue
        );

3. 如果只设置一个半径值，那么代表水平半径和垂直半径的取值是一样的----正圆
        反之如果设置的两个值不一样，那么出现的效果就是椭圆效果
        background-image:  radial-gradient(
            /*100px代表半径
            center 代表圆心点位置*/
            100px  50px at 120px 150px,
            red,
            blue
        );

float: left|right;
特点：块级元素在一行上显示；脱标；模式转换

①    clear属性清除浮动。
clear:left|right|both
步骤：在浮动元素的后面直接添加一个空标签【必须是块级元素】
      选中该标签，使用clear:both;
        <div class="clearfix"></>
        .clearfix {
          clear:both;
        }

②使用伪元素清除浮动：
.clear::after {
  content:"";
  display :block;
  clear:both;
  height:0px;
  line-height:0px;
  visibility:hidden;
}
.clear {
  zoom:1;
}
让浮动元素的父元素调用；
请不要设置完浮动就清除浮动，要满足两个条件：
    如果父元素没有设置高度；
    该父元素种的所有子元素都设置了浮动

③给父元素设置overflow: hidden;----可以将超出父元素的部分进行隐藏。

position: static;
left: 100px;
按照标准流元素默认的方式显示

position: absolute;
left|top|right|bottom: 值;
绝对定位的元素是一个脱标不占位置的元素，可以实现模式转换

position: relative;
left|top|right|bottom: 值;
没有脱标，占位置----子绝父相

position: fixed;
left|top|right|bottom: 值;
始终都是以body标签左上角定位，脱标不占位元素。

position: sticky;
top: 100px;

<style>
    * {
      margin: 0;
      padding: 0;
    }
  .father {
    width: 200px;
    height: 1000px;
    background-color: lightgray;
  }
  .son {
    position: sticky;
    top: 100px;
    margin: 0 auto;
    width: 150px;
    height: 30px;
    background-color: #ff0000;
  }
  </style>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>-11</div>
    <div>23</div>
    <div>45</div>
    <div>65</div>
    <div>78</div>
    <div class="son">子元素</div>
  </div>

margin: 0 auto;--标准流下的盒子居中

 实现绝对定位盒子居中方式:
                width: 200px;
             height: 100px;
             background-color: red;
             position: absolute;
             /*移动了父元素宽度的一半*/
             left: 50%;
             /*移动了当前元素自己宽度一半*/
             margin-left: -100px;

  ? z-index 属性就是用来改变元素的层级关系的。
  ? 只有定位（除去静态定位）的元素才有层级关系，z-index 属性只能和定位的元素配合使用。
  ? 总结：
      1. 如果一个元素是定位元素（除去静态定位），那么该元素的默认z-index的值是auto[认为auto=0]
      2. 如果z-index值相同，那么最后的定位元素会压着前面的定位元素【后来居上】
      3. 通过设置z-index值，改变元素之间的层级关系，z-index值越大层级越高。
      4. 如果父元素中共存在定位层级关系，那么只会看父元素中z-index值的大小。

  ? 属性介绍: vertical-align
        设置元素在垂直方向的对齐方式
     1. 在网页中所有的行内块元素都有vertical-align默认属性。
     2. vertical-align： baseline | top | bottom | middle |

  ? 总结vertical-align属性在网页中的使用:
      1. 可以解决网页中插入图片底部3像素空白
         ? vertical-align的值不是默认值baseline就可以了。
           ? 将图片转换为块级元素也可以

      2. 在网页中实现图片垂直居中。
         第一步： 先设置行高等于容器的高度
         第二步： 设置图片的垂直对齐方式vertical-align：middle;

只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

 ? 隐藏元素：
    display: none;    -----元素隐藏
    display：block;   -----显示元素
    
    总结：
      display: none;隐藏元素不占位置

? 隐藏元素visibility: hidden;
     总结：
         ? 可以隐藏元素
         ? 隐藏元素后占位置。


? overflow:hidden;  只能将超出父元素的部分进行隐藏。
   总结；
      overflow的默认是visible  | hidden  | scroll [给父元素设置滚动条] | auto [超出添加滚动条，不超出不添加]

  metat标签实现网页优化（seo）。
  ? 设置网页关键字
    <meta name="keywords" content="设置与当前网页信息相关的词语">
  ? 设置网页描述信息
    <meta name="description" content="对当前网站的描述性文字">

 word-spacing[控制每个汉字之间的距离]： 值;
     注意：
        在使用该属性的时候，最好在字与字之间有分割符号，例如： 空格符
 
 letter-spacing[控制字母之间的距离]： 值;
      注意：
        该属性是控制字母与字母之间的距离，一般不需要设置分割符。

 属性介绍：transition 

     1.transition-property: 设置属性以动画效果执行。  all | 具体的属性
    
     2.transition-duration:  设置动画执行时间        例如： 2s   
    
     3.transition-delay:     设置动画延时执行的时间    

     4.transition-timing-function： 设置动画速度类型    ease | linear | ease-in | ease-out | ease-in-out

 总结：
      1. 在动画效果中，开始状态中的属性一定要与结束状态中的属性一一对应。
      2. transition 的合写方式：
         例如： transition: all 2s linear 5s;
         或者分步执行动画效果：
          transition: width 1s linear,
                     height  1s linear 1s,
                     background-color  1s linear 2s;
     3. transition 可以放到开始状态中也可以放到结束状态中。

transform 复合属性

属性介绍：
         1. 位移【让元素移动位置】     transform: translate(值);
         2. 缩放【放大缩小】           transform:scale(值)
         3. 旋转 【转圈】                transform: rotate(角度的单位值)
         4. 倾斜                        transform:skew(角度的单位值)

位移
      transform: translate(100px,100px);
      备注：
          1. 如果只设置一个值，那么代表在水平方向移动
          2. 如果设置两个值，那么第一个值代表水平方向，第二个值代表垂直方向
          3. 可以设置负数，负数代表相反方向
          4. 通过translate移动元素位置的时候，是相对元素自己本身，可以设置百分比。
          5. 可以通过位移的方式实现绝对定位的盒子居中：
             .box {
                 width: 500px;
                 height: 500px;
                 border:  1px solid red;
                 position: relative;
            }

            .one {
                 width: 133px;
                 height: 263px;
                 background-color: red;
                 position: absolute;
                 left: 50%;
                 top:  50%;
                 transform: translate(-50%, -50%);
            }

 ? 缩放：
      transform: scale(2,1);

      总结：
         1. 如果设置的是一个值，那么代表当前元素的宽度和高度同时放大或缩小对应的倍数。
         2. 如果设置两个值，第一个值代表宽度的放大或缩小，第二值代表高度的放大或缩小。
         3. 设置的值不能带任何单位,不能设置负数 
          4. 设置大于0 小于1的值，代表缩小。
          5. 给父元素设置缩放的时候不会影响子元素。
? 旋转：

     transform: rotate(角度)
    
      总结：
          1. 角度的单位是deg    例如： 30deg
          2. 如果设置的是正数那么代表顺时针旋转，反之逆时针旋转。

? 倾斜：
     transform: skew(45deg,45deg);

     总结：
        1. 如果设置一个值，代表当前元素是沿着x轴，让y轴倾斜了
        2. 如果设置两个值，第一个值沿着x轴，让y轴倾斜，第二值代表沿着y轴，x轴发生倾斜。

 注意：
     1. transform属于复合属性。如果设置多个值的时候，要使用复合写法：

        transform: translate(length, length) rotate() scale(0, 0) skew(angle, angle);

     2. 默认元素在旋转或者倾斜的时候，是按照中心点进行旋转的。如果希望改变旋转点（旋转轴），通过
        transform-origin 设置即可。
         取值可以是具体的方位名称： left  | right | bottom  | top 
         或者可以设置具体值:
         /*改变旋转点位置*/
         transform-origin: right bottom;
         transform-origin: right 200px;

    <style type="text/css">
        .box {
            width: 343px;
            height: 100px;
            background: url("paopao.png") no-repeat left top,
                       red url("paopao.png") no-repeat left bottom;

            transition:  all 1s linear;
        }


        .box:hover {
            background-position: right bottom, right top;
        }
    </style>
    
     <div class="box"></div>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #ccc;
        }
        ul {
            height: 300px;
            margin-top: 100px;
            margin-left: 200px;
        }
        li {
            width: 234px;
            height: 300px;
            float: left;
            margin-right: 10px;
            text-align: center;
            background-color: #fff;
            position: relative;
      overflow: hidden;
        }
        .one {
            transition: margin-top 1s linear,
      box-shadow 1s linear;
        }
        .one:hover {
            margin-top: -20px;
            box-shadow: 0px 0px 20px #000;
        }
        .box{
            width: 100%;
            height: 0px;
            background-color: orange;
            position: absolute;
            bottom: 0px;
            transition: height 1s linear;
        }
        .two:hover .box {
            height: 80px;
        }
    </style>

      <ul>
           <li class="one">
               <img src="1.jpg">
           </li>
           <li class="two">
               <img src="2.jpg">
               <div class="box">1234567</div>
           </li>
      </ul>

 ? 位移
      transform: translateX(200px)；  沿着x轴移动
      transform: translateY(200px);      沿着y轴移动
      transform: translateZ(-200px);  沿着Z轴移动  如果设置正数元素变大，如果负数元素变小。
        
      备注：
          1. 3D位移也是相当元素自己。
          2. 3D位移也可以设置百分比
          3. 通过3D方式实现盒子居中：
        .one {
             width: 133px;
             height: 133px;
             background-color: red;
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translateX(-50%) translateY(-50%);    
        }

      透视：
          1. 要给父元素设置perspective;
          2. perspective的取值可以影响我们视觉上的效果差。【600-1000推荐设置的值】
    
 ? 位移
     1. transfrom: translateX(值);   正数代表向右移动，负数代表向左移动
     2. transform:translateY(值);   正数代表向下移动，负数代表向上移动
     3. transform:transalteZ(值)；   正数代表朝向我们自己移动，负数代表背向移动

 ? 旋转
     1. transform: rotateX(值deg)；
     2. transform: rotateY(值deg);
     3. transform: rotateZ(值deg);

     左手法则，坐标轴也跟着旋转

 ? 缩放
      1. transform: scaleX(2)  
      2. transform: scaleY(2)


 ? 转换为立体效果：
     transform-style: preserve-3d;

? 与过度的区别：
     1. 过度动画行为需要有用户的操作过程（鼠标悬停，点击按钮动作【js】。。。。） 
     2. 今天的动画animation不需要用户的操作

? 语法：
1. @keyframes  自定义动画名称 {
        from {

        }
    
        to {

        }
    }

2. 通过动画名称调用动画集
    animation-name： 动画集名称。

3. 属性介绍：
     /* 1. 通过动画集名称调用动画 */
        animation-name: box_move;
     /* 2.设置动画执行时间 */
         animation-duration: 1s;
      /* 3. 动画默认执行次数是1次, infinite: 无限次 */
        animation-iteration-count: infinite; 
     /* 4. 设置动画的速度类型:  ease ; */
       animation-timing-function: linear;

     /* 5. 设置延时执行时间 */
       animation-delay: 2s;

      /* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/
      animation-direction: alternate;

     /* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */
       animation-fill-mode: forwards;

     /* 8。 动画播放状态设置： running | paused暂停 */
       animation-play-state: paused;

4. animation复合写法：
    例如： animation: box_move 1s linear 2s alternate  forwards;
    注意：
        1. 一个元素可以同时调用多个动画集，使用逗号隔开。
         例如：
               animation:  box_move 1s,
                       one 1s linear 1s,
                       three 2s ease 5s alternate;

        2.  可以将一个完整的动画分割成若干个阶段执行
            @keyframes one {
                0% {}
                10% {}
                20% {}
                ...
                100%{}
            }

         注意：
             百分比是相对整个动画执行时间而设置的。

    <style type="text/css">
        .box {
          width: 50px;
          height: 50px;
          background-color: red;
          /* 第二步： 调用动画集 */
          /* 1. 通过动画集名称调用动画 */
          animation-name: box_move;

          /* 2.设置动画执行时间 */
          animation-duration: 2s;

          /* 3. 动画默认执行次数是1次, infinite: 无限次 */
          animation-iteration-count: infinite;

          /* 4. 设置动画的速度类型:  ease ; */
          animation-timing-function: linear;

          /* 5. 设置延时执行时间 */
          animation-delay: 0.5s;

          /* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 */
          animation-direction: alternate;

          /* 7. 设置动画执行完后的一个状态 */
          animation-fill-mode: forwards;

          animation: box_move 1s,
            one 1s linear 1s,
            three 2s ease 5s alternate;
        }

        .box:hover {
          /* 动画暂停 */
          animation-play-state: paused;
        }

        /* 第一步： 先定义个动画集（动画序列） */
        @keyframes box_move {
          /* 定义动画的开始效果（开始状态） */
          from {
            transform: translateX(0px);
          }
          /* 定义动画的结束状态 */
          to {
            transform: translateX(500px);
          }
        }

      </style>
      <div class="box"></div>

    <style type="text/css">
        .clock {
             width: 300px;
             height: 300px;
             border: 1px solid red;
             border-radius: 50%;
             margin: 100px auto;
             position: relative;
        }
        .line {
            width: 2px;
            height: 100%;
            background-color: #000;
            /* 目的为了让元素重叠到一块 */
            position: absolute;
            left: 50%;
            margin-left: -1px;
        }

        .line:nth-child(2) {
             transform: rotateZ(30deg);
        }

        .line:nth-child(3) {
             transform: rotateZ(60deg);
        }

        .line:nth-child(4) {
             transform: rotateZ(90deg);
        }
        .line:nth-child(5) {
             transform: rotateZ(120deg);
        }
        .line:nth-child(6) {
             transform: rotateZ(150deg);
        }

        .cover {
             width: 280px;
             height: 280px;
             background-color: #fff;
             border-radius: 50%;
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);

        }

        .h {
             width: 6px;
             height: 100px;
             background-color: orange;
             position: absolute;
             left: 50%;
             top: 40px;
             transform: translate(-50%);
             /* animation: rotate 3600s linear infinite; */
        }

        .m {
             width: 4px;
             height: 120px;
             background-color: blue;
             position: absolute;
             left: 50%;
             top: 20px;
             transform: translate(-50%);
             transform-origin: bottom;
             animation: rotate 3600s linear infinite;
        }

        .s {
             width: 2px;
             height: 130px;
             background-color: #000;
             position: absolute;
             left: 50%;
             top: 10px;
             transform: translate(-50%);
             transform-origin: bottom;
             /* 注意： 设置steps的时候不能再次使用linear速度类型 */
             animation: rotate 60s steps(60) infinite;
        }

        .dotted {
             width: 10px;
             height: 10px;
             background-color: red;
             border-radius: 50%;
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);
        }
        /* 定义动画集 */
        @keyframes rotate {

            from {
                transform:translate(-50%) rotate(0deg);
            }

            to {
                transform:translate(-50%) rotate(360deg);
            }
        }
    </style>

<div class="clock">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>

    <div class="cover">
        <div class="h"></div>
        <div class="m"></div>
        <div class="s"></div>
        <div class="dotted"></div>
    </div>
</div>

  ? 伸缩盒子设置：
       1. 如果要实现伸缩盒子布局，那么先将父元素设置为伸缩盒子
       2. 给父元素设置：display: flex;

       3. 在伸缩盒子中，具备两条轴。一条是主轴（默认是水平显示）。，另外一条是侧轴（始终要垂直于主轴）
       4. 由于在伸缩盒子中，所有的元素都是按照主轴方向显示的，所以在伸缩盒子中，所有的子元素默认都是在一行上显示。


  ? 设置主轴方向（flex-direction）
         row（水平显示） |  column （垂直显示）
     /* 设置主轴的方向 */
              flex-direction: row;
              flex-direction: column;
       
  ? 主轴方向对齐方式（justify-content）
            /* 设置元素在主轴的对齐方式 */
             justify-content: flex-start;
             justify-content: flex-end;
             justify-content: center;

             /* 两端对齐，中间居中自适应 */
             justify-content: space-between;
            /* 元素周围以空白环绕显示 */
             justify-content: space-around;


  ? 侧轴方向对齐方式（align-items）
            
            /* 设置元素在侧轴的对齐方式 */
            align-items: stretch;  默认值
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;


  ? 是否换行显示（flex-wrap）
        注意：
           在伸缩盒子中，盒子默认是一行显示
        
             /* 控制子元素是否换行显示 */
             flex-wrap: nowrap;    不换行显示
             
             flex-wrap: wrap;       换行


  ? 伸缩比
      flex: 值；

    总结：
       1. 先将flex设置的值相加，得到的结果就是将整个父元素平分的结果。
       2. 每一个子元素设置的flex的值，就是对应的所占比例值。
       3. 该属性是给子元素设置的。