2-CSS

CSS

接下来开始学习CSS，最好有点基础

    <style>
        p {
            /*
color:字体颜色，默认rgb(0,0,0)，即black，即黑色
font-size：字体大小，通常会导致某些属性改变，使得标签位置发生改变，如操作p标签时，上下边距（一般上下边距是字体大小，左右边距是0，一般没有设置边距，就相当于margin是0，可以说每个元素的没有边距的，默认margin是0，而不是没有这个属性）的大小一般与字体大小有关（具体可以百度，经过测试，边距大小就是字体大小，至于为什么，具体可以百度），所以建议使用margin来进行回正
background-color:背景颜色，image就是图片（一般他需要url()），而单纯background都包括（自适应，是图片那么操作图片，是颜色，那么操作颜色）
            //一般来说默认没有大小的标签（如div，是需要大小，如宽度和高度来操作显示背景的，否则自然是显示不了的）
            */
          color: red;
          font-size: 50px; 
          background-color: green;
          width: 300px;
          height: 200px; /*最后的;是可以省略的，因为一个{}里面，默认给最后加上;，如果没有则会加上，否则不加上*/
  
        }
      </style>
    <p>哈哈</p>

<p style="  
    color: red;
    font-size: 50px; 
    background-color: green;
    width: 300px;
    height: 200px;">哈哈</p>

<!--rel="stylesheet"代表css的样式表，即操作css样式，并指定那个文件（所以不写，就不会指定，那么这个css不会进行操作），其中文件必须是css后缀，否则不会读取，与之前的图片，音频等等标签后缀没有限制的，即只考虑内容的，是不同的-->
   <link rel="stylesheet" href="./i.css">
    <p>哈哈</p>

<!--

对应的i.css文件内容：
p {
    color: red;
    font-size: 50px; 
    background-color: green;
    width: 300px;
    height: 200px;
  }

-->

 <style>
      p {
        color: red;
      }
      #a {
        color: blue;
      }
      .a { /*一般来说：类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头，其他的名称设置可以自己百度查找*/
        color:blueviolet;
      }
      .b{
        font-size: 100px;
      }
      #j{
        font-size: 100px;
      }
    </style>
    <p>a</p>
    <p>a</p>
    <p id="a">a</p>
    <p class="a" id="a">a</p><!--不同属性，自然是可以相同的值的，因为是不同的属性，两个自然互不影响，除非通过某些代码来完成关联，如js-->
    <p id="a j">a</p><!--操作两个样式-->
    <p class="a b" id="a">a</p> 
    <p class="a    b" id="a">a</p>
    <p id="a" class="a">a</p> <!--相同的样式只看样式的顺序（覆盖的，自然也包括里面的，这里在后面会说明），属性的顺序则是相同的看先后，其中id和id，class和class，看前面的id和class，并且都操作完才进行设置style规定的顺序属性，由于id权重大于class大于直接的标签（p{}），所以这里是id，所以是a，即若相同属性那么是一起看的（顺序），这个顺序并不操作覆盖，也就是说若都是id，第一个id为a，第二个为b，就操作#a的样式，即第二个判断有，那么不设置，而不是覆盖，与js中的变量和相同样式的赋值（覆盖）是不同的哦-->
    <div id="a">a</div>
    <div class="a">a</div>
    a
<div id="p" id="p">3</div><!--通过id获取，那么是先得到这个，有些（是有些，因为他们有判断）前端框架可能找到相同id会报错，或者生成的html页面也报错，所以建议还是不要使得id相同，否则可能得不到对于的改标签信息，并且也基本没有根据相同id获取所有对应标签的方法（这是保证id是唯一的，既然是唯一，那么就不给出，虽然html可以存在多个id），通常都是获取从上到下的找，找到就不找了-->
   <div id="p" id="o">2</div><!--他的id是p，不是o（不识别，即他操作不了样式，只能操作一个，包括class），先顺序，当然这些顺序并不需要了解，具体操作到时，自己测试即可，因为他是可以被修改的，虽然现在基本都是这样，但并不能保证以后的浏览器是否改变了对应的判断，所以最好先进行测试-->
 <script>
    var a = document.getElementById("p")
    console.log(a.innerHTML)
  </script>
<!--一般建议不要使用id来操作样式，而是class，我们大多数利用id是给js的，虽然也行，但是为了规范（规范一下吧，虽然id也可以操作样式，但是class主要用来样式的，如果id也使用，占用了一些名称，那么就少些id名称了，id在js中唯一，尽量少占用，虽然你id可以使用偏门的名称，但是这对样式维护也是不好的，所以一般我们就规范class操作样式，id就给js单独使用，唯一的id对js是有很大帮助的，因为不用进行从多个元素中操作得到数组，从而下标获取了），我们尽量分开使用-->

<style>
      *{ /*所有的标签*/
        color: red;
      }
    /*优先级比其他的外部（style）低，包括@import（优先级是优先级，顺序是顺序，虽然他可能会先操作一个样式最后由优先级来改变）
   一般情况下，外部通常写在上面，所以导致外部比内部低，但是其实外部优先级和内部是一样的，所以只看顺序，那么上面的优先级比其他的外部（style）低是建立在顺序上的
*/
      </style>
      <p>1</p>
  <div>2</div>

一般*的操作，是可以来保证某些默认样式的改变，比如p标签的边距（虽然是文字造成的），我们就可以利用这个来操作margin:0px来进行取消他的边距（也是解决大多数标签的样式的，比如某些ul，dd样式的缩进（也是样式造成的）），而不是操作默认的边距

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul> <!--上下边距为16，左内边距为40，这个就是缩进-->
    <li></li> <!--存在特殊内容-->
    <ol></ol> <!--上下边距为16，左内边距为40，这个就是缩进-->
    <dl></dl> <!--上下边距为16-->
    <dd></dd> <!--左边距为40-->
    <dt></dt>
  </body>
</html>
<!--
当然，他们的默认可能以后也会发生改变，所以大多数我们只是通过
* {
        padding: 0;
        margin: 0;
      }
后，然后作为语义来使用
-->

一般情况下，他们是有优先级的，内部（内部的style）大于外部（style），大于更加的外部（link），一般就近原则

内联 > 内部（@import无论先后都比其他内部优先级低，但是比外部大） > 外部（第一章博客的csdn的第45章博客有具体说明）

在后面说明优先级时还会具体的说明

<style>
      p {
        font-size: 20px; /*字体大小：默认是16，可以是2em，代表默认大小的2倍，最小是12px，如果比12px小，那么会默认设置为12px，可以自己测试，12代表最终的贴合，16是保证文字的中间大小，12则是文字最小的大小，一般是参照字母的
  一般字体大小，通常只是基线到基线的距离，而基线位置并不代表字体本身的处理，字体通常由设计师定义，设计字体时，设计师会确定每个字符的垂直高度和水平宽度，在 Unicode 中，字符的垂直高度可以有所不同，因此同样的字体大小可能不会产生相同高度的所有字符，且在标准的 CSS 中，没有直接设置字体宽度的属性，通常数字的字体宽度在16px下为12px宽或者8px宽（或者在他们之间），其他的具体可以百度
*/
        font-weight: 700; /*字体粗细：normal和400是正常（默认，除了自带的样式，如h1），bold和700是加粗，一般大多数字体都可以操作，可能有些不可以*/
      }
      h1 {
        font-weight: 400; /*h1标签不加粗了，也就是说标签默认的样式优先级是很低的，一般是最低的（但还有继承），虽然他不能修改，就如基础代码不能修改一样*/
        font-style: italic; /*字体本身样式，normal正常（默认的），italic倾斜(相当于是对应i标签的样式)*/
      
      }
      i {
        font-style: normal;
      }
      div{
        font-size: 2em;
          /*一般需要考虑先后，否则可能不会处理，即到sans-serif直接的结尾了*/
        font-family: 宋体,微软雅黑,sans-serif; /*字体显示样式，如什么微软雅黑等等
        windows：默认微软雅黑，macos：默认苹方，其中我们可以通过","来进行分割，并且从左往右找，找到就选择，都没有找到，那么操作默认
        一般来说规整的我们称为无衬线字体（sans-serif），如微软雅黑，一般给网页，有锋芒的则是衬线字体（serif），如宋体，一般给报刊书籍，还有等宽字体（monospace），就是每个字母或者文字都是相同的宽度，一般来显示代码
        现在我们来进行解释：如果宋体不存在，那么使用微软雅黑，如果微软雅黑不存在，那么使用sans-serif对应的默认字体（那么可能就不是微软雅黑了，因为可能是其他系列，只是windows默认是该系列的微软雅黑），而不写该sans-serif，默认微软雅黑，或者苹方（macos）
        */
      }
    </style>
    <p>好</p>
    <h1>2</h1>
    <i>2</i><!--倾斜样式-->
    <div>宋</div>

这里说明前面的"相同的样式只看样式的顺序（覆盖的，自然也包括里面的，这里在后面会说明）"

 <style>
      p {
        color: red;
        color: blue; /*覆盖，包括里面的*/ 
      }
      div {
        color: blue;
      }
      div { /*可以写相同的，因为操作覆盖*/
        color: red; /*覆盖*/ 
          /*若是不相同的，那么相当于进行补充，即两个样式合并之后的操作，当然，在没有某些关联的情况下，从上到下的操作是正确的*/
      }
    </style>
    <p>1</p><!--覆盖所以是蓝-->
    <div>2</div> <!--覆盖所以是红-->

<!--覆盖是覆盖相同操作的，这里要格外注意，要不然怎么叫覆盖呢-->

<!--font (复合属性)
  font:style weight size family;
只能省略前两个，如果省略了相当于设置了默认值，若省略多个或者多写几个（超过4个，如5个），那么该样式相当于没有写，即不会起作用，大多数（是否有少数，具体可以百度）不是js的基本不会显示出错误信息，或者说不操作错误信息，即基本不会对错误规范进行打印错误信息（只是给出不操作该样式的操作，而不是打印错误信息）
多点空格也没有问题，只要有空格即可，大多数直接的设置都是这样的，当然，属性设置是这样的（可能也有特殊，具体可以百度），但是显示不一定，一般只代表一个空格，除了某些特殊的显示，如文本域textarea标签里面的显示

最后：解释上面的"那么该样式相当于没有写"，解释如下：一般css语法错误，或者不存在对应的值（比如没有redd这个颜色），或者说不识别（如颜色中#888888，只写888888，不识别，而不是不存在，一般我们也会称他为不存在），只是代表样式不操作，当出现;时（一般来说，如果对应的一行没有加，那么默认加上;，当然，在加上之前，会判断一直找到;，那么中间的都加上删除线，这里我们在后面给出），那么之前的都会删除掉（;分割的，并不是全部前面的都删除，因为前面也是有;），继续后面的操作，一般错误在元素中（一般指右边的样式）会由删除线来进行操作的，自己可以选择看看

这里我们在后面给出（这里的案例）
 div{
        dl dd
        text-align: center;
    }
都加上删除线，如果dl dd;，那么第二个不会（在博客园中，这里的换行一般并不是空格，难以复现（比如全局搜索，所以尽量不要改动，保存的副本文件））

当然，一般style只需要对应就会进行操作，这也使得某些错误会很奇怪，当然，html一般会进行补全
比如：
 #b {
      }
        color: red;
      }
会变成
 #b {
      }
        color: red;
当然，还有很多情况，但是这些情况是我们不够规范使得浏览器补全（虽然说补全，但是有些情况是矫正，但是矫正并非一定是加上，还可以是减去）导致的，这种问题有很多，且浏览器的补全与浏览器相关，所以通常不做说明，自己去百度吧，这些错误大多会造成一些样式不进行处理，如  
}
      #b {
        color: red;
      }
可以认为他的内容就是 
#b {
        color: red;
自然识别不了
  -->
    <style>
      p {
        font-style: italic;
        font-weight: 700;
        font-size: 50px;
        font-family: 宋体;
      }
      div {
        font: italic 700 50px 宋体;
      }
    </style>
    <p>和</p>
    <div>和</div>

  <!--font (复合属性)
  font:style weight size family;
只能省略前两个，如果省略了相当于设置了默认值，一般顺序要对，否则可能不会操作

  -->
    <style>
      p {
         
        font-style: normal;
        font-weight: 400;
           /*上面两个操作默认的，若操作三个，那么第一个是font-weight*/
        font-size: 50px;
        font-family: 宋体;
      }
      div {
        font: 50px 宋体;
      }
    </style>
    <p>和</p>
    <div>和</div>

当然，根据顺序，可以进行覆盖对应的样式，或者被覆盖，一般来说该覆盖是覆盖相同操作的样式的，可以自己测试

 <style>
      div {
        text-indent: 1em; 
        /*text-indent：文本缩进（可以认为是在原来的基础上整体（text一般代表内容整体，简称文本，包括文字，图片等等，只要在他里面都算，当然整体自然与内容无关的，因为我缩进多少，就是多少，不会使得内容的变化而改变）左右移动，但一般从首行开始，可以认为前面有对应大小的占领）
        文本代表当前的所有的字体，即整体的字体，可以取1em，代表一个字体大小的数据，一般来解决我们手动设置字体大小时的自动改变，即不用手动改变了
        所以一般情况下，我们都会使用em，除了指定的缩进
        */
        font-size: 20px;
      }
      p {
        text-indent: -20px; /*可以是负数，大多数的大小问题，负数都会相当于默认值，比如字体大小，但是距离可不是*/
        font-size: 20px;
      }
    </style>
    <div>呵呵呵呵</div>
    <p>呵呵呵呵</p>

    <style>
      h1 {
        text-align: left;
      }
      h2 {
        font-size: 10px;
        text-align: center; /*文本居中，相当于在所在父元素的中间（具体的父是当前所在的，因为继承的原因，所以是可以得到的（注意了，标签的属性作用于其他标签的前提必然是继承的关系，否则是独立的，如字体大小或者字体颜色等等，但是继承的样式也是有限的，只有部分是，再后面会说明的）），注意是所在哦，他是被继承的操作的，只是有些会继承而已，要不然有些标签的设置如display就乱了*/
      }
      body {
        font-size: 100px; /*样式会穿透，也就是说，只要你这个字体在该标签下，那么无论是否在标签下的其他标签下，我都会操作，除非你的标签也设置了（就近原则），前面的style的优先级也是一个就近原则*/
        text-align: right;
      }
        
        /*text-align：整体文本在该标签中的所有位置的相对位置，注意：整体文本由于可能与窗口相适应，那么对应的位置可能也会有所改变*/
    </style>
    <h1>哈哈</h1>
    <h2>哈哈</h2>
    <h3>哈哈</h3>
<!--可以操作body，但是h1等等是占用一行的，即都会铺满，设置不设置都没有意义，且可以操作其里面的，也就是说，如果你没有自身进行设置，那么外面的会进行给你设置（样式设置会穿透的，这里要注意，可以自己设置字体大小来进行操作就知道了），如上面的h3就是操作body的-->

   <style>
      /*text-decoration：文本修饰
      underline：下划线
      line-through：删除线
      overline：上划线
      none：没有装饰
       很明显，他只是装饰，一般装饰只是对该文本加上某些东西，如"线"等等，而没有装饰他们也就没有，当然，这些东西并不是包括什么的如颜色，字体大小等等的操作，可以认为他基本只是在外部的装饰，而不是内部
      
      */
      p {
        text-decoration: underline;
      }
      div {
        text-decoration: line-through;
      }
      h1 {
        text-decoration: overline;
      }
       .a {
        text-decoration: overline;
      }
      #a{
        text-decoration: line-through;
      }
      i {
        text-decoration: none;
      }
      u{
        text-decoration: none;
      }
      a{
        text-decoration: none;
      }
       /*
       decoration：英文意思是：装饰
       */
    
     
    </style>

    <p>haha</p>
    <div>haha</div>
    <h1>haha</h1>
    <i>haha</i>
    <i class="a" id="a">haha</i><!--id>class>直接的i-->
    <u>haha</u> <!--自带下划线的，标签默认优先级最低，所以style起作用，这里也可以知道，大多数的样式基本都是一样的，并没有什么特殊的操作，因为基础代码一样，或者说，上层操作一样，即默认操作了text-decoration或者他的基础代码，可以在元素中查看，可以发现，他的确默认text-decoration的underline，即样式基本都是一样，只是默认的在元素的显示可能会特殊一点，这是浏览器的作用吧-->
    <a href="#">和</a>

   <style>
    p{
     /*line-height：行高，与边距是不同的，他代表整体显示的高度变化（即他是真正的高度），具体可以选择加上颜色即可，你就能明白与margin的区别了，注意是显示
     也就是说，原本的行高可以认为与字体高度一样（如果不包括间距的话），并且在换行后也会进行翻倍
     当然他可能并不是，只是一个比例而已，但基本包括了宽度和高度的说明（因为原来的信息是相同大小的代码内容，所以一般字体宽高都是16px），而正是如此，如果设置了0px，说明与div的16px相同的（距离）
     这是因为，字体的起始位置是跟着对应行高的位置来改变（且自然使得其他对应的标签换行的位置就比较靠上），当行高为0时，说明他们之间的距离就是边距大小了，也就是16（注意，如果我与你的下边距是16，那么你与我的上边距自然也是16，他们都只是代表距离，但是若其他一个比较大，那么按照大的来）
     所以说，对应的行高就是16了，所以如果div设置的是16px，那么与两个p标签（opx）之间和两个div标签（16px）之间他们的距离就是相同
     */
     line-height:0px; 
        
        
        /*注意：在一个元素中，若手动在前端进行设置对应显示行高的地方（不是改变样式的），并不是代表设置行高，而是代表设置他自身高度，及行高基本不能被手动设置，但是随着版本的改变，以后可能会有所不同*/
     
    }
    div{
      line-height:16px; /*行高可以设置为1（没有单位），代表默认字体大小的行高（因为他代表倍数，即1倍字体大小）*/ 
    
    
    }
    </style>

    <p>哈哈</p><!--p就有默认的边距，div没有，一般如果没有设置行高的话，行高的默认大小与字体大小有关，通常10px大小，行高是15.778px的行高，而20px就是26.444px大小（对应的结果，可以到浏览器元素中查看），也就是说，他可能是某一种计算（可能不同的浏览器或者浏览器版本计算结果不同，因为可能计算方式不同），所以默认的行高基本不能确定，一般多出来的，就是字体的上下间距，不同字体大小有不同的间距，也就计算方式得到的间距（他就是计算方式操作的主体），一般来说是因为行高默认是normal，才导致的计算方式，具体的直接值，自然就是该值了，也就没有什么计算方式操作了，一般来说行内在元素中看不到行高，虽然行高是操作的-->
    <p>哈哈</p>
    <div>哈哈</div>
    <div>哈哈</div>

<!--注意：这里边框是没有颜色和大小的（没有边框，那么边界就是边框），并不代表他不存在，在元素中，可以看到对应的值的，看如下图：-->


<!--实际上很多标签可能存在小数的操作，比如行高的1和1.1是不同的，具体可以选择到这个博客查看：https://blog.csdn.net/qq_59609098/article/details/123475749，里面记录了对应属性的可以写的所有情况，当然，可能也会漏写或者有些问题，你参照就行了-->

65.467是宽度，0是高度（行高就是最终的高度，即他就是行高）

右边就是一个标签的所有信息，也就是说，他由多个信息组成，对应的颜色或者大小我们只是没有设置而已，所以上面执行，什么都没有，就算加上图片颜色也没有用，即基本都不会进行显示，所以说，如果对一个属性设置1px，那么行高除外，其他的基本都会存在左右或者上下总共的2px

这里要注意：一般默认的样式我们不能通过元素来进行改变（可能通过某些操作可以，比如修改浏览器源码，手动滑稽🤭），基本只有自己写的样式才可，可以自己测试，所以像p标签这样的，有默认边距的，通常需要我们自己进行操作解决（因为默认的样式优先级基本是最低的）

这里给出上下间距的图：

也就是说，一个字的真正高度就是对应的间距和字的高度组成的，简称为行高（真正的高度是行高）

简单来说，行高代表一个标签中默认显示的地方，一个字体或者其他标签信息写上时，会根据字体或者其他标签来进行默认操作，前提是没有设置行高，当然，一般以字体大小为主，因为字体大小的设置会改变行高（其他的元素不会，如图片），就算是没有文字也是一样的（设置图片就知道了）

说了这么多，实际上行高就可以这样的说明，就是代表显示的高度，且从标签内容左上角开始（显示是这样的），既然是显示，那么并不会绝对比父元素的高度小，可以大的

但也要注意：行高不只是操作字体，只要是内容都会操作（只是有些内容所操作的地方不同而已，比如图片以最下面为主，在后面的"这里给出一个关于图片的操作"有例子，虽然是基线的操作，后面会说明的），因为上面是文本高度，而不是字体高度，也就是说，一个文本实际上占的高度是行高，只是包括文本高度而已，但是也要注意：对与元素来说，行高可能并不操作，注意即可，图片虽然也是元素，但是确通常属于内容，可以认为有些是响应行高，有些不是

<style>
   
      div{
          /*不要错误了，记得加上/，代表font:style weight size/line-height family;*/
        font: italic 700 20px/16px 宋体;
        line-height:16px; 
      
      }
      </style>
  

      <div>哈哈</div>
      <div>哈哈</div>

  <style>
      div {
        /*color：字体颜色，background-color：背景颜色
   
   */
        color: red;
        background-color: green;
      }
      p {
        background-color: rgb(0,0,0); /*红，绿，蓝的三原色（red，green，blue），每个都是0-255，包括0和255，如果小于0，默认为0，大于255默认255*/
        color: rgb(0, 0, 255);
      }
      h1 {
        background-color: rgb(0,0, 0, 0.5); /*第四个就是透明度，0-1包括0和1，小于0默认为0，大于1默认为1
          可以去掉前面的0，如0.5可以写成.5（底层字符串判断是否加上，最终还是加上的，当然，如果出现某些不能识别的数，自然不会起作用，加上删除线，一般加上删除线不操作覆盖）
          
          要记得：透明颜色会穿透的（观察导致的穿透关系）
          */
        color: rgb(0, 0, 255, 0.4); /*一般透明值越大越显示，如果没有设置透明，那么就是对应的颜色最大显示，可以认为就是1*/
      }
      h2 {
        background-color: #000000; /*将数字变成16进制，以#为标志开头（否则自然不识别，也就出现错误），总共6个数，对应三原色是00-FF，00-FF，00-FF，0-F代表0-16（不包括10），所以加起来是16个数，而0-255代表256，且是16*16=256，所以都可以进行包括*/
        color: #00eeff; /*字母可以大小写，并且，如果是00，即两个相同的，可以进行省略*/
        /*color: #00eeFf，可以变成0eFf，也可以是0ef，但不能是0eeFf，即最少是两个的省略，最多三个（因为最多也只有三个）*/
      }
    </style>

    <div>哈哈</div>
    <p>哈哈</p>
    <h1>哈哈</h1>
    <h2>哈哈</h2>
<!--注意：三原色的配置，排列组合非常多，实际上并不需要记住对应的什么颜色（虽然也基本记不住），大多数情况下，我们可以直接操作提示来进行选择即可，如果没有提示，可以百度查看颜色表来进行获取，即可以看看这个博客：https://blog.csdn.net/homeweek/article/details/123230594
-->

    <style>
     div{
      background-color: red;
      width: 200px;
      height: 300px;
      /* text-align: center; 文本居中 */
      /*边距居中，这里我们来通过改变边距使得达到居中水平（一般只是代表左右，而不是上下），由于只是改变边距，那么自然不会影响内容*/
         /*大多数居中都是水平的，因为这是符合正常显示的，所以说大多数是*/
      margin: 0 auto;/*margin边距（一般指外边距）的修改*/
      /*
         
         
         
         margin-，后面加
    top上外边距
    right右外边距
    bottom下外边距
    left左外边距
    margin：10px表示四个方向的外边距为10px
    对于margin是优先考虑左外边距和上外边距的，即无论右外边距和下外边距有多大，都要先满足左外边距和上外边距
         但是margin存在问题，他的右下一般是将对方进行撑开，而不是他自己远离，这一般是考虑解决会离开内容的原因吧（但是若对方是不动的，那么他自己会移动，比如对方就是边界（若自身也在边界，那么都不移动），否则他会直接换行，那么这个时候无论你怎么增加都没有用了）
    总体来说：
     margin可以分开写，写成：
    四个表示：上，右，下，左
    三个表示：上，右左，下
    二个表示：上下，右左
    存在右左的都可以使用auto来代替，否则对应不操作，即相当于为0
    auto代表到中间的信息，所以0 auto，代表右左趋向于中间的右左边距，且只会代表左右，所以无论是两个还是一个都是如此
         margin在多个元素之间符合最大者元素（这是因为其中一方无论是否操作都无用，这里特别要注意：一般只是存在上下中才会有，左右一般是合并，所以左右一般不符合最大者元素的处理，这里说明的都是上下的处理，所以注意即可），如果我的下边距是10px，你的上边距是20px，那么我们之间的距离就是20px，在某些时刻，浏览器可能是这样操作的：相同，那么就都进行操作，不同级，子先操作，父后操作，对于同级，左上元素先操作，然后右下元素再操作（只是不会动而已，相等才会这样的，所以要注意），虽然相同随便取都行，但是我们二进制是必须进行操作的，但他这里并不是拿取一个的，而是都操作，若是不相同，那么小的先操作，大的后操作（出现大的），若两边都是块级，那么赋值给对方（触发条件，一般大给小，相同默认子给父），如将a的值赋值给b，那么a先操作，b后操作，若一开始相等，不同级，子先操作，父后操作，同级，那么左上元素先操作，然后右下元素再操作，这也是为什么后面的两个块级元素中，子元素的margin会操作父元素的原因
         
         那么二进制为什么不拿取一个呢，实际上现在一般是这样操作的了（但为了逻辑的说明，我们就考虑上面的情况），除了块级元素的判断，他在父子之间都会操作并赋值外，其他的是判断直接拿取最大的使用，但对于相同来说，还是不变的，但是只会取其中一个（只是针对同级，即取左上）
         
         一般来说，浏览器读取auto是将当前窗口总长（一般指body，但body是block，所以一般就是html的宽了），减去当前元素宽（如果是行内，没有宽，那么不操作，相当于对应标签都不起作用），然后除以2，进行左右外边距的距离（并且优先级是对应的元素的优先级，这是自然的，你是类，那么我自然也是类，你是id，我也自然是id），第一个auto默认0，一个auto默认0 auto
通过上面的说明，我们知道，如果宽为100%，那么什么距离都没有，因为0/2=0，即0距离，也就是没有距离
         当然，大多数的距离是可以存在小数的，但是位数有限（随浏览器），当然，有些的显示处理可能是存在最小的，所以会存在补全（比如表格），这些了解即可
    */
    
     }
    </style>

    <div>哈哈</div>
  <!--前面说明的边距都是外边距，这里要注意，我们一般将外边距简称为边距的
要注意：上下边距和特殊值（如auto）一般只对块级（包括行内块）元素有效（所以行内操作不了上下边距，以及auto等等，其中auto则必须要宽度（或者说宽度属性不能是0），否则不操作，无论是否是块级），比如div，你可以改变成span就知道了，这是基础代码要操作的，这是防止不是一行的到其他行了，不够整齐，所以防止这样的情况，那么直接的不给他起作用，但也可以设置成块级（包括行内块，一般块级就是块级，而不是行内块，除非有指定的说明，如这里的（包括行内块）），即还是给出了这样的操作方式，只是默认不行而已
-->



<!--margin是可以存在负数的，padding则不能，margin的操作是建立在先后的以及互相赋值，但是当负数存在时，就不会这样的考虑，而是都看先后且不考虑最大者，如当出现如下时：
<style>
    .a{
      margin-bottom: 20px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .b{
      margin-top: -20px;
      width: 100px;
      height: 100px;
      background-color: black;
    }
   </style>
    <div class="a"></div>
    <div class="b"></div>

由于a先操作，那么首先a下面与b元素离开20px，然后b向上移动-20px，这个时候看起来是没有移动一样的
-->

<style>
      div {
        width: 100px;
        height: 100px;
        background-color: white;
      }
    </style>
    <div>
      <hr /> <!--父元素的一行-->
    </div>
    <hr />

<style>
      div p {
        color: red;
      }
    </style>
    <p>2</p>
    <div>
      <p>3</p>
    </div>
    <p>1</p>

<!--再来一个案例-->
 <style>
      div .b {
        color: red;
      }
    </style>
    <p class="b">2</p>
    <div class="a">
      <p class="b">3</p>
    </div>
    <p>1</p>

 <style>
      div>a {
        color: red;
      }
    </style>
    <div>
      <a>1</a>
      <p>
        <a>2</a>
      </p>
    </div>
<!--如果操作div a，那么两个a的颜色都会变，他代表内部所有，而>代表下一个，而不是内部所有-->
<!--这里要说明一下，a标签默认颜色是rgb(85, 26, 139)，前提是存在href（无论是否有属性值，只要存在即可，虽然默认是""，即会刷新当前页面，点击后，默认为红色，而要可以点击，前提是有href，才可以点击，且有个显示小手哦（前提是有href）），否则没有默认颜色的设置-->

  <style>
div,p{
      color: red;
    }
    </style>
    <div>1</div>
    <p>1</p>
<!--大多数可以通过空格隔开，比如div     d，div    >    j，div    ,   j，这样的都可以，空格并不会影响样式的设置，包括属性的设置，这些细节并不需要了解，因为大多数读取属性的，基本会去掉对应的空格，或者只会识别一个（前提是没有,和>）-->

<style>
      p.a { /*中间加上其他的，如空格，那么就是其他的说明了（后代），所以这里要注意不加*/
        color: red;
      }
      p.a#b {
        color: blue;
      }
    </style>
    <p class="a">1</p>
    <p class="a" id="b">1</p>
    <p>2</p>
    <div class="a">3</div>
    <div class="a" id="b">3</div>

<!--也就是将选择器进行连着写，记得是基本的选择器哦，且不要有其他要求，就比如.ap，是操作ap，而不是.a，p，所以一般是需要规范的，而class和id可以交替选择-->

<style>
      /* 未点击 
      :link向未被访问的链接添加样式
      这里只作用与链接，如a标签，即也要是链接（比如改成div，那么这里就不会操作了，因为他说明了是向未被访问的"链接"添加样式）
      */
      a:link {
        color: darkgreen;
      }
      /* 悬停 
      鼠标在上面悬停，即就放在上面不操作
      :hover当鼠标悬浮在元素上方时，向元素添加样式
      */
      a:hover {
        font-size: 30px;
      }
      /* 访问过，且默认颜色为深紫色
      根据浏览器的上面存留的页面
      只要经过该地址（与href关联的访问的，所以如果是#，那么就是当前路径加上#的地址），如只要你在浏览器上有经过该网址的记录就会是访问过
      可以进行清除缓存，使得访问过的记录清除，那么就会变成没有访问过了
      注意：最好清除所有时间的记录，因为只要有历史记录，就会是访问过
      若href(地址)为空（""），那么无论是否清除缓存，都一定是访问过（因为link对空的不生效，这时默认为visited的样式）
       :visited向已被访问的链接添加样式
       即也要是链接（比如改成div，那么这里就不会操作了，因为他说明了是向已被访问的"链接"添加样式）
      */
      a:visited{
          color:red;
      }
      /* 激活：（点住，别松手）
      :active向被激活的元素添加样式
      */
      a:active{
          color:chocolate;
      }
    </style>
  
      <a href="#">哈哈哈</a>

<!--实际上这里还有一个细节：具体可以看这个博客：https://blog.csdn.net/qq_59609098/article/details/123475749，说明了对应的顺序问题（嘿嘿）-->

我们可以操作简写的代码，在vscode中可以这样写：

自己来测试吧

<!--还有一个，a{$}，其中$代表自增内容（从1开始，当然写成1也行，只是不自增），自己测试，所以可以这样ul>li{$}*3-->

  <style>
      div{
        background-color: rgb(0, 0, 0,.5);
      }
    </style>
    <div>a</div> <!--默认的，若不加上background-color的属性，大多数标签他的值就是rgb(0,0, 0, 0);，可能在以后，有些标签底层基础代码会有默认添加
注意：并非所有的属性会在前端样式里进行显示，要不然，一个元素的属性可是非常多的，就如字体默认大小就没有显示出来
-->

  <style>
      div {
        width: 1000px;
        height: 1000px;
        background-image: url(./3.jpg);
          /*也可以background-image: url('./3.jpg');
          路径也可以是远程的哦，因为反正都是字节的流程操作，但凡是这样的，都可以，虽然大多数都是这样
          */
      }
    </style>
    <div>ee</div>

 <style>
      div {
        width: 1000px;
        height: 1000px;
        background-image: url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..");
      }
    </style>
    <div>ee</div>

<!--上面的图片中一个div里面竟然有多个图片，这是因为图片默认是全部填满的（该默认样式，在样式中找不到哦，不显示）-->

   <style>
      div {
        background-color: red;
        width: 1000px;
        height: 1000px;
        /*图片一般压颜色一头*/
        background-image: url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..");
       /* background-repeat默认值为repeat，上下左右都铺满，no-repeat不进行铺，*/
       /* background-repeat:repeat-x;只在左右铺
       background-repeat:repeat-y;只在上下铺 */
       background-repeat: no-repeat;
    }
    </style>
    <div>ee</div>  
<!--一般情况下，我们都会设置no-repeat，来使得不会出现多余的图片-->

   <style>
      div {
        background-color: red;
        width: 1000px;
        height: 1000px;
        /*图片一般压颜色一头*/
        background-image: url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA.."); /*一般可以不加引号*/
       background-repeat:no-repeat;
       /*在css注释中，若对应的内容是一个正确的内容（这里考虑覆盖），在前端显示时，只会显示删除线，而不是没有或者说不识别*/
       /* background-position: 0 10px;*/
       /*background-position代表位置，0 0 为默认值（大多数默认值，在浏览器（前端）样式里不会显示哦，代表所在元素的左上角）
       第一个参数是左右的位置，第二个是上下的位置，可以设置负数，但是超出的（受铺的影响）一般会直接的去除，或者被覆盖（一般是去除，大多数都是这样（因为你是在盒子里面的），可以使得浏览器没有在隐藏部分有多余的信息，当然，可能版本的不同，这里也是覆盖，了解即可）
       */
       background-position: 1px 1px; /*0可以不加px（大多数标签都是这样的，如后面的padding），其他的需要，否则报错，大多数都是如此，比如这里的width就可以直接写0，而不加px，使得不会操作，而不会操作（识别，报错）那么就不会覆盖*/
          /*正数对应于右，下，负数则相反*/
       background-position: right bottom; /*可以使用特殊属性，具体百度即可（比如还存在center，即background-position: center bottom;，到左右中间的底），这个特殊的属性有特别的效果，比如right代表将图片右边框框到最右边，所以说，没有超过（这里是小于等于），那么向右移动当前父宽减我框，超过了（大于），那么向左移动我宽减父宽，即这样的考虑方式，具体可以自己测试来体会*/
    
    /*position单独写一个，相当于垂直居中，但是水平为写的这个数据*/
    }
    </style>
    <div>ee</div>   
<!--这里要注意一下，他的这个铺满，由于一般是覆盖的，那么对于真的铺满来说，少的部分从左到右开始最终的显示的，具体可以自己运行就知道了-->

<!--大多数css样式中，并不能操作计算方式（大多数不会识别，不识别通常加上删除线），注意即可，且背景并不覆盖文字，因为他是背景

一般来说我没有背景，那么就是父元素的背景（并不是继承关系，某些样式只是具有穿透，即覆盖的，我没有自然没有覆盖，或者说这是显示的继承，相当于两面墙，其中一个倒了你看到了另外一面墙，所以图个图片中存在间隙，那么就会显示背景颜色，这个间隙通常代表空白颜色，或者就是空的（一般是这个，你认为用线画出的正方形，中间算背景吗，他就是空的，所以被背景颜色来显示），所以在有些时候，背景颜色也存在默认，即body的默认背景，即rgba(0, 0, 0, 0)，无色（无色一般是没有透明的，所以一般会被穿透），一般也不是write，只是白色与无色类似或者相同而已，所以说成白色也行（反正颜色对前端重要性并不是很大，类似就行），rgb和rgba默认透明是1的，只是rgba可以设置而已，当然，随着时间的推移rgb也可以设置的，在前面就操作过了，但是实际上rgb之所以可能操作透明，是因为现在的对应属性的原因，这里给到后面说明），好像显示的继承和继承看起来都是继承关系，但是显示的继承和继承是有区别的，其中是观察导致的（计算机模拟人为观察），另外一种是样式导致的（父元素样式并不能操作子元素，只是因为继承关系可以操作而已），而观察导致的就是穿透关系（上面的墙的例子），他们的体现是不同的
还有，最主要的区别就是，样式的存在，js可以得到继承样式，而观察导致的是什么都没有的

实际上穿透的最终效果是由硬件来完成的，所以这里了解即可

简单来说默认透明度是1（除了自身已经默认操作的，如body为0），其中rgba和rgb都可而已设置或者不设置，而rgb的设置需要存在某些条件而已

这里说明rgb为什么有时可以操作透明的原因：
在 CSS 中，rgb() 函数用于表示颜色的红、绿、蓝三个通道的数值，但它本身并不直接包含透明度信息，透明度通常使用 rgba() 函数来表示
然而，对于某些 CSS 属性，比如 background-color、border-color、color 等，它们可以接受 rgb() 函数的返回值作为参数，并且可以通过其他方式来指定透明度，这是因为这些属性具有透明度的上下文语义
当将一个带有透明度的 rgb() 值应用到具有透明度上下文的属性时，实际上是将透明度信息应用到属性的透明度上，这种情况下，CSS 会根据 rgb() 的透明度值来决定最终的透明度
例如，当将 rgb(255, 0, 0, 0.5) 应用到 background-color 属性时，实际上是将红色的透明度设置为 0.5，从而让背景色半透明显示
总结起来，虽然 rgb() 函数本身不直接包含透明度信息，但在某些具有透明度上下文的 CSS 属性中，可以使用 rgb() 的返回值来指定颜色和透明度，即底层存在拿取对应整个参数的值进行操作（那么可以认为对应属性存在使用rgb的四个参数的操作方法，但是里面一般都是操作rgba的，当然，参数过多一般会导致加上删除线的，或者没有对应方法也会加上删除线，这也是为什么样式值不能随便写的原因，值是可以执行，或者考虑使用，所以存在值和方法的并存）
所以总体来说，是因为随着时间的推移，对应的方法完善，所以rgb存在操作透明度的情况了，在某些版本可能是不存在的（通常是老的版本，具体可以百度），现在通常存在

但是由于rgb四个参数中也通常是rgba，所以在操作透明时，建议操作rgba，这样可以提高一点性能，而不用一些其他操作，如判断是否可以接受他rgb来操作
-->

  <style>
      div {
        background-color: red;
        background-repeat: no-repeat;
        width: 1000px;
        height: 1000px;
        /*background:color image repeat position
*/

        /* background:url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..");
       */
        /* background:url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..") no-repeat; */
        /*
          
          如果设置了background，那么会清除之前的background属性，包括加上-的*/
        background: red
          url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..")
          no-repeat 20px 20px;
        /*位置不做要求（除了position的格式，他对应的两个必须要一起（包括英文的，整体位置可以改变），否则加上删除线，不识别（语法错误），当然，可以交换顺序，只是数字默认为左边是左右，若使用英文，比如right bottom，或者bottom right，可以先读取垂直，浏览器可是很牛的），会自动识别的，因为参数都是一个规律（一般他的值或者就是值，互不干扰，所以可以）*/
        background: url("http://zuohaotu.com/Download/20233131018376283.jpg?_gl=1*18cuxlz*_ga*MTY4NzEzMDY0OC4xNjgxMzUyMzE4*_ga_ZN9652QSEY*MTY4MTM1MjMxOC4xLjAuMTY4MTM1MjMxOC4wLjAuMA..")
          no-repeat 20px 20px red gg;
          /*多写不识别，那么他自然加上删除线，也就不操作覆盖了，可以少，但不能多
          但是一般我们都会使用background:color image repeat position的格式
          */
      }
    </style>
    <div>ee</div>
    <!--这里要注意一下，他的这个铺满，由于一般是覆盖的，那么对于真的铺满来说，少的部分从左到右开始最终的显示的，具体可以自己运行就知道了-->
 
<!--大多数的背景都会将边框也进行覆盖，要不然怎么会说是背景呢，所以position的0 0都是覆盖边框的，即以真的边框为起点，反面的案例可以查看表格操作
实际上对于距离来说，边框是界限（因为他是覆盖，所以必然是他是界限），否则像什么高度什么的，都会加上边框，简单来说，边框也是一个标签的内容，所以加上边框时，是覆盖内容的，或者说对应的内容变成边框了，可以在后面操作border属性时刷新看看就知道了，所以说，当边框颜色与背景颜色相同时是没有什么变化的（内容会改变位置，因为起点变了，即是不包括边框的左上角）

背景图优先于背景颜色，所以背景覆盖了颜色
-->

<!--
img和div都可以操作对应的图，只是img偏向于原版的图片
简单来说，img相当于div加上了background-size来进行操作（ background-size: 100px 100px;，左边100代表宽度，右边代表高度，直接的一个100px，那么相当于宽高都是100px，这里是css，所以最好加上单位，虽然有些样式可以不加，但是基本是记不住的，知识是会遗忘的，所以具体了解即可）
但是img与div的重要区别就是img大小随着图片来变化，而div不会
所以大多数情况下，为了图片的显示完毕，或者细节问题的处理，我们都会使用img，所以img一般用于重要的图片显示


-->

<!--我们在前面学习一些标签时，有些标签会占一行有些不会，现在来说为什么，或者说他们默认的对应样式是什么
块级元素：
1：独占一行（一行只能显示一个），占用一行有特别的显示，当然，也只是限于当前，如果其真正所占位置还算，那么就存在，定位可以改变真正所占位置（虽然他是脱离的），所以对与占一行有移动的效果，虽然相对使得原来的位置也存在，真正所占位置也包括margin的（在真正里面，这样就需要考虑margin与定位的关系了，大多数定位错误基本都会与margin相关，这里了解即可），有些只是改变元素（所占）位置（不包括margin，如padding），并不是真正所占位置，所以要注意哦，有些是移动的，有些没有（不包括margin，相对定位一般就是，一般不包括margin，就是元素移动了，但是其元素占用位置并不移动，注意即可），因为元素的移动通常包括margin，简单来说，就是移动看看是否原来的位置还算吗，来决定margin是否移动，具体案例，可以参照相对和绝对
总结：一个元素存在如下：margin，元素占用位置，元素，其中元素和元素占用位置和margin一起称为真正的所占位置，而去掉margin只改变元素（改变元素一般会增大或者减少元素占用位置）称为所占位置，而由于相对定位的元素占用位置没有移动，所以margin并不是操作其元素移动的地方，而是元素占用位置的地方（且也考虑对方是否脱标，虽然对方无论是否脱都是一样的不获得），这与绝对是不同的
2：宽度默认是父元素（注意是父，父不同那么宽度自然不同）的宽度，高度默认由内容撑开（一般可以设置宽高的，那么就是固定，内容则会可以出界）
3：可以设置宽高，那么宽度就不会操作默认了
代表标签：div、p、h系列等等
我们在前端样式中查看div的属性，可以看到：display: block;，他就是代表操作块级元素
行内元素：
1：一行可以显示多个
2：宽度和高度默认由内容撑开（宽高与他们有关，一般是相同）
3：不可以设置宽高（那么不会受元素撑开使得有宽高，一般没有宽高的，是不会出现什么背景操作的，限制一处与限制的标签相关的操作基本也会受影响，如不操作，或者不显示），只是不能设置宽高而已，其他的一些如margin，border是可以设置的（虽然上下边距不能对行内操作高，算是display的限制问题），除了宽高，所以这里才会说他基本只是操作宽高的处理
代表标签：a、span 等等，一般在前端（直接的代理样式，一般只是部分重要的计算样式）我们通常看不到，但是看看计算样式（一般他代表所有的样式存放地方（可以选择全部显示），所有有些默认的可以在这里看到，但是有些还是不好的，比如background-position）就可以看到：display: inline;代表行内元素
我们自定义的标签中一般都默认是display: inline;
行内块元素：
1：一行可以显示多个
2：可以设置宽高（不独占一行，所以宽度不会默认是父元素）
代表标签：input、button等等，一般可以看到display: inline-block;代表行内块元素
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline，可以认为他的变化是因为图片的改变而形成的（对应的宽高样式并不作用与标签，而是图片），所以本质也是inline



上面说到了计算样式，实际上每个标签中，都有固定的计算样式，且他们都相同，一般单纯的自定义标签的计算样式固定，而又默认样式的都只是在这里的样式进行修改而已，如p标签margin是修改的，span也有margin只是为o，并不是代表他没有哦
所以这也是为什么js可以得到我们没有在css中设置的属性的原因，因为css设置的属性只是修改，而不是加上对应的样式

你认为其根据内容的宽高是什么值吗，答：都是0px，但是这里如果真的是0px，他又怎么自适应呢，所以肯定还存在其他变量进行操作，只是我们并不知道而已，这里给出说明实际上在你没有设置时，内部有个变量并不操作，使得你去计算样式查看时，他虽然显示的是0px，但是内部判断这个变量时，他会变成auto（代表自适应），auto对于宽高来说都是如此，也就是说，排版（任意的，如行内，块，行内块）基本都会这样（已经没有写对应的宽高的情况下，这里不考虑宽高，所以行内也在这里）

而由于是自适应，并且行高也存在，所以存在宽高有小数的操作，我们有时候为了对准，只需要取整即可，这些小数可以忽略，因为大致的观察是看不到了，并且，你设置的宽度可能也不会显示完全，如100.6显示100.594，这一般是浏览器内部的操作，具体为什么可能与显示的像素（电脑或者浏览器）有关，所以这里我们并不说明（一般是为了保证计算），如果非要了解，可以百度
-->

  <div></div>
<a></a>
<span></span>
 <input>

实际上标签就是一些给初始必须存在的基本样式（计算样式）以及容器下并加上其他样式（修改）的集合体，那么自然我们也可以通过样式来进行改变

所以说块级，行内，行内块也就是给出某些限制的样式而已，可以限制某些样式不起作用（而宽高自然也是使用样式来改变的，而限制了他们，自然不能操作宽高（前提该宽高是操作样式的，而不是内容，比如说img，他是inline，但是他可以设置宽高，因为他操作的是内容，而不是样式）），可以认为块级是初始的，那么block就没有限制

 <style>
    span{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
<span>22</span>

  <style>
    span{
      width: 100px;
      height: 100px;
      background-color: red;
      display: inline-block;
    }
  </style>
<span>22</span>

<!--我们可以进行转换，但一般这样操作的前提主要是由于对应的标签没有选择好，而进行的兜底的操作，因为对应的标签都存在相关的操作，按照规范我们基本都会使用正确，当然，有些情况下，我们一般并没有完全没有的行内块的基本标签，所以我们通常会将span的display修改成inline-block，因为他基本什么都没有，基本样式每个人都有的（基本代表计算样式里面的，比如h1标签，你不能直接看到他对应字体大小是多少，但是在该计算样式里面可以看到，一般是32px，要不然字怎么出现，基本样式不做考虑，所以这里考虑的是我们学习的基础样式，而不是基本样式，就如变成语言中的基础类型一样，基本每个程序都会操作，他们就是基本代码（对应于基本样式，基础代码对应与程序的底层开关），那么基础样式就相当于我们使用封装的代码，并且封装的代码中可能也进行了封装，标签是基本样式以及容器加上其他样式的集合体，一般这里只考虑我们学习的基础样式（其他样式），因为其他的基本样式以及容器所有标签都有，且一样），当然，也包括div-->


<!--当然他们最终是操作最底层的基础代码（只是说明而已，并不代表必须是基本的字面说明）
基础样式 基本样式，都可以统一用基础样式来表示
基本代码 基础代码，都可以统一用基本代码来表示
上下对应，虽然名称有点怪，当然，你也可以这样的认为将基础样式和基本样式进行互换也是可行的，所以这就是为什么上面说"只是说明而已，并不代表必须是基本的字面说明"，也就是说，这里并不需要记住名词，知道内容即可
-->

<!--注意：p标签不能嵌套div、p、h等块级元素，a标签不能嵌套a标签（想象一下确定可以套吗手动滑稽🤭，哪个a起作用呢），这是他们的规定-->

css存在继承属性（继承性），也就是说，父标签操作文字颜色，子标签可以得到，一般文字控制属性都可以继承（之所以这样的说明，是因为并不是所有的属性都会继承的）

<!--
常见的继承（其他的可以百度，一般对"字"进行操作的，基本都可以继承，其他的样式一般不能继承，具体需要看浏览器的处理，这是一个规定的）：
1:color
2:font-style、font-weight、font-size、font-family
3:text-indent、text-align
4:line-height
...


-->

我们可以通过检查来框框是否继承

看右边的显示颜色（和具体结果）我们可以发现，只有color继承了，但也要注意，若自身有对应的标签那么使用自身的，简单来说无论该自身通过什么方式来获得的，其中继承的优先级在某些情况下比默认的都低（这可能是因为底层判断的原因），这里要注意，如a标签，所以a标签的字体颜色不会改变（前提是设置了默认（颜色）（href的说明，前面提到过了）），但还要注意：a的继承虽然没有起作用，但是因为默认的存在，继承过来的是存在删除线的，但是还有例子，如果是font-size继承过来，他起作用的，但是他这个删除线还是加上的（操作h1标签），也就是说如果默认有对应元素，那么加上删除线，但是并不能保证他不会起作用（也是删除线的特例，可以使用变量判断来操作的），而正是因为font-size会操作，所以根据color以及font-size来说，即上面才会说继承的优先级在某些情况下比默认的都低（如a颜色），否则一般都是比较高的，因为a没有变，以及h1变了，所以默认也存在某些操作，可能这个默认是其他方面过来的（这里反正是浏览器的操作，我们记住即可，除非你可以去看浏览器的源码），所以a可以操作，这个时候可以认为继承还是比默认高的（认为从其他方面来，而不是默认）

css也存在层叠性，这里我们参照前面的覆盖说明即可，即"这里说明前面的"相同的样式只看样式的顺序（覆盖的，自然也包括里面的，这里在后面会说明）""这个地方，要注意：该性质一般是相同优先级才会出现的，因为不同优先级自然直接看优先级了，而不操作层叠性了

优先级：

在前面我们给出了一个优先级，但是只是一部分，现在我们来看看他的内容：

优先级公式：继承（默认一般比他继承要小，但是有些比继承大）< 通配符选择器（*） < 标签选择器（@import最低） < 类选择器（class） < id选择器（id） < 行内样式（标签里面的style） < !important

当然，任何优先级都会比计算样式高，包括默认

一般来说，继承是比默认小的，有些情况可能是因为浏览器做了多余的操作（如隐藏的标签选择器等等），使得看起来默认比继承大了，这里我们了解即可

注意点：

!important写在属性值的后面，分号的前面

!important不能提升继承的优先级，当对应的属性是继承的时候，那么对于继承者来说该!important相当于没有操作，而不是继承者则是操作的，标签因为不是他自己的，即对应的操作只是其父（继承的父的），且继承优先级最低

一般情况下，我们一般不会操作!important（除非你绝对确定他使用这个属性），且也要注意，加上了!important就不是一个优先级了，自然不会考虑层叠性（同一个优先级才会考虑层叠性，否则只考虑优先级）

实际上body也有属性，但要注意，他只是代表副本（点击即可，可以看成是html的副本，虽然不是），也就是说，并不会改变真的body（我这里的理解，若有误，可以忽略），可以看到他的显示一般以内容为主，无论如何设置都只是副本的显示（一般并没有什么作用），也就是说改变大小的设置基本是不会真的改变body的，而是副本，但是对应的父却是副本（对于大小来说），因为背景不受大小限制，所以body是特殊的

一般来说真正的body是html标签，只是大多数我们像上面这样说明而已，一般我们还是认为body就是body，所以上面的说明忽略就行，可以简单的认为窗口是body（所以放大放小，背景基本是没有变化的），而下拉框所出现的其他地方就是html了（包括body，具体体现在给body背景时，存在下拉框时，对应的地方没有背景），只不过你html属性还是为当前窗口里面的属性，而不是总体（谁说我设置一个属性他就一定是该值呢）

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个</title>
  </head>
  <body>
    <style>
      body {
        width: 100;
      }
      div {
        background-color: red;
      }
         html{
        width: 10px; /*并没有改变，当然，背景还是会变化的*/
      }
    </style>
    <div>a</div>
  </body>
</html>
<!--整个浏览器还是显示的，只是由于body的改变，对应的div变化的，所以真正的body是html，只是body存在html中
实际上并不需要这么复杂，只需要认为html的大小不会影响内容即可，body就是body，占用一行，看成一个总的div即可，所以上面的说明可以忽略
-->

  <style>
      body {
        color: aqua;
      }
      div {
        color: black;
      }
      div {
        color: red;
      }
      /*一般被覆盖的会加上删除线来提示他并没有操作（在检查中可以看到的）*/
    </style>
    <div style="color: blue">2</div> <!--行内-->

<style>
      .a > #f {
        color: red;
      }
      .b > #f {
        color: black; 
    
      }
    </style>
    <div>
      <div class="a b">
        <div id="f">33</div>
      </div>
    </div>

<style>
      .a.b.c { 
        color: black;
      }
      .a.b {
        color: red;
      }
    
    
   
    </style>
    <div>
      <div class="a b c d">
        <div id="f">33</div>
      </div>
    </div>

上面两种方式简单来说（实际上只要包含多个选择器的都算，如.a .b，中间有空格的操作样式也是算的，因为有多个选择器），就是先看最大优先级数量是否相等（为什么不看距离呢，实际上数量越多更加的精确，我们是需要精确的考虑，就如，有少数服从多数一样），以此类推，直到不相等为止，若都相等，那么看层叠性，否则多的覆盖少的，这里建议自己进行测试

    <style>
   
   #a{
    color: red !important;
   }
     div#a.a1{
      color: blue;
     }
    </style>
  <div id="a" class="a1">
    <div id="b" class="b1">
sss
    </div>
  </div>
<!--当都是继承，但是其中一个为!important，那么他是最大，无视数量，他是最大后，操作继承
简单来说，只有确定一个属性后，才会继续后续操作（继承，所以并不是先继承哦）
-->

    <style>
            div#a.a1{
          color: blue;
         }
       #a{
        color: red;
       }

        </style>
      <div id="a" class="a1">
        <div id="b" class="b1">
    sss
        </div>
      </div>
    <!--都是继承，说明是到一个地方，但是我们是要看数量的，就如其他的选择到一个地方也是看数量的-->

<!--当然继承与其他选择唯一的不同就是他的继承是连贯的，所以自然若是这样：
  <style>
      div#a.a1 {
        color: blue;
      }
      #b {
        color: red;
      }
    </style>
    <div id="a" class="a1">
      <div id="b" class="b1">
        <div class="2">2</div>
      </div>
    </div>

那么是red，因为2是继承上一个，而上一个自己变成了red，因为#b是对应的div不是继承的，即是比继承大的，只有选择好后，才会考虑继承，其中!important操作好后，考虑继承是不会拿取他的!important作为最大的优先级的，因为他不生效
-->

这里说明一下一个细节：

 <style>
      div div {
        color: red;
      }
    </style>
    <div>
      <div>
        <div>
          <div>1</div>
        </div>
      </div>
    </div>

我们知道他会找到1，那么是所有的对应的div div都会有其属性吗，答：是的，实际上由于顺序的原因，再浏览器读取html时，css实际上是最后读取的，虽然html是从上到下，但是再使用时css是保留最后使用（所以css的确是最后操作，相对于元素来说的），所以html的确是从上到下，但是使用并非是立即使用

但是这里还有个问题，如果css最后使用，那么上面的嵌套div都会进行操作，你可能会认为会浪费很多的性能，实际上并不会的，因为他是一个减1数列，而不是一个组合，因为从外到里的，所以性能还是好的

现在我们来下载一个东西，PxCook：

链接：https://pan.baidu.com/s/1zHneicPR7RH7LegjwHlZGQ

提取码：alsk

运行，自己操作进入后，若出现如下：

说明操作完成，然后点击创建项目，到如下：

点击创建本地项目，到如下：

看到这个我们选择拖进一个图片，然后双击图片，比如我到这里：

看到左边的尺子和一个类似的吸管没有，你试着用一用这些，其他选项自己测试

当然，上面还有个开发模式，其中设计模式一般看普通的图片，比如jpg，png，当然，任何图片基本都可以，而开发模式可以选择给某些图片进行特别的操作，比如psd后缀的，他这个设计模式就可以相当于网页上的标识显示，具体自己测试就知道了

比如：

如果是psd（一般是ps操作的），那么可以出现上面的情况，png等等图片不会出现哦

操作这个，我们就很容易的复刻对应的信息到网页上（大概即可，并不需要非常精确，如你量的时候是29px或者28px，你可以给30px），具体的作用可以自行体会

现在开始操作盒子模型：

  <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        /*边框大小10px，边框样式：solid，边框颜色：red*/
        border: 10px solid red; /*注意：一般情况下，1px，也未必是1px，这是因为他通常是操作默认的视口（固定），什么是视口，就是当前显示body包括的大小，你可以操作1vw来代替1px，然后改变窗口（挤压body也行）就知道了，并且操作多个结构，如边距，他们直接相加的结果也会操作视口，首先他们本身操作视口（这里的vw在后面会说明的，先了解即可），相加（原来的相加，而不是视口的相加，因为只是显示给我们看的）也操作
          由于默认视口基本固定，并且也是误差不大，所以我们忽略即可，实际上视口的细节问题与浏览器相关（可能可以使得没有误差，具体可以百度），但就算是有误差，一般也并不大，所以并不需要在意，所以我们就只看这里的css，因为他首先是css读取，最后统一视口操作的，所以并不会出现什么位置错误的
          */
        /*内边距的距离，也就是与边框的距离，如果没有边框，那么就是与边界的距离*/
        padding: 20px;
        margin: 50px;
        /*
在border后面加上：
top表示操作上边框
right表示操作右边框
botton表示操作下边框
left表示操作左边框
也可以分开：border-width，border-style，border-color，也可以其中一个border-right-color，border-bottom-style等等

          内边距一般是文本内容与当前内容对应边界的距离，所以看起来与边框的内部边框距离是一样的
padding:20px，就是四个方向的内边距，也可以分开，与前面说明的margin的分法一样
如padding-后面加
top上内边距
right右内边距
bottom下内边距
left左内边距
他会进行撑开，而不会优先考虑左和上的内边距，与margin是不同的

那么有个问题，对应的宽高代表什么，实际上只是代表内容（这是因为在前面我们基本都只是操作内容，而并没有操作边框，这样你可能会认为他不是是一个整体而非内容的，实际上是内容的），也就是说，或者说这就是为什么padding会看起来撑开的原因
所以border也会撑开，虽然是覆盖，但是也会导致整体变大，因为宽高是内容，这也是为什么大多数我们都会错误的这样认为边框不是覆盖的原因，因为在没有这个说明之前，我们都会以为是加上了边框，而不是覆盖，这样将内容作为宽高就完美的解释了
          
          若要确定是否边框是覆盖的，可以将solid（实线）修改成dashed（虚线）就知道了，但是若加上虚线的内容的话，那么对应的宽高不是变大的吗，实际上是没有的，边框里面的的确是覆盖，多余的是进行补充的，简单来说就是撑开，因为元素高度并不是内容宽高，只是没有其他属性时，就是内容宽高，所以上面才会说撑开（或者说扩展背景）
          一般撑开是起点不变的，即右下进行撑开
          
          padding:10px 10px 10px 10px，也就是padding:10px（设置顺序一般也是四值的顺序）
           padding可以分开写，写成：
 四个表示：上，右，下，左
 三个表示：上，右左，下
 二个表示：上下，右左
          margin:10px 10px 10px 10px，也就是margin:10px（设置顺序一般也是四值的顺序）
           margin也可以分开写，写成：
 四个表示：上，右，下，左
 三个表示：上，右左，下
 二个表示：上下，右左
          
          记得都要写px，否则不会操作（删除线）
          
          上面一般参照顺时针（4个），然后中间和右边考虑右左（或者说左右）（3个和2个）
          或者说顺时针看，若对应没有就看对面（一般我们用这个理解记忆）
          
          实际上对于撑开来说，基本只会往右下进行撑开，因为要保证原地（点）位置
  */
      }
    </style>
    <div>你好</div>
    <div>你好</div>

<style>
      .a{
        width: 300px;
        height: 300px;
        background-color: red;
      
        /*虚线*/
        border: 10px dashed #000; 
      }
      .b{
        width: 300px;
        height: 300px;
        background-color: red;
      
        /*点线*/
        border: 10px dotted #000; 
      }
    </style>
    <div class="a">你好</div>
    <div class="b">你好</div>
<!--对应的先后顺序一般也是不分的，与前面的background类似的说明，当然，无论是否顺序，都是浏览器规定判断的操作，我们记住并没有什么意义，因为他可以随时改变的-->

练练手：

  <style>
      div a:hover {
        color: blueviolet;
      }
      .a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        color: rosybrown;
        text-decoration: none /*最后一个可以不加;，默认判断最后一个数（空格（回车（也可以认为是换行）也算空格的，或者某些字符）一般不算）是否有;，没有，则默认加上;*/
      }
    </style>
    <div>
      <a class="a" href="#">嘿嘿</a>
    </div>

    <style>
      div {
        height: 100px;
        width: 100px;
        background-color: red;
        text-align: center;
        line-height: 100px;
        padding: 10px;
        padding: 10px 20px 30px 40px;
        /*注意：样式的覆盖是精确的，如果某个样式对一个地方操作设置，那么如果其他样式在后面时（可以考虑覆盖），只要也有一个地方也操作该位置的设置，就会被覆盖，否则不会
          1px距离就相当于一个像素距离，但是也会受硬件影响，大多数情况下1px代表一个像素，但是，在高清屏幕下可能代表多个像素，如像素也包括4个或者多个像素点，一般是4个（好像要少点），所以在高清屏幕下一般指1px代表多个像素点（像素），否则通常代表一个像素（像素点）
          */
      }
    </style>
    <div>嘿嘿</div>

<style>
      div a:hover {
        color: blueviolet;
      }
      .a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        color: rosybrown;
        text-decoration: none
      }
    </style>
    <div>
      <a class="a" href="#">嘿嘿</a>
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿</a>
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿嘿嘿嘿</a> <!--给出多个-->
    </div>

可以发现，当字数很多时，会导致显示出现问题，并且是由于行高的影响，所以并不会导致当前的div变高，只是字体出界了而已，注意：文本的出界代表文本不统一平齐（一般只有行内块元素或者行内会出现，块级由于换行的原因，所以不会考虑，简单来说存在宽高的会出现，本质是排版原因），如果不平齐，虽然不会改变原来的元素位置，但会导致其他元素排列出现问题，因为我们需要进行文本平齐，且由于基本是向下平齐，所以其他的元素先也不动，即也往下面走（向下平齐的，那么我也向下移动），并且与出界文本平齐了，只是这里的文本是字而已，但是这里还有一个问题，如果没有文字呢，那么就会出现元素本身的相对平齐，体现于假设一个元素高200，另外一个元素高100，那么另外一个元素在下面的100，而对与文本，则体现于在最下面，这也是为什么行高只是针对图片最下面的原因，归根结底，都是文档流的排列造成的

<style>
      div a:hover {
        color: blueviolet;
      }
      .a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
       
      }
    </style>
    <div>
<!--这里多出一个s-->
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿s</a> <!--给出多个-->
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</a> <!--给出多个-->
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</a> <!--给出多个-->
    </div>




<!--元素本身的相对平齐：-->
 <style>
      div a:hover {
        color: blueviolet;
      }
      .a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        color: rosybrown;
        text-decoration: none
      }
      #b {
        display: inline-block;
        width: 100px;
        height: 200px;
        background-color: red;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        color: rosybrown;
        text-decoration: none
      }
    </style>
    <div>
      <a class="a" href="#">2</a>
      <a class="a" href="#"></a>
      <a class="a" id="b" href="#"></a> <!--相对平齐-->
      2
    </div>

<!--实际上他们的平齐都是因为文档流的排列方式形成的，所以浮动不受这些影响-->

多出的s使得变成4行，那么其他元素对齐下面的三行，即向下了

很明显，上面不能满足多个数的情况，修改如下：

   <style>
      div a:hover {
        color: blueviolet;
      }
      .a {
        display: inline-block;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        color: rosybrown;
        text-decoration: none;
        padding: 0px 20px; /*单纯的去掉宽度，不好看，来点距离，0px自然没有距离了*/
          /*0可以不加px，前面说明过了*/
      }
    </style>
    <div>
      <a class="a" href="#">嘿嘿</a>
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿</a>
      <a class="a" href="#">嘿嘿嘿嘿嘿嘿嘿嘿嘿</a>
    </div>

<style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 40px;
        padding: 20px;
        border: 10px solid black;
        /*
      一般情况下，整个元素内容宽高变成了内容宽高+border宽高+padding宽高，即内容和元素内容是不同的概念，具体需要看当时的说明情况
      没有border宽高和padding宽高自然就是内容宽高
      一般情况下，我们会将内容宽高减去（border宽高+padding宽高），来使得最终的结果是我们设置的内容宽高（上面的width和height）
      但是这样是很麻烦的，所以一般情况下css会给出对应的解决方案（注意：不同版本的浏览器可能不会处理，比如比css3低点的版本（受浏览器的影响的，因为是浏览器来读取，所以浏览器也可以说成是js，html，css的（版本）集合））
      */
        /*
      现在你将上面的
      width: 100px;
      height: 100px;
      line-height: 100px;
      设置成（100-20*2-10*2=100-40-20=40）
      width: 40px;
      height: 40px;
      line-height: 40px;
      执行看看结果
      然后修改回来成这样
      width: 100px;
      height: 100px;
      line-height: 40px;
      加上如下标签
      box-sizing: border-box;
      他代表什么，他代表首先将元素高度变成对应的
      width: 100px;
      height: 100px;
      并且固定好不撑开（前提是对应的border和padding不超过他，对应设置padding为40，border为10，还是不会撑开的，正好相等，若40变41，那么就会撑开了，多撑开了1*2），然后放给边框border大小，给内边距padding大小，最后剩余的空间放内容
      但是如果在放的时候超过了原来的宽高，那么就会进行撑开，即多余的会撑开，自己测试就知道了
      之所以可以这样，是因为元素是读取后，最后统一操作的
      所以这就是最后你看起来与前面的结果是一样的原因（因为先给40+20，剩余的给内容，不就是100-40-20吗，多余的会撑开的）
          
          
          这里就会有一个问题，由于在不超过的情况下，设置40和10，对应的内容是否还在，答：还是在的，因为在这个时候（操作box-sizing），上下左右的内边距需要以内容为主（而不是不为主，虽然正常情况下是撑开的），当我们知道有内容时，他必然需要存在，这样就导致左上内边距必须先满足，后面再来补充内边距，就如前面说明的margin是类似的（对于margin是优先考虑左外边距和上外边距的），实际上也不能这样说，应该说是内容导致边距以左上为主了，所以padding还是没有存在偏向于一方的操作（左上，比如margin就偏向了）
          
          具体只需要你进行了测试，就能明白为什么了
          
          但是我们一般也不会操作超过，所以这种情况了解即可，所以大多数我们就认为他是内部操作减去的即可
          且因为他的存在，使得基本不会撑开，容易我们随时进行编写处理，而不用手动减去
          
          
          
      */
        box-sizing: border-box;
      }
    </style>
    <div>嘿嘿</div>

   <style>
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 0px;
        /*基本上，任何人都有盒子模型，只不过有些不能设置宽高而已，而是以内容来操作的，具体可以在检查中看到每个人的盒子模型*/
      }
    </style>
    <div class="a">嘿嘿</div>
    <span>a</span>
    <div class="b">嘿嘿嘿</div>

在前面我们说过，有些标签有些模板的外边距，比如p标签，边距默认字体大小（上下两个方向），还有body，实际上默认外边距为8（四个方向），一般margin中0就不会给出显示（在前端检查中，在计算样式里可以看到，所以我们的样式只是设置或者说修改值而已，而不是加上对应的样式），当然，样式的操作是浏览器来进行的，具体作用也是浏览器来操作的，所以如果浏览器给定一个地方多出什么样式也并不能操作的到，就比如当前浏览器中的刷新等等，一般不能改变位置，所以在给body设置margin为0时，看到上面还是有点距离是正常的，但比原来的要短了，即这时才是真正的起始位置，因为他是副本的操作（而不是真的body）

还要记得，html也是标签，自然也存在样式，只是我们大多数操作body的，所以body有些多出的（看到上面还是有点距离是正常的）操作可能与html有关，具体可以百度html对body的默认影响

一般情况下，我们会这样的操作：

<style>
  *{
    margin: 0;
    padding: 0;
  }
</style>

当然，有些情况我们也会将*修改成所有对应需要清除默认对应样式的标签，比如（给出部分）：

 <style>
    div,p{  /*可以给出对应的所有（如后面的淘宝）*/
      margin: 0;
      padding: 0;
    }
    /*
    加,相当于一起，即等价于：
    div{ 
      margin: 0;
      padding: 0;
    }
    p{ 
      margin: 0;
      padding: 0;
    }
    */
  </style>


<!--
一般来说淘宝的某个网站（具体自己搜索点击第一个通常就是）在body中是这样的：
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul 
{
margin: 0;
padding: 0;
}
而京东的某个网站（具体自己搜索点击第一个通常就是）是：
 *{
    margin: 0;
    padding: 0;
  }
-->

也要注意：上面的设置为0（一般是padding），可能导致某些以数为主的标签操作出现一下细节问题，比如ul，ol，因为他们就是以数为主操作的（可是有一系列的计算样式导致的哦），前面的序号不看，而单纯的li是看的，所以如果ul和ol设置为0，那么会导致数直接到最左边，序号离开正常界限，而这时单纯的写上li，是比较靠右的

    <ol>
      1
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ol>
    1
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <ul>
      2
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
    2
    <li>a</li>
    <li>b</li>
    <li>c</li>

 <style>
      *{
        padding: 0;
        
      }
      </style>
    <ol>
      1
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ol>
    1
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <ul>
      2
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
    2
    <li>a</li>
    <li>b</li>
    <li>c</li>

我们可以去掉对应列表的序号，那么这样他们就都以数为主了：

   <style>
      li {
          /*默认是：disc，实心圆*/
        list-style: none; /*去掉列表序号，由于可以继承属性，所以ul标签和ol标签写上他也行，或者其父元素写上也行（但是其他该属性比较特殊，不能是爷爷辈的，也就是如果对应的标签不是我的父，那么就算继承过来也不会起作用，那么就可以说，是js的判断，或者基础代码的判断的原因），list-style是可以继承的，如果不能继承，那么他就是被浏览器给限制了（一般可以继承，具体可以百度可以继承的元素），因为并不是所有的样式（属性）都可以被继承的*/
      }
    </style>

    <li>a</li>
    <li>b</li>
    <li>c</li>

<!--
li他也有display的属性，只是他是：list-item，这里我们来补充前面的说明
1. 块级元素（display: block）：块级元素会独占一行，可以设置宽度、高度、内外边距等属性，可以嵌套其他（一般这样说明的是放入一个子元素）块级元素和行内元素，一般我们会通过设置 display 属性，将其生成为列表项 (display: list-item)
2. 行内元素（display: inline）：行内元素并不会独占一行，它只会在必要时才换行，所占的空间是内容的宽度和高度，内外边距只对左右生效，不影响上下位置，不能设置宽度和高度，一般我们不会嵌套块级（行内块）元素，即高等级一般嵌套（放）低等级的，但不是不能嵌套，只是不建议（要不然外面的低等级写上干什么呢，又没有什么作用）
3. 行内块级元素（display: inline-block）：可以看作是行内元素和块级元素的结合体，既可以设置宽度、高度、内外边距等属性，又不会独占一行，一般我们不会通过设置 display 属性，使其成为列表项
4. 列表项元素（display: list-item）：可以看作特殊的块级元素，它前面带有一个项目符号（可以设置list-style了，但并没有对应标签属性的设置，所以只能操作css，其中ul，li等等符号的属性说明在https://blog.csdn.net/qq_59609098/article/details/123475679有具体的详解，注意：设置了list-item对应的标签就相当于li，所以如果写上标签，那么也会占用一个数，该博客中有说明这个"但他也会占一个值，即虽然你设置了"，就可以来解释这样的情况了），会另起一行并缩进内容（一般缩进内容是看不到的，即不操作的），可以设置宽度、高度、内外边距等属性，但是一般不会嵌套其他块级元素或行内元素（低等级也不放），而且一般也不会通过设置 display 属性，将其生成为行内元素
-->

其中，我们知道有些标签是占一行的，但是这个占一行只是内容的一行而不是元素的一行，所以，内边距是会操作的

 <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .a {
        margin-bottom: 20px;
      }
      .b {
        margin-left: 300px;
      }
      /*执行后很明显，margin是操作对应方向的所有的元素盒子，并不会因为你离开对应的距离就不操作了*/
    </style>
    <div class="a">a</div>
    <div class="b">a</div>

  <style>
      .a{
        width: 400px;
        height: 400px;
        background-color: black;
        overflow:hidden;
      }
      .b{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 50px; /*
        子元素导致父元素进行移动
        互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，这是块级元素之间底层会导致的原因
        因为块级元素有折叠现象，这个现象就是在前面我们也学习过"margin在多个元素之间符合最大者元素"，当然，若是两个块级元素，他的操作是不同的，如果说，行内，行内块是其中一个最大的进行起作用，另外一个不起实际上的作用，那么块级就是其中一个赋值给另外一个，然后另外一个也起实际上的作用，当相等时都会起作用，这就是为什么这里会出现这样的原因，这是块级的一个在元素上与其他行内，行内块等等不同的存在（list-item也是属于块级的一种，只是他是特殊的）
          由于赋值给对方的先操作，相同了，也就是子元素先操作，所以看起来对应子元素并没有与父元素离开
        解决办法：
        （1）：可以给父元素设置出现对应的距离，如border-top 或者 padding-top（分隔父子元素的margin-top）
         使得看起来子元素操作了margin，但是父元素不动（虽然变大了）
          但是border只要进行了相应操作就行，比如border-top: 1px solid red;，border-left: 1px solid red;不行，其中可以发现，如果上边框进行了设置，他也能解决，为什么：可以这样的认为，在两个父子块级赋值期间，进行判断，如果存在边框，那么不赋值，但是是大的先操作（没有赋值一般是这样的），大小的后操作（margin），然后才考虑同级，那么左上元素先操作，然后右下元素再操作
         当然，若是现在，只是部分修改成取其中一个左上而已
        （2）：也可以给父元素设置overflow：hidden
        为什么overflow：hidden可以解决，首先我们需要解释他的作用，看如下：
        overflow: hidden 是 CSS 属性中的一个常用属性，它通常用于以下两个方面：
        1.清除浮动：当一个元素的子元素都被设置为浮动时（是浮动，一般脱离文档流的正常说明在后面），使用 overflow: hidden 可以使父容器包含浮动元素，而不会发生高度塌陷的问题，这里就要考虑高度塌陷是什么意思了：高度塌陷是指容器元素因包含的子元素浮动或者其他操作造成高度属性对父元素无效从而父元素可能没有被子元素的高度影响，如高度还是0的现象，一般认为脱离文档流（获取不到你的高度了，后面也会说明这个的，浮动是一个特殊的脱离文档流）的都会造成高度塌陷，那么有宽度塌陷吗（对浮动来说），答：没有，本质上是不存在"宽度塌陷"这种问题的，这是因为，对于元素的宽度，它是默认被初始化为该元素的内容宽度或 auto，并不会出现宽度为0的情况，从而也就不会发生宽度塌陷的问题，换言之，他的宽度属性是一直有效的，那么为什么不将高度变一直有效，是因为高度受影响比较多，就比如你一直给出文字，自然会换行的，这就操作了高度，所以高度不能这样，或者说高度需要受影响，而不是默认内容的变化
          当高度无效后，那么父元素就相当于只是存在宽度，而没有高度，可以看到，若设置边框为1px时，父元素直接由两个边框包括着，且内容为空，但是由于浮动又必须在父元素中，所以就基本被覆盖了，具体自己进行测试（或者百度查看解释）
2. 隐藏溢出的内容：当一个元素的内容超出了容器的大小时，使用 overflow: hidden 可以将超出容器大小的内容截去并隐藏
这里需要注意的是，当元素的内容超过容器的大小，并且没有设置 overflow: hidden 时，超出容器大小的内容会溢出到容器外部，破坏网页的美观性
除了这两个作用，overflow: hidden 还可以将容器自身视为一个 BFC（块级格式化上下文，全面检查，防止子元素影响父元素，如赋值操作），从而更好地组织页面布局，BFC 可以防止浮动元素的干扰，从而更好的控制元素的位置和布局，由于不会赋值，那么自然使得可以不被子元素受影响
总之，overflow: hidden 可以在不少的场景中起到非常重要的作用，使用得当可以使网页更加清新简洁、易于维护
          
        所以当一个元素设置了 overflow:hidden 属性时，它会创建一个新的 BFC（块级格式上下文），BFC 是一个页面中的独立的渲染区域
        这时容器内部的子元素不会影响到父容器，或者父容器外面的元素（隐藏溢出的内容），所以BFC包含浮动的元素时，并且可以防止浮动元素影响到其他元素，主要原因是，他虽然是脱离文档流的元素（具体可以到这个博客查看文档流的说明：https://blog.csdn.net/qq_59609098/article/details/123475749），但会被检测，或者说有关联导致检测
        而由于不会影响父元素，所以这样就可以解决子元素的 margin-top 会作用在父元素上，实际上浮动也可以，可以自己测试，因为脱离，那么他们之间是得不到的，且在浮动之间并不存在margin赋值的情况，就算有，也因为浮动需要满足，所以也导致不会移动
（3）：转换成行内块元素，既然是块级元素之间的操作，那么我们将其中一个设置为不是块级即可，但是又要宽高，所以一般我们设置为行内块元素
（4）：设置浮动，由于浮动脱离了文档流，不被检测到，那么自然不会操作赋值，当然，由于宽度是初始化的，那么由于这里有高度，所以不会出现问题



        */
      }
   </style>
    <div class="a">
      <div class="b">son</div>
    </div>

结构伪类选择器：

这里与前面的选择器有点不同，知识在选择器上加上一些其他操作，但是他这个选择器一般介于类选择器和id选择器中间，即优先级大于类选择器，小于id选择器（当然，随着版本的变化，可能也会不同，比如可能大于id选择器了，具体要自己测试），如图：

当然，这些说明你可能并不完全理解，在后面说明缺陷时会进行额外的说明的

<style>
      li:first-child {
        background-color: black;
      }
      .a {
        background-color: red;
      }

      li:last-child {
        background-color: aqua;
      }

      li:nth-child(3) {
        /*默认从1开始算的*/
        background-color: blue;
      }

      li:nth-child(1) {
        /*都是结构伪类选择器，那么优先级相同，那么考虑层叠性（也就是覆盖，以后也说成覆盖了，因为专业名词只是对一种称呼或者行为的说明而已，所以这里大多数并不会给出对应的专业名词，因为对知识毫无意义，如果你需要在交流中进行某种优越，可以百度查找对应的专业（有）名词，就如前面的选择器中"div p"实际上代表"后代选择器"，而"div>a"就代表"派生选择器"，这些都没有进行说明）*/
        background-color: blue;
      }

      li:nth-last-child(2) {
        /*倒着数，默认从1开始算的*/
        background-color: red;
      }

      /*上面的数字中，如果超过了范围（0，9）或者不怎么对（1.1），一般不会起作用，甚至不会被得到，相当于没有写这个样式，但是很明显，0必然是没有找到的，因为9只要数量够即可，所以大多数情况下，要是不用选择的话，一般我们都会设置为0，且公式一般也会从0开始*/
    </style>
    <ul>
      <li class="a" id="a">第&个</li>
      <li>第&个</li>
      <li>第&个</li>
      <li>第&个</li>
      <li>第&个</li>
      <li>第&个</li>
    </ul>


<!--然而这里有关细节，nth-child必然只会操作第一个元素，如果不是对应的li，那么相当于没有操作，而不是找到第一个li，你可以试着在li前面加上<div>1</div>就知道了-->

实际上，上面的数字中是可以给出公式的，比如：

<style>
      /*
      公式一般会从0开始
      */
      /*具体流程可以认为是：
      首先n为0，看看2n=0，这个元素是否有，没有，不进行设置，然后n+1（不结束）
      现在n为1，看看2n=2，这个元素是否有，有，进行设置，然后n+1
      现在n为2，看看2n=4，这个元素是否有，有，进行设置，然后n+1
      现在n为3，看看2n=6，这个元素是否有，没有，结束设置，样式操作结束
      注意：无论是否使用公式，都是属于结构伪类选择器，所以与其他的结构伪类选择器都是同样的优先级的
      */
      li:nth-child(2n) {
        background-color: red;
      }
      /*
      按照上面的说明，那么可以很明显的知道对应图片的公式是非常简单的
      当然，还有一些特殊符合，如even，和odd，相当于even是2n，odd是2n+1
    
    所以，只要知道n是一系列的变化后（上面的规则），你甚至可以自己定义公式：比如2n+3，代表3，5，7...等等的标签
      */
    </style>
    <ul>
      <li>第&个</li>
      <li>第&个</li>
      <li>第&个</li>
      <li>第&个</li>
    </ul>

注意：上面并没有说明li:nth-child(n)的一个缺陷，比如：

 <style>
      li:nth-child(2) {
        background-color: red;
      }
    </style>
    <ul>
      <li>list item 1</li>
      <div>
        <li>list item 2</li>
      </div>
      <li>list item 3</li> 
      <span>
        <li>list item 4</li>
      </span>
    </ul>

现在我们对该选择器的说明进行再次的给出E:nth-child(n)的解释："匹配父元素中第n个子元素，并且是E元素"，这里的E元素就是li

那么这个父元素代表什么，这里是有细节的，实际上代表在"匹配时的父元素"，什么意思呢，看如下：

 <style>
      li:nth-child(1) {
        background-color: red;
      }
    </style>  
<ul>
      <li>a</li> <!--匹配到这个li时，看这个li的父元素ul，由于li他ul是第一个，那么选择他-->
      <li>b</li>
    </ul>
    <ul>
      <li>b</li> <!--匹配到这个li时，看这个li的父元素ul，由于li他ul是第一个，那么选择他-->
      <li>c</li>
    </ul>
<!--所以若你的选择器是li:nth-child(1)的，那么b（第一个b）和c不会变化，而a和b变化了-->

<!--同样的，由于是匹配第n个元素，所以如果第一个子元素不是对应的li标签，那么他并不会操作，即需要是2这个位置了-->

<!--举个例子：-->
  <style>
    div a:nth-child(1) {
      color: red;

    }
    div a:nth-child(2) {
      color: pink;

    }
  </style>
  <div>
    <h3></h3>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>

<!--上面的h3标签存在，导致对应的第一个div的结果不同，看看执行的显示效果就能明白了，即明白："由于是匹配第n个元素，所以如果第一个子元素不是对应的li标签，那么他并不会操作，即需要是2这个位置了"这个意思了，还不明白，那么没有办法，多看看就行-->

那么前面的"list item 3"，为什么没有操作呢，这就是缺陷的存在，一般情况下（某些浏览器可能是会操作的，如果没有操作，一般是现在的浏览器），因为E:nth-child(n)是连续的（这个连续也是操作连续），如果中间存在其他的元素，那么下次匹配时，对应的元素会进行重置自己所在的位置，所以"list item 3"不是第二个元素了，而是代表第一个元素，但是，上面也说明了是操作连续，这个代表什么意思：就是说，如果第一个元素被选择起作用了，那么无论怎么重置都是第二个元素开始（因为第一个元素被选择了），所以前面的li:nth-child(2)的2就算变成1，那么"list item 3"也操作不到

由于有上面的缺陷说明，所以为了解决这样的问题，我们会给出一个样式：

<style>
      li:nth-of-type(2) {
        background-color: red;
      }
    </style>
    <ul>
      <li>list item 1</li>
      <div>
        <li>list item 2</li>
      </div>
      <li>list item 3</li>
      <span>
        <li>list item 4</li>
      </span>
    </ul>

实际上前面的缺陷是重置的原因，所以只需要规避重置即可，而上面的li:nth-of-type就代表不操作连续，自然规避重置，这是因为他是先直接拿出所有对应的li标签，然后选择后，在考虑其他的子标签里面的对应元素，所以就规避了重置，即大多数情况下，如果我们要看数量的话，我们都会使用该选择器替代 li:nth-child，所以 li:nth-child我们是很少使用的（如果都是操作一个元素，那么他们互相覆盖）

伪元素（由 CSS 模拟出的标签效果，伪元素默认是行内元素，可没有说明行内样式哦，优先级与伪类一样）：

<style>
      div {
        height: 100px;
        width: 100px;
        background-color: red;
      }
      div::before { /*div就是其说明的父元素，而不是看div的父元素*/
        color: blue;
        content: "老鼠";
        /*
        只能存在这个，且需要加引号，否则不会起作用，不加也是的
        即不加引号或者不加该属性，那么该模拟标签不起作用，相当于没有写
      */
      }
    /*
    若要补充可以这样：
    div::before { 
          color: black;
      }
    */
      div::after {
        content: "大米";
      }
    </style>
    <div>爱</div>

<!--由于伪元素默认是行内元素，所以我们在对应的样式里面加上样式时，相当于操作对应内容为content的行内元素标签
然而是模拟的，所以只能在该处写样式，要想加样式，那么只能在后面继续操作div::before覆盖（但是又何尝不是只是在该处写样式呢，只是覆盖而已），他也是可以覆盖的，可以自己测试一下
这个时候，由于已经加了content，那么覆盖的可以不加，只是补充样式或者覆盖


注意：我们要将他看成行内元素（也可以叫做标签，只是在前端也有一个"元素"名称的说明，一般查看样式的）哦


实际上在伪类中也有一样的作用，只是名称不同而已，即:after和::after是一样的，最终的底层操作完全相同，你认为一个方法名称不同，但是里面的操作相同是这样的意思吗，答：实际上是的

一般来说伪元素是非常少的操作，所以我们通常使用伪类

由于伪类或者伪元素中有些对应于属性的本身，所以可以存在这样的操作div:nth-child(2)::before{或者div:nth-child(2):before{，但是反过来不行，因为无论是伪元素还是伪类的before，并不是代表或者对应于属性或者元素本身，所以不能这样操作，可以自己去测试一下，当然，防止嵌套，所以通常出现多个伪类或者伪元素，那么一般该样式就不操作了，所以总体看来，只能伪类和伪元素的部分可以这样的操作，但是一般存在对应于属性本身的，通常只有伪类有（如nth-child(2)，还有:hover），所以伪类一般在前面，否则通常不会操作，除非伪元素也存在对应于属性本身的（如类似的nth-child(2)和:hover），存在对应于属性本身的，他们可以互相交换位置，比如：div:hover:nth-child(1)::before{和div:nth-child(1):hover::before{都可以，但是::before不能放在伪类或者说对应于属性本身的前面，否则是不操作的，即这个样式不操作
-->

标准流（从这里开始，后面的大多数说明需要你大量的测试，否则是难已学习的，除非你只是使用，而不考虑为什么可以这样使用，当然，后面的我的理解也并非绝对正确，所以需要大量的测试来验证，来完善你的理解，对与我们看不了源码的情况下，就只能依靠测试来测试出原理的）：

又称文档流（前面有说明），是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素，或者说是默认按照display的排版（他可不只是有宽高的属性操作）来操作

常见标准流排版规则：

1：块级元素：从上往下，垂直布局，独占一行

2：行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

而脱离文档流，就是没有按照该排列，或者按照自己的排列，并且没有按照这个排列也会导致父得不到子高度（前面有过说明），即你默认的得不到我的高度属性来进行排列（对与浮动来说，在后面会说明正常的脱离文档流），这是因为他脱离了原来的操作方式，那么由于初始化底层原因，不同方式自然是得不到高度的（不同操作方式还是需要存在的，总不能一直按照一种）

但是无论是文档流还是脱离文档流，浏览器都可以获取，只是他们之间不能互相获取而已（除了特别的，如浮动，可以操作宽），因为他们只是代表排版而已，而不是代表所有的情况，所以js都可以操作他们的属性

<style>
      div{
        display: inline-block;
        width: 100px;
        height: 100px;
      }
      .one{
        background-color: red;
      }
      .tow{
        background-color: blue;
      }
    </style>
  <div class="one">one</div>
  <div class="tow">tow</div>

你可以发现，我们没有写margin（并且计算样式里面也没有），但是对应既然有间距（虽然前面的相关测试中，你可能也注意到了），这是一个问题，这个问题的出现是因为上面的div没有在同一行写，你试着写成这样：

<div class="one">one</div><div class="tow">tow</div>

可以发现，没有间隔了，这是因为行内块和行内是在一行添加的，自然回车也算空格的（前面也说明），因为既然是没有换行，那么相当于单纯的写，你可以操作这样就知道了：

aa
<!--或者-->
a
a
<!--一般我们只会报错后面的情况，因为需要格式，要不然html添加或者编写是非常不美观的-->
<!--而浮动就是解决在后面的回车情况下，有间隙的情况，即浮动使得没有间隙-->

而块级就没有这样的情况，这是换行了，自然空格没有意义，并且在一行写的，是会穿过窗口的，因为他们并没有与窗口有什么联系，所以一个换行就无视空格了，当然了，在超过窗口时，空格（在一行添加的，回车也算空格，内容自然是包括的，这里只是说明特殊情况）会导致换行的，否则还是空格，这是浏览器的操作，你试着加上这个（或者缩小窗口，body也是块级哦）：

ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

或者
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
ssss

或者
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssss



一般来说汉字自带到界限的换行（到边界就会，而块级的边界自然与窗口一样，且根据优先的原则，所以再浏览器中的处理实际上也是由于body也是块的原因，但是，html始终为块级（规定是这样，因为这是底层的处理，可能是有很多原因的，所以了解即可，因为，如果没有这个，那么行的处理怎么有效率呢），所以这样的换行绝对存在），比如你将上面的其中一个s换成黑即可，当然，不只是汉字，其他元素一般也存在，如img标签
并且字母的空格并非写在后面才会换行，写在前面也是，如ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssss   那么前面会换行，在考虑后面的空格


但也要注意，上面是说明外部的排版，若是内容，那么自身相当于内容的body，所以无论是行内，行内块，块，内容超过边界，加上空格就会操作在内容中的换行，这都是排版的操作（任何排版都符合这个内容的说明，包括脱标，因为他只是代表与其他元素不同的显示排版而已，内容还是一样的操作，所以自然也可以操作padding）

后面两个是一样的结果，一般只有行内元素和单纯的内容是这样的，如果是块（行内块和块都是块）的元素，只要宽度超过窗口就会换行（被浮动的元素默认是块级元素，只是他因为浮动的操作在一行而已，所以一般不存在block的一行显示）

现在我们来操作浮动（要注意：浮动是一个特殊的操作，有异于其他样式，所以他的操作基本唯一，可以认为他在基本代码或者说基础代码设置了很多东西而形成的，浮动的特点基本需要记住，在这里我们是可以发现，css就是用来记忆的，并且大多数并不能见名知意，且并不能有什么点来帮助你来理解，所以需要记住，即大多数情况下，类似于浮动的排版方式都是需要记住的）：

<style>
      img {
        float: left; /*首先去掉display的排版操作（包含出界的操作），所以无论是块，行内块，行内都是一样的操作，只是包括排版信息，而不是操作，其他宽高操作还是存在的，加上现在的排版，这个排版是left，那么放在左边，以左上角为主*/
          /*
          注意：display是有多种排版的，行内也算的，即行内也会去掉
          */
      }
    </style>
    <img src="../3.jpg" width="100" />
    <span
      >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </span>

<style>
      div{
        display: inline-block;
        width: 100px;
        height: 100px;
      }
      .one{
        float: left;/*去掉排版一般默认他不存在，只是宽度占用了而已，可以将他看成是起始body的东西，所以这里的回车没有空格（你认为一开始第一个元素是否操作了空格呢，答：是没有的）
          并且，去掉排版的元素，一般会先操作，然后才会操作寻常的元素（看成是body），当然不包括宽度，所以一个元素设置为right（右浮动）是在块级（不是行内块）元素下面（宽度是操作换行的基本），因为已经换行了，自然不会像在行内和行内块的下面，这个时候就是右边了，而不是下面，可以自己测试
          当然，若都去掉排版，那么看先后，如果one先去掉，那么他先操作
          */
        background-color: red;
      }
      .tow{
        background-color: blue;
      }
    </style>
  <div class="one">one</div>
  <div class="tow">tow</div>

这里也可以这样（看看先后，可以试着缩小窗口，来看看换行，宽度是操作的）：

  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .a{
      float: left;
    }
    .b{
      float: left;
    }
    .c{
      float: right;
    }
    .d{
      float: right;
    }
    .e{
      float: right;
    }
  </style>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>

而由于只是宽度占用，高度不占用，所以会出现如下：

 <style>
      .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: red;
      }
      .tow {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
    <div class="one">one</div>
    <div class="tow">tow</div>

可以发现，大的div无视他，因为去掉排版一般默认他不存在，只是宽度占用了而已，所以对应的内容tow，在右边，但是既然是宽度占用，为什么大的div被他覆盖了，这是因为他的宽度与文档流的排版无关，只是与文本有关，所以div被覆盖，但是内容tow在右边

简单来说，脱离文档流就是按照他自己的想法操作，并占用文本显示宽度，那么前面说明的宽度就是这个，即排版固定，但是内容不一定了，也就是为什么没有宽度塌陷，这是浮动的操作方式

注意：父子关系的获取是文档流的，而同级是直接看，所以同级之间（包括子级别），宽度和高度基本都会受影响，而父子需要关联，由于浮动脱离，所以得不到高度（虽然宽度对与浮动可以得到，这是他的特点），也要注意：浮动可能会撑开宽度

总结浮动的特点：

1：浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中（高度获取不到了），只是内容会（内容比较特殊，就如排队，虽然我飘起来了，但我总要有个东西在下面吧，要不然我怎么确定位置，即怎么排队呢）

2：浮动元素（正常的脱标也是）比标准流（无论你怎么设置z-index，都是大于标准流，只要是标准流，级别就是比你高）高半个级别，可以覆盖标准流中的元素

3：浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4：浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高（这个特殊的哦，一般具备行内块特点，在元素中的计算样式中可以看到是块级元素（并且无论你怎么设置display，他都是block，即他是后操作的），但是也由于浮动，使得基本没有换行，所以说具备行内块特点），也就是说我们可以操作浮动的元素，虽然他脱离了文档，但是脱离文档流（包括正常的）的样式是可以操作外边距并且浮动是后操作的（如可以操作margin-top样式，但是他（如margin属性）只是操作当前所占位置进行操作，而不会关联其他元素，不包括脱标，因为这是脱标造成的，即只能规定一个地方），先脱离的（脱离然后继续操作，正常元素也是先显示，然后操作边距），虽然浮动他宽是存在的（会使得与文本排版有关），但是也由于脱离，所以如果样式中如果存在必然操作文档流的属性，那么不会起作用，如text-align:center或者margin:0 auto，其中center，和auto都是需要文档流来操作（一般窗口属于文档流的，实际上只是html，而不是窗口，所以可以对窗口操作类似的margin-top样式，窗口保留对脱标的地方属性，使得可以操作类似的margin-top样式）

5：浮动是操作在父元素下的，而不是全局（或者说一直是body）

实际上浮动可以这样的认为，无视浮动的元素，只看他的宽，慢慢移动吧，所以浮动所占的父元素若没有宽，那么就以其父为浮动对象，以此类推

大多数浮动是为了解决排版，即解决前面的两个div中间的空格的出现（一般换行后，上下没有间隙（或空格））

这个说明一个地方：

<!--
实际上css样式（{}里面的）有个书写顺序，是浏览器比较友好的顺序，一般可以提高浏览器的执行效率
就如浏览器先找1，那么你2（2和1代表不同顺序里面的），1需要判断2次，找到1，然后判断一次找到2，假设一次判断需要1s（虽然比较夸大），那么需要3s，但是若是1，2，那么只需要判断1次，而由于因为操作一次他有操作标记，一般会直接的跳过，这个时间一般是0.5s，然后2也判断一次，那么总共是1+0.5+1=2.5<3，所以按照顺序可以提高效率（实际上就是将一个判断变成0.5来提高的）
一般顺序如下：
1：浮动或者display或者定位，一般存在一个即可，他们的顺序可以改变
2：盒子模型相关属性（样式），如margin，border，padding，宽高，背景（一般也按照这个属性顺序，当然他们的顺序可以改变）
3：文字样式（他们的顺序可以改变）
执行效率高，那么网页打开的速率自然也会变块，当然这些速率一般也并不影响很大的体验（甚至感受不到提高了速率，你认为10ms显示出来和1ms显示出来有什么区别吗，实际上对与计算机来说有区别，但是对与我们人来（看）说并没有区别），所以大多数可以忽略顺序（尽量即可）

内容换行是根据内容（内容又称文本）的，而不是整个元素


特别注意：一般空格（回车一般也算空格）占用5px的宽度

还要注意：出界的元素显示优先级比普通的低，只是对元素或者背景等等来说的，而不是文本（通常文本不是）
但是也只是针对同级来说的，如果不同级，如我的子元素出界，那么与我同级的必然覆盖，无论是否是文字都是覆盖的


浮动由于宽的原因，对于内容都是考虑占用的，所以如果一个内容占用了位置，那么他就不能在对应的位置，通常来说出界的文字并不占用位置，只是其对应的元素自身可能占用，简单来说，出界的元素会导致浮动发生改变，比如：
<style>
      .hd {
        width: 1000px;
        height: 114px;
        background-color: red;
      }
      .c {
        width: 100px;
        float: left;
        height: 110px;
        margin-top: 10px;
      }
      .bd {
        float: left;
        width: 304px;
        height: 405px;
        background-color: black;
      }
    </style>
    <div class="hd">
      <div class="c">新鲜好物</div>
    </div>
    <div class="bd"></div>
上面的的代码中，你选择将margin-top: 10px;的10修改成1，就能知道什么意思了（出界的元素会导致浮动发生改变）

实际上这里也证明了一个点，浮动初始的地方是同级元素的排版后的左上，但是若有占用的，那么自然后面移动


浮动占用宽度，那么在一个元素进行浮动后，单纯的文本放在其右边的左上，除非当前包含的父元素到头了，同一的，当另外一个同级元素也存在时，那么由于浮动的关系，也会考虑当然，若是其子级元素，那么只要考虑自身，而非该浮动的，简单来说，这个占用是当前的占用（即内容（父内容））
参照代码：
  <style>
      div {
        width: 150px;
        height: 50px;
        background-color: red;
      }
      .a {
        float: left;
        width: 40px;
        height: 40px;
        background-color: black;
      }

      .b {
/*这里的宽高可以变小，来看看显示结果*/
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
    <div>
      <div class="a"></div>
      <div class="b">2</div>
    </div>
-->

简单来说，只要操作了文档流获取脱离的浮动，那么就会得不到，如果不是通过文档流操作的，那么就可以直接得到

而文档流更加详细的就是（正常说明的脱离文档流，而不是浮动这个特殊情况）：

<!--
HTML 中的文档流（Document Flow）是指 HTML 文档中元素排布的方式，HTML 文档中的元素会按照其在文档树中的出现顺序依次排布，即从上到下、从左到右依次排列，这种排布方式就是文档流
在文档流中，元素的位置是由其前面的元素和其自身的属性共同决定的（也就是可以互相获取对应元素的属性），例如，元素的宽度和高度、边框的宽度和颜色、内边距的大小等都会影响元素的位置和大小
一旦某个元素脱离了文档流，它就可以自由地定位，不再受到前面元素和它自身属性的影响（也就是不可以互相获取对应元素的属性），例如，position: absolute; 和 position: fixed; 可以使元素脱离文档流，从而可以使用 top、right、bottom、left 等属性来自由地定位元素，但是浮动存在有特殊的显示效果（可以认为有某些关联，使得宽度会操作，即hidden的清除浮动可以认为是加上对应的高度关联），所以实际上脱离文档流应该宽度都不能操作的
需要注意的是，通常情况下，脱离文档流可能会对元素造成影响（互相获取不到对应的元素），因此在使用 position 属性时需要谨慎，避免影响后续元素的正常排布和显示
但是脱离只是属性不会获得，但是像什么外边距（上面只是说明内边距哦）是可以获得的（但是只是获得所占位置，对方元素包括脱标不获取），因为外边距不与文档流相关（除非里面操作了auto，那么不会操作，因为得不到，对应于css报错就是不操作），是一个统一的地方，即脱离和不脱离都可以获得，所以在操作了position: absolute; 时，也可以操作margin

-->

 <style>
      .top {
        margin: 0 auto;
        width: 1000px;

        background-color: pink;
      }
      .bottom {
        margin: 0 auto;
        width: 1400px;
        height: 100px;
        background-color: red;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
      }
      .right {
        float: right;
        width: 790px;
        height: 400px;
        background-color: skyblue;
      }
      .clearfix {
        display: block;
        clear: both;
      }
    </style>
    <div class="top">
      <div class="left"></div>
      <div class="right">1</div>
      <span class="clearfix"></span>
    </div>
    <div class="bottom"></div>

而由于浮动比较特殊，所以一般存在清除浮动的方法：

1：直接设置父元素高度，既然我得不到你的高度，那么我自己设置

2：给一个块级元素添加clear:both（只能是块级元素，其他元素和浮动元素（会获取高度）不能操作，可以认为只有块级才会有关联浮动高度的东西，当然，并不代表其他的排列（行内或者行内块）没有，具体可以百度，就算没有，以后可能也可以这样操作），他代表添加该块级元素所在位置的前面的所有元素的高度关联（并且自身与浮动高度关联，若他也是浮动，那么会出现浮动存在，但是也到下一行了，这是一个特殊的情况，浮动之间关联了），使得高度可以被获得，只是在当前父元素的前面的所有元素（自身不受是否父子元素影响，可以自己测试），一般用于给浮动进行操作，但是由于需要添加标签，所以比较麻烦，一般的添加的块级元素的名称，如class会设置成clearfix，因为既然是添加的，最好进行区分，而clearfix的英文就是"清除浮动"

3：可以使用伪元素：

     <style>
      .top {
        margin: 0 auto;
        width: 1000px;

        background-color: pink;
      }
      .bottom {
        margin: 0 auto;
        width: 1400px;
        height: 100px;
        background-color: red;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
      }
      .right {
        float: right;
        width: 790px;
        height: 400px;
        background-color: skyblue;
      }
      .clearfix::after {
        content: '';
        display: block;
        clear: both;
          /*一般建议这里写上如下：
          height: 0px;
          visibility: hidden;
          因为不同版本的浏览器可能会默认给伪元素加上高度，所以这里设置为0
          而visibility: hidden;是CSS样式中的一种控制元素可见性的方式，该属性控制元素在页面上是否可见，但不影响其占据的空间，只是单纯的不显示而已，即当元素应用了该样式后，它依然会保留原来占据的布局空间，但在页面上不会显示出来，用户也无法交互，与该样式对应的属性是visibility: visible;（一般的，如果没有设置的话，默认添加的所有元素都是这个属性），它可以将元素重新设置为可见状态，与display: none;不同的是，visibility: hidden;会保留元素原来占据的空间，而display: none;会使元素不可见并且不占据任何布局空间（因为你都没有排列了，与没有写是一样的道理，而visibility: hidden;好歹对方是写了（排列的）的）
          */
      }
    </style>
 <div class="top clearfix">
      <div class="left"></div>
      <div class="right">1</div>
    </div>
    <div class="bottom"></div>

 <style>
      .a {
        width: 400px;
        height: 400px;
        background-color: pink;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 50px;
      }
      .dd {
        content: ""; /*不会显示什么*/
        display: inline-block;
      }
    </style>
    <div class="a">
      <div class="dd"></div> <!--也可以解决父子边距问题，因为b的边距首先需要有目标，没有目标才会操作父子，否则就是操作这个dd，但由于赋值，所以如果dd也是块，那么还是会出现父子边距关系-->
      <div class="b">son</div>
    </div>

而正是因为这样，所以有时候操作伪元素时，我们一般会这样的操作：

操作before（可以结合after统一设置）里面加上对应的display: inline-block;或者display: table（这个了解即可，因为很少使用）;

 <style>
      .table-container {
        display: table; /*存在inline-block的功能，但是他的属性只是操作table-cell的，且一般只能操作宽度*/
        width: 100%;
      }
      .table-row {
        display: table-row; /*关联table，是inline的功能*/
        border: 1px solid #ddd; /*没作用，因为inline的功能*/
        width: 100px; /*没作用，因为inline的功能*/
      }
      .table-cell {
        display: table-cell; /*关联table，是inline的功能*/
        padding: 10px;
        border: 1px solid #ddd;
        width: 100px; /*没作用，因为inline的功能*/
      }
    </style>
    <div class="table-container">
      嘿嘿
      <div class="table-row">哈哈</div>
      <div class="table-cell">吉吉</div>
      <div class="table-row">哈哈</div>
      <div class="table-cell">吉吉</div>
    </div>
<!--可以认为其他不能设置的属性是默认被设置默认的值的-->

结合after统一设置：

  <style>
      .a::before,
      .a::after {
        content: "";
        display: table;
      }
      .a::after {
        clear: both;
      }
    </style>

4：可以使用overflow:hidden;，前面有过说明，这里就不给出了

一般来说，我们的网站是存放在服务器的，并且可能是linux环境，有些linux可能不支持中文，所以最好是英文路径，要注意，不同操作系统的文件系统一般是不同的，比如windows可以创建.a文件夹，而linux创建的则是隐藏文件，并且windows不能创建*a文件，而linux可以，当然还有很多种情况，这里就不依次说明了

大多数a标签我们都会放在li中，这是因为除了div外li是最好设置的块级元素了，并且可以有选择的指定li里面的a，而不是全部的a

也要注意：一个标签的背景一般优先级比他里面的标签（内容可能不会）的显示（包括背景）要低

伪元素方式的改变：

<style>
    input::placeholder {
      font-size: 20px;
    }
    #a{
      font-size: 200px !important;
    }
   
  </style>
  <body>
    <input class="aa" id="a" type="text" placeholder="hh" />
  </body>

一般有些标签存在这样的操作（所以自然有些是没有的），并且他的优先级是跳出的，也就是说对应的样式都操作后，我才操作，所以看起来是最高的优先级

在前面说明了一个元素本身的相对平齐，这里给出一个关于图片的操作：

 <style>
      div {
        width: 200px;
        height: 200px;
        background-color: red;
        line-height: 200px;
      }
    </style>
    <div>
      <img src="../3.jpg" width="100" height="100" />
      <span>33</span>
    </div>

执行后，你可以很明显的看见字体在对应的下面，但是图片虽然受行高影响，但是只是针对其最下面的地方，那么既然行高也不能解决居中问题（垂直），有什么办法可以解决呢，看如下：

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: red;
        line-height: 200px; /*首先让字体进行垂直居中*/
      }
      div img {
        vertical-align: middle; /*将原来因为文档流排列的方式，变成中间开始（完全的中间，具体为什么，肯定是通过计算的，就如auto也是通过计算得到边距的，具体可以百度），一般默认是16个像素（有文字的话）（这里后面会说明的）开始的，那么基准既然改变，那么增加33字体大小也会改变具体可以将img标签换成<span>22</span>就知道了*/
      }
    </style>
    <div>
      <img src="../3.jpg" width="100" height="100" />
      <span style="font-size: 30px">33</span>
    </div>

定位（定位只是浏览器操作方式的处理，以及是否关联的影响方式，所以存在浮动可以通过样式来使得高度关联进行处理）：

网页常见布局方式：

标准流：

1：块级元素独占一行，即垂直布局

2：行内元素或者行内块元素一行显示多个，即水平布局

浮动：

1：可以让原本垂直布局的块级元素变成水平布局

定位：

1：可以让元素自由的摆放在网页的任意位置

2：一般用于盒子之间的层叠情况

3：这是正常的脱标

设置定位方式：属性名：position

一般包括如下：

设置偏移值：

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个）

一般来说都存在时，以top和left为主（比如：所以当左和右同时存在时，那么只有左起作用），与margin类似，这是权重的原因（包括margin的说明，当然还有其他以左上说明的，都是这样，如padding在固定时的字体撑开），左上大于右下（左对应右，上对应下）

其中正常的脱标也有很多情况（如相对定位），在后面会说明

 <style>
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        left: 050px; /*050就是50，这种细节是没有必要的，了解即可*/
        top: 050px;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: black;
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>
<!--相对定位会保留一个原来在文档流的关联，使得一直占用位置（真正的），这里与我们的正常脱标是一个区别
由于只是保留，所以浮动操作后的位置也会操作的（宽度），即相对定位可以和浮动一起操作（绝对定位可不行哦，他直接固定相应起始点了（左上角））
-->

相对定位是参照原来的位置的，这里要注意

静态定位：position: static;

静态定位是默认值（即默认定位），就是之前认识的标准流（脱离也就不是他的意思（如相对，绝对），即不是静态定位的，一般我们都会认为是脱标，虽然浮动默认也是他，但是也脱离的，这是因为样式的设置导致某些变量改变，那么我手动改变也行）

既然脱离了他，那么排列方式就是不同，相当于他们是不同的排列方式，所以需要学习成本，即需要记住他们的一些特点

绝对定位：position: absolute;

拼爹型定位，相对于非静态定位的父元素进行定位移动（简单来说，如果父元素（包括父子的父子，以此类推）是默认的定位，那么我的起始位置就是body内容的左上角（不是元素哦，所以padding起作用），但是这个时候定位是看浏览器的（所以margin，和padding都没有作用），即html，否则我的起始位置就是父内容的左上角，但是定位是父元素（包括父子的父子，以此类推）（所以padding没有作用，但是margin有），那么定位因为绝对定位直接就默认你一开始在左上角，无论其他元素是否将你排版操作）

（包括父子的父子，以此类推）这个意思代表：找父，如果他设置了定位，那么就以他为准，如果不是，继续找他的父子，以此类推

 <style>
      .a {
        position: relative;
        top: 100px;
        width: 500px;
        height: 500px;
        background-color: red;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: black;
      }
      .c {
        position: absolute;
        top: 10px;
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
    <div class="a">
      <div class="b"></div>
      <div class="c"></div>
    </div>
    <div class="b"></div>

<!--
left
top
right
bottom
上面只是代表距离
与margin类似，但是只是类似，margin的left自己移动，right对方移动，使得满足，但是这里的对方是父，所以只能是我去满足了，所以如果是right，那么我会到右边去，自己可以测试（虽然起始位置是内容左上角）


注意：绝对定位的操作样式需要存在移动来进行启动（但是这个时候，在少方向的情况下，少的一方还是不会改变当前对于距离的，或者说可以看成单纯的操作位移，只是绝对会移动真正占用位置（无非也是变量的作用），而位移与相对一样不会移动，所以位移在某个方面也是相对，只是他并没有某些信息来与定位操作哦，如z-index样式属性，或者绝对定位的子绝父相），否则单纯的position: absolute;始终默认在当前行的左上角（前提没有被占用），也就是说，单纯的只操作display（其他定位也是这样，但是一般只有静态和绝对，以及固定存在方位，默认的定位没有，所以默认不操作方位（可能对应的属性加上了删除，或者颜色发生了改变，类似于继承的颜色，可能设置了某些属性形成的，所以并非一定是继承才会出现）），并且绝对定位默认变成block（但是并不操作他的一行，因为他自身脱离，但也不完全脱离（因为考虑了占用），是属性的操作，为什么不只是操作部分呢），而不是保持原样，定位操作任何元素都可，就如浮动一样，或者说脱离都可，因为并不看display，而像一些只看块的，实际上是因为display本身的性质造成的，而这里直接不看，所以都可
-->

要注意：窗口缩放会导致内容移动的（窗口不属于任何，所以基本上任意排列都可以操作他，在前面可能说明了：一般窗口属于文档流的，但实际上只是html，而不是窗口）

<style>
      .b {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0px; /*看浏览器的*/
        background-color: black;
      }
    </style>

    <div class="b"></div>

 <style>
      .a {
        position: absolute;
        /* margin: 0 auto; 脱离了文档流，不能使用这个 */
        left: 50%; /*移动当前父内容（不是元素）一半的宽度（可以操作文档流的，%是存在关联的），如果父没有宽度，继续找父，直到找到窗口，也就是html的宽度*/
        margin-left: -250px; /*脱标，会导致所占位置发生改变（是真正的），而脱标（三个定位也是的，如静态，绝对，固定等等）的margin则是以获取当前所占位置进行操作的（所以可以认为随时的移动，可以自己测试），而不会获取其他元素或者脱标的margin信息（浮动和相对他比较特殊，属于半脱标（因为宽度，使得有某种联系，但是他只能操作浮动和元素的margin，脱标的还是不能），很明显，这里考虑的是真正的，自然是绝对定位）
          实际上无论是否脱标，在底层基本都是属性的变化而已，由于这种变化我们并不熟悉，所以也只能记一记他们的作用，除非你去阅读浏览器源码
          */
        width: 500px;
        height: 500px;
        background-color: pink;
      }
    </style>
    <div class="a"></div>
<!--上面可以使得居中的-->

上面有个缺点，子盒子宽度变化后需要重新改代码，所以需要这样做：

  <style>
      .a {
        position: absolute;

        left: 50%;
        /*表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码*/
        transform: translateX(-50%); /*也存在translateY*/
        width: 500px;
        height: 500px;
        background-color: pink;
      }
    </style>
    <div class="a"></div>
<!--
可以认为他内部是获取宽度，除以2，然后赋值给margin-left:或者代表他的变量信息
当然，反正是浏览器的操作，具体需要看浏览器的

当然，由于大多数他们的移动起始下标自然也是左上角为起始（可以看出x，y，且是整体的，可以看成整体的改变，并且是整体的改变，所以任意改变位置的都可以互相影响，所以这里和其他定位的改变位置都是互相影响的，即改变x，y，自然是对同一个影响，也就是互相影响了），大多数都是这样，注意即可，这就是为什么需要-50%来移动自身到中间的一个主要原因
-->

完全居中：

 <style>
      .a {
        position: absolute;

        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -250px;
        width: 500px;
        height: 500px;
        background-color: pink;
      }
      .b {
        position: absolute;

        left: 50%;
        top: 50%;
        /*transform: translateX(-50%);，前面是操作X的*/
        transform: translate(-50%, -50%); /*左边50代表左右，右边代表上下，如果只有一个，那么就只操作左右，而不是都操作，这里要注意*/
        width: 600px;
        height: 600px;
        background-color: black;
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>

现在我们根据前面的知识来写一个项目（在前面我们基本并没有给出案例，因为就算给出案例，也并不能很好的巩固知识，因为比较容易，而到现在，基本上是比较不容易的了，那么为了巩固知识，我们总得需要一个案例来操作的，那么这个项目就是一个非常好的案例，几乎涵盖了大部分知识，以此来补充前面没有案例的知识巩固）：

首先给出一个psd文件和图片文件（后面的项目我们就不给出psd文件了，因为源码已经给出了，这里给出psd是保证你知道流程即可）：

下载地址：

链接：https://pan.baidu.com/s/193yR8DkQXGypTchH10G-2Q

提取码：alsk

首先我们打开psd文件，使用前面的PxCook工具，自己看看，现在我们来进行编写：

项目如下：

记得将前面的图片放入到images中（你可以选择自己来根据psd文件来写出网页，然后看后面的代码，或者先看后面的代码，然后自己写，这里最好自己手动复刻一个，无论是否完全一致，只要你复刻了，就是一个好的事情）

在这之前，我们首先需要定义初始样式（index.css)：

/*保证宽高绝对是元素的宽高（虽然也可以被撑开）*/
* {
  margin: 0;
  padding: 0;
  /* 內减模式 */
  box-sizing: border-box;
}

/*去掉li的默认样式（即序号）*/
li {
  list-style: none;
}

/*去掉a的下划线样式*/
a {
  text-decoration: none;
}

/*解决浮动高度问题*/
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*背景颜色*/
body {
  background-color: #f3f5f7;
}

/* 版心：代表规定的元素的样式*/
.wrapper {
  width: 1200px;
  margin: 0 auto;
}

然后再index.html中添加如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 网站的首页，所有网站的首页都叫index.html, 因为服务器找首页基本都是找index.html -->
    <!-- 布局: 从外到内，从上到下，从左到右 -->
  </body>
</html>

现在我们开始写头部：

我们在index.css中加上如下对应的css：

/* 头部 */
.header {
  height: 42px; /*根据图来得到的*/
  margin: 30px auto;
}

h1{
    float: left;
}
/* 导航 */
.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li{
    float: left;
    margin-right: 26px;
}

.nav li a{
    display: block;
    height: 42px;
    padding: 0 9px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}

/* 搜索 */
.search {
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}

.search input {
    float: left;
    padding-left: 20px;
    width: 360px;
    height: 38px;
    border: 0; /*0就代表没有边框的意思，其他的一般需要样式，否则单纯的如10px没有作用*/
}

/* 控制placeholder的样式 */
.search input::placeholder {
    font-size: 14px;
    color: #bfbfbf;
}

.search button {
    float: left;
    width: 50px;
    height: 38px;
    background-image: url(../images/btn.png);
    border: 0;
}

.user {
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}
.user img {
    /* 调节图片垂直对齐方式, middle:居中 */
    vertical-align: middle;
}

在index.html中加上如下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 网站的首页，所有网站的首页都叫index.html, 因为服务器找首页基本都是找index.html -->
    <!-- 布局: 从外到内，从上到下，从左到右 -->
    <!-- 头部header: 负责头部区域的样式, wrapper只负责版心效果 -->
    <div class="header wrapper">
      <h1>
        <!--主要的地方基本都用h1-->
        <a href="#"><img src="./images/logo.png" alt="" /></a>
      </h1>
      <!--导航-->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>

      <!--搜索-->
      <div class="search">
        <input type="text" placeholder="输入关键词" />
        <button></button>
      </div>

      <!-- 用户 -->
      <div class="user">
        <img src="./images/user.png" alt="" />
        <span>lilei</span>
      </div>
        
        <!--一个div中包含多个div-->
    </div>
  </body>
</html>

现在我们来写轮播图部分

在index.css中加上如下：

/* 轮播图 */
.banner {
  height: 420px;
  background-color: #1c036c;
}

.banner .wrapper {
  height: 420px;
  background-image: url(../images/banner2.png);
}

.banner .left {
  float: left;
  padding: 0 20px;
  width: 190px;
  height: 420px;
  background-color: rgba(0, 0, 0, 0.3);

  /* 行高属于控制文字的属性，能继承 */
  line-height: 44px;
}

.banner .left span {
  float: right;
}

.banner .left a {
  font-size: 14px;
  color: #fff;
}

.banner .left a:hover {
  color: #00b4ff;
}

.banner .right {
  float: right;
  margin-top: 50px;
  width: 228px;
  height: 300px;
  background-color: #fff;
}

.banner .right h2 {
  height: 48px;
  background-color: #9bceea;
  text-align: center;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
}
.banner .right .content {
  padding: 0 18px;
}

.banner .right .content dl {
  padding: 12px 0;
  border-bottom: 2px solid #e5e5e5;
}

.banner .right .content dt {
  font-size: 16px;
  color: #4e4e4e;
}

.banner .right .content dd {
  font-size: 14px;
  color: #4e4e4e;
}

.banner .right .more {
  display: block;
  margin: 4px auto 0;
  width: 200px;
  height: 40px;
  border: 1px solid #00a4ff;
  font-size: 16px;
  color: #00a4ff;
  font-weight: 700;
  text-align: center;
  line-height: 40px;
}

index.html中加上如下：

 <div class="banner">
      <div class="wrapper">
        <div class="left">
          <ul>
            <li>
              <a href="#">前端开发<span>></span></a>
            </li>
            <li>
              <a href="#">后端开发<span>></span></a>
            </li>
            <li>
              <a href="#">移动开发<span>></span></a>
            </li>
            <li>
              <a href="#">人工智能<span>></span></a>
            </li>
            <li>
              <a href="#">商业预测<span>></span></a>
            </li>
            <li>
              <a href="#">云计算&大数据<span>></span></a>
            </li>
            <li>
              <a href="#">运维&从测试<span>></span></a>
            </li>
            <li>
              <a href="#">UI设计<span>></span></a>
            </li>
            <li>
              <a href="#">产品<span>></span></a>
            </li>
          </ul>
        </div>
        <div class="right">
          <h2>我的课程表</h2>
          <div class="content">
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
          </div>
          <a href="#" class="more">全部课程</a>
        </div>
      </div>
    </div>

然后我们继续补充index.css：

/* 精品推荐 */
.goods {
  margin-top: 8px;
  padding-left: 34px;
  padding-right: 26px;
  height: 60px;
  background-color: #fff;
  /*box-shadow操作阴影的，以后会说明的，这里写上即可*/
  box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);

  line-height: 60px;
}

.goods h2 {
  float: left;
  font-size: 16px;
  color: #00a4ff;
  font-weight: 400;
}

.goods ul {
  float: left;
  margin-left: 30px;
}

.goods ul li {
  float: left;
}
.goods li a {
  border-left: 1px solid #bfbfbf;
  padding: 0 30px;
  font-size: 16px;
  color: #050505;
}
.goods .xingqu {
  float: right;
  font-size: 14px;
  color: #00a4ff;
}

继续补充index.html：

<!-- 精品推荐，与banner同级，以后给出的基本都是同级，除非有特别的说明-->
    <div class="goods wrapper">
      <h2>精品推荐</h2>
      <ul>
        <li><a href="#">JQuery</a></li>
        <li><a href="#">Spring</a></li>
        <li><a href="#">MySQL</a></li>
        <li><a href="#">JavaWeb</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">Mybatis</a></li>
      </ul>
      <a href="#" class="xingqu">修改兴趣</a>
    </div>

继续补充index.css：

/* 精品课程 */
.box {
  margin-top: 35px;
}

.box .title {
  height: 40px;
}
.box .title h2 {
  float: left;
  font-size: 20px;
  color: #494949;
  font-weight: 400;
}
.box .title a {
  float: right;
  margin-right: 30px;
  font-size: 12px;
  color: #a5a5a5;
}

.box .content li {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 228px;
  height: 270px;
  background-color: #fff;
}
.box .content li:nth-child(5n) {
  margin-right: 0;
}
.box .content li h3 {
  padding: 20px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box .content li p {
  padding: 0 20px;
  font-size: 12px;
  color: #999;
}
.box .content li span {
  color: #ff7c2d;
}

继续补充index.html：

<!-- 精品推荐课程 -->
    <div class="box wrapper">
      <div class="title">
        <h2>精品推荐</h2>
        <a href="#">查看全部</a>
      </div>
      <div class="content clearfix"> <!--操作这个来清除浮动-->
        <ul>
          <li>
            <a href="#">
              <img src="./images/course01.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course02.png" alt="" />
              <h3>Android 网络图片加载框架详解</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course03.png" alt="" />
              <h3>Angular 2 最新框架+主流技术+项目实战</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Android Hybrid APP开发实战 H5+原生！</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Android Hybrid APP开发实战 H5+原生！</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course01.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course02.png" alt="" />
              <h3>Android 网络图片加载框架详解</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course03.png" alt="" />
              <h3>Angular 2 最新框架+主流技术+项目实战</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Android Hybrid APP开发实战 H5+原生！</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Android Hybrid APP开发实战 H5+原生！</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

继续补充index.css：

/* 版权 */
.footer {
  margin-top: 40px;

  padding-top: 30px;

  height: 417px;
  background-color: #fff;
}

.footer .left {
  float: left;
}

.footer .left p {
  margin: 20px 0 10px;
  font-size: 12px;
  color: #666;
}
.footer .left a {
  display: inline-block;
  width: 120px;
  height: 36px;
  border: 1px solid #00a4ff;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  color: #00a4ff;
}
.footer .right {
  float: right;
}

.footer .right dl {
  float: left;
  margin-left: 100px;
}

.footer .right dd {
  font-size: 12px;
  color: #333333;
}

.footer .right dd a {
  font-size: 12px;
  color: #333333;
}

继续补充index.html：

 <!--底部-->
    <div class="footer">
      <div class="wrapper">
        <div class="left">
          <img src="./images/logo.png" alt="" />
          <p>
            学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
            © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
          </p>
          <a href="#">下载APP</a>
        </div>
        <div class="right">
          <dl>
            <dt>关于学成网</dt>
            <dd><a href="#">关于</a></dd>
            <dd><a href="#">管理团队</a></dd>
            <dd><a href="#">工作机会</a></dd>
            <dd><a href="#">客户服务</a></dd>
            <dd><a href="#">帮助</a></dd>
          </dl>
          <dl>
            <dt>新手指南</dt>
            <dd><a href="#">如何注册</a></dd>
            <dd><a href="#">如何选课</a></dd>
            <dd><a href="#">如何拿到毕业证</a></dd>
            <dd><a href="#">学分是什么</a></dd>
            <dd><a href="#">考试未通过怎么办</a></dd>
          </dl>
          <dl>
            <dt>合作伙伴</dt>
            <dd><a href="#">合作机构</a></dd>
            <dd><a href="#">合作导师</a></dd>
          </dl>
        </div>
      </div>
    </div>

至此，该项目编写完毕，现在自己手动写一写吧（如果可以自己写出来，那么说明知识已经巩固，稍微看一看也是可以的，当然，你也可以选择修改，因为并不需要做到完全相同，即尽量类似即可）

使用相对定位操作图片：

回到这里（修改部分）：

<li>
            <a href="#">
              <img src="./images/course01.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
              <img src="./images/btn.png" alt="" class="hot">  <!--这里加上-->
            </a>
          </li>

修改如下：

index.css：

.box .content li {
  position: relative;
}
.box .content li .hot {
  position: absolute;
  top: 4px;
  right: -8px;
}

执行看看效果吧

现在我们再来操作这个：

给出图片下载地址：

链接：https://pan.baidu.com/s/1k3iEWo4Lvv1OCWBt0OUzSQ

提取码：alsk

这里理解即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
  
      .nav {
        height: 40px;
        border-bottom: 1px solid #ccc;
      }
  
      ul {
        list-style: none;
        width: 1200px;
        margin: 0 auto;
      }
  
      ul li {
        float: left;
        width: 20%;
        height: 40px;
        border-right: 1px solid #ccc;
        /* 自动内减 */
        box-sizing: border-box;
        text-align: center;
        line-height: 40px;
      }
  
      ul .last {
       border-right: none;
      }
  
      ul li a {
         display: block;
        height: 40px;
        text-decoration: none;
        color: #000;
      }
  
      ul li .app {
        position: relative;
      }
  
  .code{
    position: absolute;
    left: 50%;
    top: 41px;
    transform: translateX(-50%);
  }
    </style>
  </head>
  <body>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="#">我要投资</a></li>
        <li><a href="#">平台介绍</a></li>
        <li><a href="#">新手专区</a></li>
      
        <li><a href="#" class="app">手机微金所<img src="./images/code.jpg" class="code"></a></li>
        <li class="last"><a href="#">个人中心</a></li>
      </ul>
    </div>
  </body>
</html>

同样的，这里看一看理解理解

<style>
      .bann {
        position: relative;
        width: 1226px;
        height: 600px;
        margin: 0 auto;
      }
      .mask {
        position: absolute;
        bottom: 0;
        width: 100%; /*脱离文档流不只是对方得不到，我也是得不到的，所以在某种程度上，好像是具备行内块的特点，而相对定位保留了对应的文档流关联，所以可以得到，即不是单纯的宽度占用（浮动），而是对方可见，所以他可以存在对方信息的获取，而不是占用后使得对方根据文档操作*/
        height: 150px;
        background-color: rgb(0, 0, 0, 0.5);/*背景是背景，而不是元素，所以内容1并不会影响*/
      }
    </style>
    <div class="bann">
      <img src="./images/bg.jpg" alt="" />
      <div class="mask">1</div>
    </div>

这里需要补充一个部分，auto他也是有底线的，也就是说，就算你将窗口变小，那么在一定程度上，他不会变的很小了，一般取决于他本身内容的多少来决定

并且由于脱标一开始是看自身位置的，所以父元素的移动也会导致他们的移动（即慢于正常元素进行显示，即后操作，前面虽然也说明过）

固定定位：

 <style>
      div {
        position: fixed; /*固定定位脱标（不会改变display，固定定位的内容一般并不会默认与浮动类似，也就是说，其内容的div还是按照自身来处理，而不是后面的flex的处理（布局处理，后面会说明的，现在了解即可）），不占用原来真正位置，并且跟随窗口移动（特别的属性关联窗口），使得在滑动时，不在整个html中（窗口不等于html，只是html在其里面显示，且html是很大的，一般如果html超过了窗口，那么窗口就需要移动，窗口有时候可以看成body），只跟随窗口，或者跟随body（这种情况可以认为还在html中）
          脱标在一定程度上只是表示与display不同的排版而已，是相当于另外一个知识，但却保留了dispaly的一些操作，如可以加宽高等等
          */
        left: 20px;
        top: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
    <span
      >🤭嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
      嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</span
    >
    <div></div>
    <span
      >🤭嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
      嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</span
    >
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    1
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    1
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    1
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    1
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    1


<!--注意：固定定位默认也存在隐藏超出的内容的情况，其他的定位一般是没有的，这里需要注意-->

我们已经学习了标准流，浮动，定位（不包括静态），并且从浮动开始主要说明，他们都是不同的知识，所以某些特定特性也不相同，且都是不同的排版，所以都需要记住，这并没有捷径可言（你学习英语是否必须要背单词呢）

元素层级关系：

不同布局方式元素的层级关系：标准流 < 浮动 < 定位，也就是说，定位永远先显示给你看，即飘在最上面

不同定位之间的层级关系：相对、绝对、固定默认层级相同，此时HTML中写在下面的元素层级更高（相同的都是这样，即包括默认层级（标准流）和浮动），会覆盖上面的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <style>
      .a {
        position: absolute;
        left: 20px;
        top: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b {
        position: absolute;
        left: 10px;
        top: 40px;
        width: 100px;
        height: 100px;
        background-color: black;
      }
      .c {
        position: absolute;
        left: 20px;
        top: 250px;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .d {
        position: absolute;
        left: 10px;
        top: 240px;
        width: 100px;
        height: 100px;
        background-color: black;
        z-index: -1; /*数字越大，层级越高，只操作与定位（层级相同）的情况，若是标准流，那么无论怎么设置，都绝对是低于定位的，所以一般情况下浏览器为了避免不必要的生效，即直接让z-index只在定位时才会生效，在其他布局方式时，虽然他的值是改变的了，但是改变了值就一定使用或者生效吗*/
        /*
        默认的z-index为0，在计算样式中代表auto，表示按照默认操作（在下面的元素层级更高）
        而之所以也认为默认是0，是因为相同的z-index也是默认操作的，而正好0是临界点
          当层级相同时，那么就按照正常的操作来进行，比如内容优先显示，写在下面的优先显示等等
        */
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>
    <!--此时HTML中写在下面的元素层级更高，会覆盖上面的元素，无论对应的style的先后是什么-->

    <div class="c"></div>
    <div class="d"></div>
  </body>
</html>

前面我们使用过 vertical-align: middle，并且也说明过平齐的概念，实际上他们都会存在一个基准（基线），基准由排版形成

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline），一般是有效内容的基线，如下面的p就没有一个角，并且基线是属于文档流的操作，所以浮动，定位等等不会这样参照

这就是为什么前面操作时，其他元素中文字会自动到下面的原因，因为基线，而没有文字，那么就是参照元素本身的基线（也就是相对平齐），但是前面我们并没有给出文字和元素之间的平齐关系，那么文字和元素之间的平级一般按照谁的基线来决定呢，答：按照元素的基线（所以若一个元素存在内容，一般会使得该元素的基线对照其他元素了，而不是自己），你可以设置图片就知道了（且只会与内容有关，而不是元素本身有关，当然没有内容，那么就与元素有关，而与元素有关，自然就会考虑除了内容宽高外，边框或者边距也会算的）

装饰：

一般的，我们对基线操作是一种装饰，通常会使用vertical-align

注意：对应是先对齐基线，然后在基线上添加数据的

很明显，我们之前操作的都是上面的默认即baseline，查看计算样式时，也可以发现是他，而前面的middle的计算很明显，就是改变基线的位置，具体基线计算方式肯定也是底层原因，这是需要看浏览器源码的middle

 <style>
      input {
        height: 50px; /*按钮的元素高度是50（他有内减），但是input的内容高度是50，所有他们是不同的高，所以说，input的属性，何尝不是在div上的样式补充呢*/
        box-sizing: border-box; /*使得他们的高度相同，他们的高度是相同的，但是好像还没有对齐，这就是基线的原因了（text自带内容，实际上文字没有写的地方就是基线，只是大多数并没有给出占用，比如单词的文字，而input就存在占用的）*/
        /*改变基线*/
        vertical-align: middle; /*中部对齐，也就是基线都在元素的中间，由于整体高度相同（内减了，也就是看元素本身的操作），那么基线也都相同*/
      }

      /*基线去符合的优先级：middle < baseline < top < bottom（该顺序并不唯一，随着时间的改变（浏览器的改变，如升级，或者降级），其中父元素的大于子元素的，所以父元素的middle，大于子元素的bottom，可能该顺序也会改变或者完全改变），符合的意思就是，如果对方的基线优先级比你大，那么就按照他的基线排列
    如果相等，那么他继续操作即可（如可以改变左边的不动），若是默认，自然按照元素和内容之间的关系来排列（前面有说明的）
    */
    </style>
    <input type="text" /><input class="a" type="button" value="搜索" />

<!--验证input的text是否占用-->
<img src="./images/1.jpg" alt="" /><input type="text" />

执行后，可以发现，对齐元素，且是input占用的，所以说，input的确是存在占用的

现在我们来说明一下vertical-align的其他三种排列规则，前面的默认已经说明了（元素或者内容的对照），首先看如下代码：

 <style>
      .a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b {
        display: inline-block;
        width: 150px;
        height: 150px;
        background-color: black;
      }
      .c {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
    <div class="a"></div>
    <div class="b">1</div>
    <div class="c">2</div>

经过大量的测试，得出结论（这些属性的出现，会使得以文字对应基线为基准，而不是元素了，除非没有文字，那么这就有很多种情况，这里就不列出了，这里只考虑上面示例的说明，具体其他可以自己测试）：

vertical-align: top：左边元素不动，找最上面的基线（由于左边元素不动，那么需要考虑他才可），若自身是最上面，那么其他元素对齐我的上面

vertical-align: middle：左边元素不变，找中间的基线（由于左边元素不动，那么需要考虑他才可），若自身是最上面，那么其他元素对齐我的中间，并且只是基线是中间，所以在基线上的文本可能并不会在中间，这里需要注意

vertical-align: bottom：直接找最下面的基线元素，他不动，然后其他元素对齐他，若自身是最下面的，那么他直接找第二最下面的基线元素

基线可以多，但不会少，所以文字的换行，并没有删除原来的基线，并且元素对准都是其基线的对准，并且是优先考虑自身下面的基线来对准（所以文字的换行，也会导致对准的改变），并且基线的bottom不会与父元素交互处理，且top，和middle在父子元素中只考虑他们内容的基线处理，且通常对照父，这里的说明比较麻烦，建议进行测试（基线的设置通常会影响全局的）

<style>
      img {
        vertical-align: middle;
      }
    </style>
    <img src="./images/1.jpg" alt="" /><input type="text" />

内容都是在基线操作的，有些内容由于字体自身原因，在添加时，从左上角添加，并且在行高固定的情况下，可能并没有突出（字体的某些笔画突出），所以并不是没有到最左上角，了解即可，当字体写上去时，他就有基线了，否则是没有的（除非有占用，如input，因为文字并不是唯一出现的基线，只要是文本（内容）即可，所以除了文字外，的确也有占用）

 <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: pink;
      }
      input {
        vertical-align: top; /*试一下删除他*/
      }
    </style>
    <div class="father">
      <input type="text" />
    </div>

一般基线只考虑行内和行内块，块级不考虑（一般其他的排列方式也是不会考虑的，如浮动，flex布局等等），因为块级由于换行，所以基本是操作不到的，所以也规定不会考虑块级，同样的类似于浮动的也不会考虑（不知道是因为块级，还是什么原样呢，应该是浮动自身的原因）

 <style>
      .father {
        width: 400px;
        background-color: pink;
      }
    </style>
    <div class="father">
      <img src="./images/1.jpg" alt="" />1
    </div>

按道理说，图片撑开的话，他应该不会有空隙，可是上面的执行还是有间隙的，这是因为最终还是看最后的文字来的（图片基线与其对齐），所以撑开这个操作，是撑开到最后一个基线，并进行对齐，但是由于行高的存在，导致最终的基线稍微往上，你可以设置最小的行高，如12px，就可以发现贴合了，当然我们可以改变基线：

<style>
      .father {
        width: 400px;
        background-color: pink;
      }
      img {
        vertical-align: middle;
      }
    </style>
    <div class="father"><img src="./images/1.jpg" alt="" />lahg</div>

这样最下面就没有基线的存在了，自然也不会出现间隙，当然，我们还可以这样：

 <style>
      .father {
        width: 400px;
        background-color: pink;
      }
      img {
        display: block;
      }
    </style>
    <div class="father"><img src="./images/1.jpg" alt="" /></div>

上面代表我直接不看基线了，自然就不会出现这样的情况（块级不考虑的）

   <style>
      .father {
        width: 600px;
        height: 600px;
        background-color: pink;
        /*导致对应的图片的占用基线发生改变，对与已有的图片的高度来说，行高的影响首先需要大于自身的高度
   否则只会看自身，所以如果这里的600没有超过图片高度的话，他的行高就是自身的高度，而考虑自身高度时，他的基线始终都是图片的下面，因为他始终不动的
   如果超过了，那么按照这个600来，这时候，基线可能发生改变*/
        line-height: 600px;
      }
    </style>
    <div class="father"><img src="./images/1.jpg" alt="" />1</div>

可以这样解决：

 <style>
      .father {
        width: 600px;
        height: 600px;
        background-color: pink;
        line-height: 600px;
        /*
          text-align: center; 文本居中，这样我们的图片就真的到中间了
          */
      }
      img {
        vertical-align: middle; /*由于行高的操作，导致文字是居中的，那么当我们子元素操作时，由于通常对照父，所以图片也就居中了*/
      }
    </style>
    <div class="father"><img src="./images/1.jpg" alt="" />1</div>

大多数上面的说明，只是浏览器的规定，我们并不能改变，所以这也是为什么知识也是需要记忆的原因，你认为数学有记忆吗，1+1=2是你记住的吗，实际上是的

光标类型：设置鼠标光标在元素上时显示的样式

属性名：cursor，常见的属性值：

 <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: default; /*鼠标在这个元素里面的形状*/
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: pointer; /*a标签的样式（前提是触发（href）），就是这个手型*/
      }
      .c {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: text;
      }
      .d {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: move;
      }
    </style>
    <div>div</div>
    <div class="a">div</div>
    <div class="b">div</div>
    <div class="c">div</div>
    <div class="d">div</div>

只是代表鼠标显示的样式，并没有其他的操作，只是我们会对这些显示进行操作而已，所以并非工字型就必须操作复制的，注意即可，在有些情况我们可以对工字型的双击进行处理，即以单纯处理得到或者一句话的处理得到等等，具体可以百度

边框圆角：

属性名：border-radius

常见取值：数字+px 、百分比（自身元素的，如50%代表自身元素的一半宽高，当然，可能在某些版本下代表父元素，但是现在一般是自身元素了），他的原理是：

所以对应的值就是半径，并且这个值是对应的宽高，这样说明比较麻烦难懂，直接看代码：

 <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px auto;
        border-radius: 10px;
      }
    </style>
    <div></div>

四个角都有一定的圆角了，上面是四个角，这里我们指定角：

 <style>
      div {
        width: 100px;
        height: 100px; /*height: 1 00px;这样的加上删除线不操作*/
        background-color: red;
        margin: 50px auto;
        border-radius: 10px 20px 30px 40px;
        /*
         border-radius取值（设置的宽高都是相等的）：
         10px，代表左上，右上，右下，左下，都是10px的半径
         10px 20px，代表左上，右下，都是10px的半径，右上，左下，都是20px的半径
         10px 20px 30px，代表左上是10px的半径，右上，左下，都是20px的半径，右下是30px的半径
         10px 20px 30px 40px，代表左上是10px的半径，右上都是20px的半径，右下是30px的半径，左下是40px
         所以我们将左上和右下，看成margin的上下就非常明白了（同样也是顺时针的）

        */
      }
    </style>
    <div></div>

注意：当四个位置的宽高（一般都是相等的）大于元素宽高时，通常默认对应的比例（元素的总比例，元素的宽高是210，且假设是400和20，那么比例就是20:1，将210分成21份，我占用20份，即我是200，你是10，当然，宽高并非相同，但是操作是相同的）来操作宽高大小，否则就是操作其自身的，同样也适用于百分比的

最后：由于他改变的是元素的形状，所以通常也会继承元素自身的显示作用，即显示出的范围，这也就导致，如果你的显示超过了圆形，那么覆盖，或者移除（通常是覆盖，因为存在轮播图，但是在没有干预的情况下，要么出界，要么移除，而覆盖是需要一些样式的，如overflow: hidden;，隐藏就是覆盖），大多数图片在元素中，如果是作为背景，通常会进行移除（若是覆盖的话，铺满不是爆了，移除，那么后面不能铺，当没有铺的，自然结束），而作为内容显示，那么通常是覆盖（但是一般是出界，除非他是使用background-image来操作的图片，而不是img标签，这样虽然也是移除，除非使用样式来隐藏覆盖），因为背景一般不会操作移动，而图片会，但也需要具体看当时的情况

溢出部分显示效果：

溢出部分：指的是盒子内容部分所超出盒子范围的区域

属性名：overflow：

 <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        overflow: hidden; /*一般来说，这个溢出是指溢出内容，所以就算在边框上也会算溢出的*/
      }
    </style>
    <div>
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>

滚动条为什么可以这样呢，实际上可以认为是内容的移动，只是多出的隐藏了而已

元素本身隐藏：

常见属性：

visibility：hidden和display：none

区别：

visibility：hidden 隐藏元素本身，并且在网页中占位置，而display：none 隐藏元素本身，并且在网页中不占位置

开发中经常会通过 display属性完成元素的显示隐藏切换，如display：none；（隐藏）、 display：block；（显示）

<style>
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
        visibility: hidden;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: black;
      }
      .c {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: none;
      }
      .d {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>

回到之前的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
  
      .nav {
        height: 40px;
        border-bottom: 1px solid #ccc;
      }
  
      ul {
        list-style: none;
        width: 1200px;
        margin: 0 auto;
      }
  
      ul li {
        float: left;
        width: 20%;
        height: 40px;
        border-right: 1px solid #ccc;
        /* 自动内减 */
        box-sizing: border-box;
        text-align: center;
        line-height: 40px;
      }
  
      ul .last {
       border-right: none;
      }
  
      ul li a {
         display: block;
        height: 40px;
        text-decoration: none;
        color: #000;
      }
  
      ul li .app {
        position: relative;
      }
  
  .code{
    position: absolute;
    left: 50%;
    top: 41px;
    transform: translateX(-50%);
  }
    </style>
  </head>
  <body>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="#">我要投资</a></li>
        <li><a href="#">平台介绍</a></li>
        <li><a href="#">新手专区</a></li>
      
        <li><a href="#" class="app">手机微金所<img src="./images/code.jpg" class="code"></a></li>
        <li class="last"><a href="#">个人中心</a></li>
      </ul>
    </div>
  </body>
</html>

修改如下：

  
  .code{
    position: absolute;
    left: 50%;
    top: 41px;
    display: none;
    transform: translateX(-50%);
  }

  .nav li a:hover img{ 
      /*
      这里进行补充，若要操作最终的样式，需要都直接的满足，如果是单纯的找，如.nav li a:hover img，默认是满足的，而由于这里的a:hover的存在，所以并不满足，那么就能实现我们移动到a上，使得来显示img了
      
      */
    display: inline;
  }

元素整体（只要是元素里面的，那么就会操作，比如背景，文字等等，可以自己测试，而不只是对具体指定的颜色操作透明，如前面的背景颜色操作的透明）透明度：

<style>
      div {
        width: 500px;
        height: 500px;
        background-color: red;
        opacity: 0.5; /*这个属性为0或者0.0，相当于操作了visibility: hidden;，小于0为0，大于1为1，大多数的属性边界都是这样的，如颜色中的rgb里面的透明度*/
      }
      .a {
        width: 1000px;
        height: 1000px;
        background-color: black;
        opacity: 1; /*不被覆盖，默认是1的，如果没有写，会被上面的总div设置的，因为你只是覆盖宽高和颜色，这里并没有，即会是设置的*/
      }
    </style>
    <div class="a">
      2
      <div><img src="./images/1.jpg" />一个字</div>
      2
    </div>

精灵图：将多张小图片，合并成一张大图片，这张大图片称之为精灵图，小图片称为精灵小图或者精灵

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

例如：需要在网页中展示8张小图片，8张小图片分别发送 → 发送8次，合成一张精灵图发送 → 发送1次，虽然总量（大小，或者总体不包括连接的传输时间）是一样的，但是建立的连接确少了很多，因为只要一次，自然提供效率

这里给出资源：

链接：https://pan.baidu.com/s/1s0eNee1cd1VKfKGkSCwqBQ

提取码：alsk

<img src="./images/taobao.png" />

   <style>
      span {
        display: inline-block;
        width: 18px;
        height: 24px;
        background-image: url(./images/taobao.png);
        background-position: -3px 0px;
      }
    </style>
    <span></span>

这样我们可以直接操作这个总图片了，并且也只会显示一个小图片，步骤是：

1：创建一个盒子

2：通过PxCook量取小图片大小，将小图片的宽高设置给盒子

3：将精灵图设置为盒子的背景图片

4：通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y，使得移动大图片来只显示小图片，并且盒子是对应取小图片的，即小图片显示完毕

 <style>
      span {
        display: inline-block;
        width: 23px;
        height: 24px;
        background-image: url(./images/taobao.png);
        background-position: 0px -90px;
      }
    </style>
    <span></span>

背景图片大小，在前面也有说明：

语法：background-size：宽度高度

取值：

  <style>
      span {
        display: inline-block;
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(./images/1.jpg);
        background-repeat: no-repeat;
        background-size: 300px 400px; /*取一个，宽高都是他*/
          /*如果要取百分比，一般需要盒子存在宽高，否则是没有的，即设置为0了，这里要注意*/
          /*
          contain，可能留有空白
          cover：可能多出去了，被覆盖了
          */
      }
    </style>
    <span></span>
<!--当然，大多数在工作中，存在图片的盒子一般都会与图片的宽和高相同，所以最后面的两个contain和cover的效果通常是一样的效果-->

前面我们有过这样的写法：background:color image repeat position的格式

 <style>
      span {
        display: inline-block;
        width: 500px;
        height: 500px;
        background: red url(./images/1.jpg) no-repeat 20px 30px;
        background: red url(./images/1.jpg) 20px 60px no-repeat;
        background: red url(./images/1.jpg) 20px 60px/20px 20px no-repeat; /*由于position是连写的，所以可以加上斜杠*/

        /*一般我们是这样的格式：background:color image repeat position/size*/
      }
    </style>
    <span></span>
<!--可以这样：20px /20px 20px，中间的空格在没有其他操作时是无效的，有就有效，比如20px 20px，大多数的样式都是如此-->

文字阴影：

前面我们也操作了一个阴影，如box-shadow，现在我们从学习text-shadow开始：

取值（注意对应图片中的是参数哦，而不是取值或者属性值，所以一个属性存在下面的这四个参数，具体看示例）：

 <style>
      h1 {
        width: 100px;
        height: 100px;
        background: red;
        text-shadow: 20px 10px 4px #000000; /*模糊度不写默认为0，颜色不写，默认为字体颜色，如果选择了可选，那么顺序不能发生改变，除非对方没有，所以可以这样：
          20px 10px 4px #000000; 
          20px 10px #000000; 
          但不能这样：
          20px 10px #000000 4px;，否则删除线，不操作
          */
      }
      h2 {
        width: 100px;
        height: 100px;
        background: red;
        text-shadow: 20px 10px 4px #000000, -20px -10px 4px #000000; /*可以来多个*/
      }
    </style>
    <h1>哈哈</h1>
    <h2>哈哈</h2>

执行测试一下吧

现在我们来说明之前的box-shadow，代表盒子阴影

取值：

之前的我们操作他是这样的：

/*box-shadow操作阴影的，以后会说明的，这里写上即可*/
  box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);

实际上与text-shadow是相同的，只是他操作的是盒子阴影：

<style>
      h1 {
        width: 100px;
        height: 100px;
        background: red;
        box-shadow: 200px 10px 1px red; /*只是对盒子自身形状的变化，所以并不包括内容，实际上文字阴影也是如此，只是文字他本身作为内容而已，其颜色默认也是字体颜色，顺序要求与前面的text-shadow是一样的，否则也是删除线，不操作*/
          /*对应的扩大默认为0px，相当于在原地扩张对应的像素，假如原来的元素宽是100px，扩大为10px，即对应的属性值为10，那么宽是120px，也就是左右各加10px，具体可以自己测试
          
          
          */
      }
      h2 {
        width: 100px;
        height: 100px;
        background: red;
        box-shadow: 20px 10px 4px #000000, -20px -10px 4px #000000; /*可以来多个*/
      }
    </style>
    <h1>哈哈</h1>
    <h2>哈哈</h2>

为了验证是否是左右各加10px，给出测试案例：

<style>
      h1 {
        width: 100px;
        height: 100px;
        background: red;
        box-shadow: 0px 0px 0px 10px black;
      }
      h2 {
        position: relative;
        left: -10px;
        width: 120px;
        height: 120px;
        background: red;
      }
      h3 {
        position: relative;
        left: -10px;
      }
      h4 {
        position: relative;
        left: 150px;
        top: -318px;
        width: 120px;
        height: 120px;
        background: red;
      }
    </style>
    <h1>哈哈</h1>
    <h2>哈哈</h2>
    <h3>哈哈</h3>
    <h4>哈哈</h4>
<!--可以发现，读取是左右各加10px，即我们可以看出来四个方向都操作了扩大10px-->

只要是阴影，一般都被其原来的元素（包括文字）进行覆盖，但是盒子阴影的inset是不同的：

<style>
      h1 {
        width: 100px;
        height: 100px;
        background: red;
        box-shadow: 20px 10px 1px black inset;
        /*inset使得阴影覆盖原来的元素，只是他其他的属性代表发生了改变，即指定地方到左上角为阴影，而不是位置了，具体可以测试，要以测试结果为主，或者可以选择百度看看原理或者概念，测试只是来检验这些概念的而已，所以测试一遍也能作为结果原理来说明*/
      }
    </style>
    <h1>哈哈</h1>

阴影在视觉上是有很大效果的，具体如下：

 <style>
      body {
        background-color: #f3f5f7;
      }
      h1 {
        width: 100px;
        height: 100px;
        background-color: #f3f5f7;
        box-shadow: 0px 2px 3px 0px red; /*因为阴影的存在，可以很明显的看到相同颜色盒子的形状，否则你可以去掉阴影看看是否可以直观的看到*/
      }
      h2 {
        width: 100px;
        height: 100px;
        background-color: #f3f5f7;
        box-shadow: 0px 200px 3px 0px red; /*为了验证，可以将阴影放很远，这样你可以直观的知道阴影对视觉的效果了，视觉这个东西非常神奇，可以研究的话，请读取对应相关的书籍（可以从网上查找）*/
      }
    </style>
    <h1>哈哈</h1>
    <h2>哈哈</h2>

过渡：

属性名：transition

常见取值：

注意：大多数元素可以过渡的根本原因是因为他对应的属性是一个数字，否则对应的属性是不会进行过渡的，这也是为什么宽高可以过渡，但是display不能过渡的原因，而动画是建立在过渡上的（底层是过渡实现的，但是他可能还存在其他操作，所以也就使得他可以完成过渡的操作，但是过渡自身可能操作不了动画），自然也有这样的说明，当然，有些时候，可能也存在可以过渡属性的表，但是不可否认的是，只要你知道了他过渡原理是数字，那么对应的图表就可以选择不看了，这就是说明，只要你知道知识本质，那么就不用记住其知识的表面，所以我们大多数学习知识最好不要去背，而是选择去理解其知识的本质，否则背的再多也会忘记，而知道本质，那么就不会忘记（因为你可以推出来，学习数学也是如此）

在以后学习js时可能（是可能，因为我可能会忘记了）会使用js来完成一个过渡或者动画的（他们都是操作基础代码的，自然可以操作），现在了解即可：

    <style>
      .box {
        width: 200px;
        height: 200px;
        background: red;
        transition: width 2s; /*单纯的2，相当于没有过渡，即直接的变成600px了*/
        /*给width这个属性加上过渡，当他发生变化时，经过过渡中内置的过渡函数来进行像素的持续变化，若你学习过物理，应该知道，速度，位移，时间是可以有联系的（形成函数）
        同样的，对应的函数使得你的变化在2s中操作完毕，自然会考虑移动的速度了，相反的，对应变回来后（下面的鼠标移开（相当于设置回来了，自然也会操作过渡，你移开了，那么你的样式不操作了，自然就操作原来被你覆盖的样式），也是同样的移动速度，并不会由于位移少了，这个移动速度慢一点，因为他的速度只会确定一次，所以当确定是600后，那么他们之间的来回就是相同的速度，一般来说，对一个在css中对一个元素改变，通常是单线程的，具体看后面的例子），简单来说，过渡相当于是一个函数，我们只会根据这个函数来进行操作移动和回退
        */
      }
      .box:hover { /*也可以将过渡的属性放在这里，过渡只是将对应的指定选择器进行保存（所以可以放在这里，但是若是其他选择器那么就不行的，因为若是其他选择器，那么对应的过渡只操作那个选择器，而不是这一个），然后看看他的属性来操作过渡的，所以任何地方都可以，只需要你的选择器是当前的即可，并且css由于是底层存在顺序，所以过渡是会先操作的，这也是我们为什么在写css时，需要顺序的一个原因*/
        width: 600px; /*这里就算直接复制，也不会触发过渡，因为过渡基本的最后处理的，自然不会影响到这个变化，虽然这里由于分开导致过渡属性先设置，但是他一般并不操作样式的直接设置，而是其他的动态设置，所以单纯的没有hover的设置不会过渡，而有hover的就会过渡*/
      }
    </style>
    <div class="box">哈哈</div>
<!--需要注意的是：过渡操作的需要是其设置的属性，如果对应的属性没有设置，而是操作默认的，那么他并不会进行过渡，你可以选择你删除高度，在hover里面加上高度就知道了，也就是说设置覆盖默认时，可能存在一些标记代表他是被设置的，虽然这里并没有具体说明，但可以百度了解-->

为了验证是否是单线程的，我们可以操作如下，即多个操作同样作用与一个元素，看看他是如何过渡：

 <style>
      .box {
        width: 200px;
        height: 200px;
        background: red;
        transition: width 2s;
      }

      .box:hover {
        width: 600px;
      }
      .box:active {
        width: 1000px; /*当我们鼠标移动上去时，我们点击不动，可以发现，他以1000px的速度操作了，当然他放在hover的前面，那么他不会操作，也就是说，他们只能操作一个，且存在有覆盖关系（虽然本来是这样的）*/
      }
    </style>
    <div class="box" id="f">哈哈</div>

所以可以知道的确是单线程的，实际上还不能这样说明，因为其中一个只是被覆盖了，所以他并没有操作

还可以这样：

<style>
      .box {
        width: 200px;
        height: 200px;
        background: red;
        transition: width 2s, background-color 20s; /*可以操作多个，且不同属性的速度并不共享或者参照对方，只有操作同一个属性的才会，如上面的例子，所以当你移动上面时，多等一下吧，本质上是因为他们的数字变化不会发生冲突，而出现冲突自然只能操作一个属性了（上面的例子）*/
      }

      .box:hover {
        width: 600px;
        background-color: black;
      }
    </style>
    <div class="box">哈哈</div>

颜色可以过渡是因为rgb是颜色的本质（或者说存在有数字的操作），他是数字哦

 <style>
      .box {
        width: 200px;
        height: 200px;
        background: red;
            transition: all 2s; /*这样简便一些，那么我们就只要看变化的值了（下面的hover），只是不能指定，当然了all并不代表优先级差，所以写在后面照样的覆盖transition: width 2s, background-color 20s;*/
      }

      .box:hover {
        width: 600px;
        background-color: black;
      }
    </style>
    <div class="box">哈哈</div>

骨架结构标签：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

在上面我们可以知道，他是一个默认的标签显示，一般他们代表的意思如下：

文档类型声明，告诉浏览器该网页的 HTML版本

注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

浏览器自身存在很多版本，使得不同版本之间的标签作用不同，或者有些存在或者没有一些标签可以操作，当然，浏览器可能也不存在某些版本，所以这个地方最好不要动，一般浏览器都存在5这个版本的，如果不存在，自然不能解析html显示了，或者使用默认的（一般是其默认的）

<html lang="en"> 
<!--
标识网页使用的语言
作用：搜索引擎归类 + 浏览器翻译时才会操作这个属性，所以我们运行时单纯的显示中文和英文都是可以的
常见语言：zh-CN 简体中文，en 英文（一般不能写错，否则操作默认或者根据其他属性来设置，一般可以加上空格，相当于没有加，但是不能e n这样的，可以 en）
-->

<meta charset="UTF-8" />
<!--
标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
常见字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+ 汉字
3. GBK：20000+ 汉字
注意点：开发中 统一使用 UTF-8 字符编码 即可（一般读取信息放入浏览器显示的编码）
如果你确定只有中文，可以使用GBK，因为UTF-8虽然有很多，但是需要判断，自然需要一些时间（虽然一般可以忽略）
-->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!--
http-equiv="X-UA-Compatible"：这个属性指定了将要定义的 HTTP 头字段，即指定浏览器兼容性模式
content="IE=edge"：这个属性值指定了将要使用的浏览器兼容性模式，IE=edge 表示使用最新版本的 Internet Explorer（浏览器） 浏览器来渲染页面（不同的，自然显示可能不会相同，因为渲染页面的方式可能会不一样）
当我们指定了浏览器的版本后，默认操作其指定的渲染，所以这里用来改变其渲染方式，但也只是渲染的改变，版本其他的操作并不改变，即：
<!DOCTYPE html> 的存在告诉浏览器使用标准模式来解析文档（渲染），而 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 则进一步指定浏览器使用最新版本的 IE 渲染引擎，这样可以确保在支持的浏览器中以最佳的渲染方式呈现页面，并提供更好的兼容性

-->

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 是一个用于设置移动设备视口（viewport）的 <meta> 元素

name="viewport"：这个属性指定了将要定义的视口设置
content="width=device-width, initial-scale=1.0"：这个属性值指定了视口的设置值，具体包含两个参数：
width=device-width：表示视口的宽度应该等于设备的宽度，也就是将网页宽度设置为与设备屏幕宽度一致，确保网页在移动设备上能够适应屏幕大小（前面的1vw就类似于这样）
initial-scale=1.0：表示初始缩放比例为 1.0，即默认缩放级别为正常大小，不进行缩放
这里是对设备进行操作的，比如手机，对与浏览器一般不操作，所以删掉也没有问题，当然，浏览器也可以模拟手机，在检查元素的左边就有一个手机的标志，我们点击即可
-->

<title>Document</title>

<!--标题，运行在浏览器查看窗口（上面的）名称就知道了-->

SEO（Search Engine Optimization）：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前

SEO三大标签：

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个</title>
    <meta name="description" content="哈哈" />
    <meta name="keywords" content="喝喝" />
    <!--
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
    -->
      
     
  </head>
  <body></body>
</html>

https://www.jd.com/一般是京东的根目录

一般情况下，上面只是定义，除了title会显示外，其他的都是需要进行手动提取，由于搜索引擎的提取一般都是提取description以及keywords属性的，所以我们一般也需要这样操作，而不是随便定义，因为并不会提取他（名称不同，怎么提取呢）

我们看看这个图：

从这个图可以看出来，对应的"百度"左边有个图片，而我们的"第一个"左边是默认的浏览器给的图片，我们需要改变这个图片，首先给出图片下载地址：

链接：https://pan.baidu.com/s/1cfEFVl8DnYhYnPhV3v2VRQ

提取码：alsk

<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个</title>
    <meta name="description" content="哈哈" />
    <meta name="keywords" content="喝喝" />
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />

    <!--
rel="shortcut icon"：这个属性指定了与当前网页关联的图标文件
shortcut icon 告诉浏览器该图标是网站的快捷方式图标，通常用于网页标题栏、书签、浏览器标签页等位置的显示

href="./images/favicon.ico"：这个属性值指定了图标文件的路径
在这个例子中，图标文件的路径是相对于当前 HTML 文件的 "./images/favicon.ico"

type="image/x-icon"：这个属性指定了图标文件的 MIME 类型
在这个例子中，image/x-icon 表示图标文件的类型是 ICO 格式（Windows 图标文件格式）
其中rel="shortcut icon"和type="image/x-icon"都可以删除，这是因为默认的存在，解释如下：
根据 HTML 的规范，这两个属性并非是必需的，如果将它们删除或省略
大多数现代浏览器仍然会尝试在网页所在的目录中寻找默认的图标文件（href中寻找，通常命名为 favicon.ico），并将其用作网页的图标
因此，在大多数情况下，如果你删除了 rel="shortcut icon" 和 type="image/x-icon" 这两个属性，网页的图标仍然可以正常显示，并且浏览器可能也会存在缓存，使得都进行删除也会进行显示

但是，为了保证最佳的兼容性和确保浏览器正确地处理网页图标，建议根据规范提供完整的 rel 和 type 属性
这样能够确保网页在不同浏览器和平台上都能正确地显示自定义的图标，同时，提供准确的 MIME 类型 type="image/x-icon" 也有助于指定图标文件的格式，以便浏览器能够正确地解析和显示图标

总结起来，虽然可以删除 rel="shortcut icon" 和 type="image/x-icon" 这两个属性，但为了兼容性和明确的描述，最好保留它们，并指定正确的值
而不是使用默认的操作方式，这个默认通常是根据href对应的内容来的
但是一般的之前的<link rel="stylesheet" href="./i.css">中rel="stylesheet"必须要加，因为默认的是对应的图标
当然，可能在以后也会存在根据href对应的内容来的，而正是如此，为了保证任意版本的兼容，建议加上对应的属性和值

    -->
  </head>
  <body>
    <div>a</div>
  </body>
</html>

一般的对应的favicon.ico都会放在根目录，所以我们可以访问https://www.jd.com/favicon.ico，可以看到对应的图片

我们之前说明过语义化的标签，但是也只是提一提，实际上通过css，一般会这样放置：

<style>
      header {
        width: 1000px;
        height: 100px;
        background-color: yellow;
      }
      nav {
        width: 1000px;
        height: 100px;
        background-color: red;
      }
      aside {
        float: left;
        width: 200px;
        height: 400px;
        background-color: pink;
      }
      section {
        float: left;
        width: 800px;
        height: 400px;
        background-color: blue;
      }

      article {
        margin-top: 20px;
        width: 400px;
        height: 200px;
        background-color: white;
      }
      footer {
        clear: both;
        width: 1000px;
        height: 200px;
        background-color: green;
      }
    </style>
    <header>头部</header>
    <nav>导航</nav>
    <aside>侧边</aside>
    <section>
      区块
      <article>文章</article>
    </section>
    <footer>底部</footer>

版心的介绍：

场景：把页面的主体内容约束在网页中间

作用：让不同大小的屏幕都能看到页面的主体内容

如前面的：

/* 版心：代表规定的元素的样式*/
.wrapper {
  width: 1200px;
  margin: 0 auto;
}

前面说明过css的书写顺序，现在直接给出对应的图（当然，只是给出常用的，大多数没有在羡慕的，我们都认为是最后的操作，如transform等等）：

相同顺序之间可以互相转换（因为他们之间的判断时长并不多（相当于一个判断多个条件而已，如"或者"），但是也最好按照对应的里面顺序，少判断一个条件），但是不同顺序之间没有按照的话，那么会导致都进行操作（前面的2和1已经说明了，所以条件（加了条件的）顺序不重要，判断顺序很重要，因为他代表之前条件判断的总和，而不是自身一个条件判断）

现在开始也来写一个项目：

1：新建项目文件夹xtx-pc-client（一般不建议使用中文，因为有些操作可能会出错，这是由于大多数的编码问题，英文编码是基本不会出现错误的，你是否可以看到乱码的出现通常是中文呢），所有项目相关文件都保存在 xtx-pc-client 目录中，所以后面的目录放入或者新建一般都是放在该文件夹下

2：复制 favicon.ico 到 xtx-pc-client 目录，一般习惯将ico图标放在项目根目录

3：复制 images 和 uploads 目录到 xtx-pc-client 目录中：

images ：存放网站固定使用的图片素材，如：logo、样式修饰图片… 等

uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等（通常会（保存）上传到服务器的图片，而不是固定给浏览器的图片）

4：新建 index.html 在根目录

5：新建 css 文件夹保存网站的样式，并新建以下CSS文件：

base.css：基础公共样式（具体为什么不放在重复样式中，在操作时可以自行体会）

common.css：该网站中多个网页相同模块的重复样式，如：头部、底部，当然，这里是测试，可能并不会按照他的说明来写上

index.css：首页样式（这里只操作首页，所以并不给出其他说明，比如其他网页.css）

images和uploads也是目录的

基础公共样式：

场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式

作用：防止不同浏览器中标签默认样式不同的影响，所以统一不同浏览器的默认显示效果，方便后续项目开发

为什么要保留一些标签的默认样式呢，这是为了在一定时候可以方便的操作，只是在项目中我们通常会进行统一而已

现在开始操作，我们回答VsCode创建上面的文件和目录，其中images和uploads的的文件地址如下：

链接：https://pan.baidu.com/s/1lwIAC0hQ3bZlfOTcKw1Odw

提取码：alsk

我们进入index.html，首先编写如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    
  </body>
</html>

这里就需要考虑一个问题了，如果对应的css都有相同的，那么操作谁的呢，经过测试，后操作的link覆盖前面的，同理，之前的@import也是先后顺序，也验证先后顺序操作（js，css，html是从上到下的），并且是覆盖的，且是同步（除了js可以异步外）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的项目</title>
    <meta name="description" content="我的项目描述" />
    <meta name="keywords" content="我的项目关键字" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  </head>
  <body></body>
</html>

现在我们给base.css加上如下：

/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，即相当于去除了img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none; /*轮廓样式，默认是none的，以后（可能）会说明，可以百度了解，一般他我们只会设置none来操作去除，而不会进行处理的，这里了解即可*/
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法，用来解决浮动高度问题 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

你可能会考虑一点，li的对应样式被清除时，那么不就与单纯的div类似吗，为什么还是使用li呢，实际上这是考虑标签自身语义的操作（li看起来就是列表），所以大多数我们都会使用li，而不是单纯的div

我们继续给common.css加上如下：

/* 各个页面相同的样式表 : 头, 尾部 */
/* 版心 */
.wrapper {
    width: 1240px;
    margin: 0 auto;
}

然后补充index.html：

 <body>
    <!--快捷导航-->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li><a href="#">请先登录</a></li>
          <li><a href="#">免费注册</a></li>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">会员中心</a></li>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">在线客服</a></li>
          <li><a href="#"><span></span>手机版</a></li>
      
        </ul>
      </div>
    </div>
  </body>

对应在common.css中加上如下：

/*快捷导航*/
.shortcut {
  height: 52px;
  background-color: #333;
}

.shortcut .wrapper {
  height: 52px;
}

.shortcut .wrapper ul {
  float: right;
}

.shortcut .wrapper ul li {
  float: left;
  line-height: 52px;
}

.shortcut .wrapper ul li a {
  padding: 0 16px;
  border-right: 1px solid #666;
  font-size: 14px;
  color: #dcdcdc;
}

.shortcut .wrapper ul li a span {
  display: inline-block;
  margin-right:8px;
  width: 11px;
  height: 18px;
  background-image: url(../images/sprites.png);
  background-position: -160px -70px;
  vertical-align: middle;
}

然后继续补充index.html：

 <!--与上面的快捷导航，同级，头部-->
    <div class="header wrapper">
      <div class="logo">
        <h1><a href="#">小兔鲜儿</a></h1>
      </div>
      <div class="nav">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">生鲜</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">餐厨</a></li>
          <li><a href="">电器</a></li>
          <li><a href="">居家</a></li>
          <li><a href="">洗护</a></li>
          <li><a href="">孕婴</a></li>
          <li><a href="">服装</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="搜一搜" />
        <!--定位放大镜-->
        <span></span>
      </div>
      <div class="car">
        <span>2</span>
      </div>
    </div>

对应继续在common.css中加上如下：

/*头部*/
.header {
  margin: 30px auto;
  height: 70px;
}

.logo {
  float: left;
  width: 207px;
  height: 70px;
}

/*logo搜索引擎优化*/
.logo h1 {
  width: 207px;
  height: 70px;
}
.logo h1 a {
  display: block; /*这里最好不要操作行内块，否则其对应图片相当于占用一行，因为不同形式的元素，对自身也是不同的，即这里提一下*/
  width: 207px;
  height: 70px;
  background-image: url(../images/logo.png);
  background-size: contain;
  /*让h1里面的字看不见*/
  font-size: 0;
}
.nav {
  float: left;
  margin-left: 40px;
  height: 70px;
}

.nav li {
  float: left;
  margin-right: 48px;
  line-height: 70px;
}
.nav li a {
  padding-bottom: 7px;
}
.nav li a:hover {
  color: #27ba9b;
  border-bottom: 1px solid #27ba9b;
}

.search {
  position: relative;
  float: left;
  margin-left: 34px;
  margin-top: 24px;
  width: 172px;
  height: 30px;
  border-bottom: 1px solid #e7e7e7;
}
.search input {
  padding-left: 30px;
  width: 172px;
  height: 29px;
}

.search input::placeholder {
  font-size: 14px;
  color: #ccc;
}
.search span {
  position: absolute;
  left: 2px;
  top: 0px;
  width: 18px;
  height: 18px;
  background-image: url(../images/sprites.png);
  background-position: -79px -69px;
}

.car {
  position: relative;
  float: left;
  margin-top: 28px;
  margin-left: 15px;
  width: 23px;
  height: 23px;
  background-image: url(../images/sprites.png);
  background-position: -119px -69px;
}
.car span {
  /*绝对定位默认变成block，只是不会操作其的一行说明*/
  position: absolute;
  right: -13px;
  top: -6px;
  width: 20px;
  height: 15px;
  background-color: #e26237;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  line-height: 15px;
  font-size: 13px;
}

然后继续补充index.html（每次补充之前，最好测试一下，后面就不说明了）：

 <!--版权区域-->
    <div class="footer">
      <div class="wrapper">
        <div class="top">
          <ul>
            <li>
              <!--通过伪元素或者伪类添加标签实现精灵图-->
              <span>价格亲民</span>
            </li>
            <li>
              <span>物流快捷</span>
            </li>
            <li>
              <span>品质新鲜</span>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <p>
            <a href="#">关于我们</a> | <a href="#">帮助中心</a> |
            <a href="#">售后服务</a> | <a href="#">配送与验收</a> |
            <a href="#">商务合作</a> | <a href="#">搜索推荐</a> |
            <a href="#">友情链接</a> |
          </p>
          <p>CopyRight @ 小兔鲜儿</p>
        </div>
      </div>
    </div>

对应的common.css：

/*版权区域footer*/
.footer {
  height: 342px;
  background-color: #434343;
}
.footer .wrapper {
  width: 1393px;
}
.footer .top {
  padding-top: 59px;
  padding-left: 135px;
  height: 175px;
  border-bottom: 1px solid #434343;
}

.footer .top li {
  position: relative;
  float: left;
  margin-right: 300px;
  width: 195px;
  height: 58px;
  line-height: 58px;
}
.footer .top li:last-child {
  margin-right: 0px; /*一般我们写成0，但是0px比较好看*/
}
.footer .top li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  content: "";
  width: 58px;
  height: 58px;
}
.footer .top li:nth-child(1)::before { /*样式是结合的，所以可以继续加上::before来进行补充（结合），要不然那里来的覆盖*/
  background-image: url(../images/sprites.png);
  /* vertical-align: middle; 
  绝对定位后，对应图片脱离，那么就不存在基线
  那么就看当前的，基线，由于基线都是相同
  所以是否设置vertical-align没有什么作用，可以自己测试
  */
}
.footer .top li:nth-child(2)::before {
  background-image: url(../images/sprites.png);
  background-position: -130px 0px;
}
.footer .top li:nth-child(3)::before {
  background-image: url(../images/sprites.png);
  background-position: -65px 0px;
}
.footer .top li span {
  margin-left: 77px;
  font-size: 28px;
  color: #fff;	
}

.footer .bottom {
  padding-top: 40px;
  font-size: 14px;
  color: #999;
  text-align: center;
}
.footer .bottom a {
  font-size: 14px;
  color: #999;
}

.footer .bottom p {
  margin-bottom: 20px;
}

上面的样式基本定义的是头部和尾部，所以放入在common.css中，现在我们来操作首页的样式了（因为每个网页都存在头部和尾部，且基本类似）

一般在网页上，按下空格，会进行跳转一个窗口右边滚动条的80%高度，具体可以自己测试

我们继续补充index.html（在头部和版权区域中间加上如下）：

 <!--banner-->
    <div class="banner">
      <div class="wrapper">
        <ul>
          <!--这里并不操作背景，主要是保证图片的变化-->
          <li>
            <a href="#"><img src="./uploads/banner_1.png" alt=""/></a>
          </li>
        </ul>

        <!--侧导航-->
        <div class="aside">
          <ul>
            <li>
              <a href="#">生鲜<span>水果 蔬菜</span></a>
            </li>
            <li>
              <a href="#">美食<span>面点 干果</span></a>
            </li>
            <li>
              <a href="#">餐厨<span>数码产品</span></a>
            </li>
            <li>
              <a href="#">电器<span>床品 四件套 被枕</span></a>
            </li>
            <li>
              <a href="#">居家<span>奶粉 玩具 辅食</span></a>
            </li>
            <li>
              <a href="#">洗护<span>洗发 洗护 美妆</span></a>
            </li>
            <li>
              <a href="#">孕婴<span>奶粉 玩具</span></a>
            </li>
            <li>
              <a href="#">服饰<span>女装 男装</span></a>
            </li>
            <li>
              <a href="#">杂货<span>户外 图书</span></a>
            </li>
            <li>
              <a href="#">品牌<span>品牌制造</span></a>
            </li>
          </ul>
        </div>

        <!--箭头-->
        <!--prev：下一个-->
        <a href="#" class="prev"></a>
        <!--next：下一个-->
        <a href="#" class="next"></a>

        <!--圆点，由于绝对定位的存在，导致圆点通常也有定位，因为对应的通常是拿取不到绝对定位的宽高的（样式自身不能），除非操作了某些变量来动态改变，具体可以百度-->
        <ol>
          <li></li>
          <li></li>
          <li class="current"></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>

现在在index.css中写上如下：

/*index的样式*/

/*banner*/
.banner {
  height: 500px;
  background-color: #f5f5f5;
}

.banner .wrapper {
  position: relative;
  height: 500px;
  background-color: pink;
}

/*侧导航*/
.banner .aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 500px;
  background-color: rgb(0, 0, 0, 0.8);
}

.banner .aside li {
  height: 50px;
  line-height: 50px;
}

/*保证整体可以点击，当然，大多数都是整体的，所以大多数li里面的a通常也会设计宽高*/
.banner .aside li a {
  position: relative;
  display: block;
  padding-left: 35px;
  padding-right: 19px;
  height: 50px;

  font-size: 16px;
  color: #fff;
}
.banner .aside li a span {
  margin-left: 15px;
  font-size: 14px;
}

.banner .aside a:hover {
  background-color: #27ba9b;
}

/*a里面的最后位置添加箭头*/
.banner .aside a::after {
  position: absolute;
  top: 19px;
  right: 19px;
  content: "";
  width: 6px;
  height: 11px;
  background-image: url(../images/sprites.png);
  background-position: -80px -110px;
}
/*箭头*/
.prev,
.next {
  position: absolute;
  top: 228px;
  width: 45px;
  height: 45px;
  background-color: rgb(0, 0, 0, 0.2);
  background-image: url(../images/sprites.png);
  border-radius: 50%;
}
.prev {
  left: 260px;
  /*图就是图，他这个图并没有带上背景，所以自然背景就是当前元素的背景了，正向的右移动10px的出界，由于出界与否对与图来说是没有影响的，所以可以这样的做*/
  background-position: 14px -60px;
  /*这里需要在移动精灵图位置时，需要对准圆形的中间，所以这里的14才会出现的
  当然，这里可以通过继续在a里面加上元素，使得元素在中间，然后给这个元素就是图，这样就不用微调到中间了
  */
}
.next {
  right: 10px;
  background-position: -23px -60px;
}

/*圆点*/
.banner ol {
  position: absolute;
  left: 680px;
  bottom: 30px;
  height: 10px;
}
.banner ol li {
  float: left;
  margin-right: 24px;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
}

.banner ol .current {
  background-color: #fff;
}

<!--新鲜好物-->
    <div class="goods wrapper">
      <!--hd：header-->
      <div class="hd">
        <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
        <a href="#">查看全部</a>
      </div>
      <!--bd：body-->
      <div class="bd clearfix">
        <ul>
          <li>
            <a href="#">
              <img src="./uploads/new_goods_1.jpg" alt="" />
              <h3>睿米无线吸尘器F8</h3>
              <div>￥<span>899</span></div>
              <b>新品</b>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/new_goods_2.jpg" alt="" />
              <h3>智能环绕3D空调</h3>
              <div>￥<span>1299</span></div>
              <b>新品</b>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/new_goods_3.jpg" alt="" />
              <h3>广东软软糯米煲仔饭</h3>
              <div>￥<span>129</span></div>
              <b>新品</b>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/new_goods_4.jpg" alt="" />
              <h3>罗西机械智能手表</h3>
              <div>￥<span>3399</span></div>
              <b>新品</b>
            </a>
          </li>
        </ul>
      </div>
    </div>

然后补充index.css：

/*
新鲜好物，有时候有些样式可能并不操作
但是为了顺序，写上也没有问题
因为你也不能保证以后是否需要加上什么
*/
.goods {
}

.goods .hd {
  height: 114px;
  line-height: 114px;
}

.goods .hd h2 {
  float: left;
  font-size: 29px;
  font-weight: 400;
  height: 114px;
  /*前面的行高只是对.hd的操作，他的行高可不是哦，由于高度没有设置
  那么整体高度可能不是114，可能大点，导致浮动可能出现问题
  这里也就是说，由于他的内容元素行高影响（元素占用位置），那么我应该也要改变一下
  */
}
.goods .hd h2 span {
  margin-left: 34px;
  font-size: 16px;
  color: #999;
}

.goods .hd a {
  float: right;
  color: #999;
}

.goods .hd a::after {
  content: ""; /*一般他写在最前面吧*/
  display: inline-block;
  margin-left: 13px;
  width: 7px;
  height: 13px;
  background-image: url(../images/sprites.png);
  background-position: 0 -110px;
  vertical-align: middle;
}

.goods .bd li {
  position: relative;
  float: left;
  margin-right: 8px;
  width: 304px;
  height: 405px;
  background-color: #f0f9f4;
  text-align: center;
}

.goods .bd li:last-child {
  margin-right: 0;
}

.goods .bd li img {
  /*
  在html中，img给出一个宽度属性
  那么对应的高度自适应，实际上html的属性操作
  和css都操作在一定程度上是相当的
  就比如宽高属性，因为操作的是相同的基础代码
  所以这里设置宽度即可，而不用设置高度
  */
  width: 304px;
}

.goods .bd li h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
}
.goods .bd li div {
  color: #9a2e1f;
  font-size: 17px;
}

.goods .bd li div span {
  font-size: 23px;
}

.goods .bd li b {
  position: absolute;
  top: 18px;
  left: 17px;
  width: 28px;
  height: 51px;
  border: 1px solid #27ba9b;
  border-radius: 2px;
  color: #27ba9b;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

我们继续在"新鲜好物"后面进行补充：

 <!--生鲜-->
    <div class="shengxian wrapper">
      <div class="hd">
        <h2>生鲜</h2>
        <a href="#" class="more">查看全部</a>
        <ul>
          <!--不建议li在a里面，这是保证语义
            虽然可行（可以通过css实现，但是有些情况是比较不友好的，具体可以百度，如内部继续操作，在单纯的文字上这样的改变并没有什么关系，但是考虑以后，最好li里面是a），但是不建议-->
          <!--<a href="#"><li></li></a>-->
          <li><a href="#">水果1</a></li>
          <li><a href="#">水果2</a></li>
          <li><a href="#">水果3</a></li>
          <li><a href="#">水果4</a></li>
          <li><a href="#">水果5</a></li>
          <li><a href="#">水果6</a></li>
          <li><a href="#">水果7</a></li>
        </ul>
      </div>
      <div class="bd clearfix">
        <div class="left">
          <a href="#"><img src="./uploads/fresh_goods_cover.png" alt="" /></a>
        </div>
        <div class="right">
          <ul>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
            <li>
              <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt="" /></a>
              <h3>美危 智利原味三文鱼排 240g/袋 4片装 海鲜年货</h3>
              <div>￥<span>899</span></div>
            </li>
          </ul>
        </div>
      </div>
    </div>

继续在index.css中加上如下：

/*生鲜*/
.shengxian {
}

.shengxian .hd {
  height: 96px;
  line-height: 96px;
}

.shengxian .hd h2 {
  float: left;
  font-size: 29px;
  font-weight: 400;
}
.shengxian .hd .more {
  float: right;
  float: right;
  color: #999;
}
.shengxian .hd .more::after {
  content: "";
  display: inline-block;
  margin-left: 13px;
  width: 7px;
  height: 13px;
  background-image: url(../images/sprites.png);
  background-position: 0 -110px;
  vertical-align: middle;
}
/*上面的
.shengxian .hd h2
.shengxian .hd .more 
.shengxian .hd .more::after
是与前面的
.goods .hd h2
.goods .hd a 
.goods .hd a::after
存在重合，其中.shengxian h2可能高度不同，所以他最好写上
而其他两个，你可以在前面操作这样：
.goods .hd a .shengxian .hd .more 
以及
.goods .hd a::after .shengxian .hd .more::after
这里就不操作了，你可以选择操作一下
操作后，可以节省一些代码的编写
*/
.shengxian .hd ul {
  float: right;
  margin-right: 65px;
}

.shengxian .hd ul li {
  float: left;
}
.shengxian .hd li a {
  padding: 2px 7px;
  margin-left: 6px;
}
.shengxian .hd li a:hover {
  background-color: #27ba9b;
  color: #fff;
}
.shengxian .bd .left {
  float: left;
  margin-right: 8px;
  width: 240px;
  height: 670px;
}
.shengxian .bd .left img {
  width: 240px;
  height: 670px;
}
.shengxian .bd .right {
  float: left;
  width: 992px;
  height: 670px;
}

.shengxian .bd .right li {
  float: left;
  margin-right: 8px;
  width: 242px;
  height: 335px;
}

.shengxian .bd .right li img {
  width: 242px;
  height: 230px;
}

.shengxian .bd .right li:nth-child(4n) {
  margin-right: 0px;
}

.shengxian .bd .right li h3 {
  margin-top: 2px;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 20px;
  font-weight: 400;
}
.shengxian .bd .right li div {
  margin-left: 20px;
  color: #9a2e1f;
  font-size: 17px;
}

.shengxian .bd .right li div span {
  font-size: 23px;
}

至此大致操作完毕，现在来手写一下吧，当然了，若能比较熟悉可以不用写，因为重复的操作是没有必要的，就如对应的li中加上图片，调位置，再怎么操作还是边距的原因，操作一次和操作百次是没有什么意义的，你认为已经背好的课文，需要继续背吗（虽然也可以这样，但是不建议），只是减低遗忘而已，大多数的知识并不需要记住，只需要知道原理就行，因为会遗忘的，特别的，对与一个大型的网站，重复写是非常耗费时间的，当然，第一次的写收获很大，但是第二次就没有必要了，因为第一次已经熟悉了，那么第二次相当于记住，这个时候建议理解并观察，而非重复劳动，当你融汇贯通后（只是建议，具体看你），基本上所有的页面都难不住你，这种情况是否比记住要好很多呢（现在选择看看之前的那个项目，是否感觉很容易呢，那么你还要重写一遍吗，当然，第一次可能会多重写一遍，但是当知识越来越多，理解是大于重写的，自然只需要重写一遍即可）

字体图标：

首先需要下载一个东西，地址如下：

链接：https://pan.baidu.com/s/1nEs7N3-S_zOa7qwUVVO8DA

提取码：alsk

里面有关html，我们双击打开，找到Font class，观察心心的对应类名（样式），然后看这个html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
  </head>
  <body>
    1
    <i>1</i>
    <i class="iconfont icon-favorites-fill">1</i>
  </body>
</html>

查看结果吧

在网上是有很多被别人写好的样式，有时候我们并不需要重复造轮子，造一次就行了，等以后你有能力可以回到这里看一看他的源码，虽然他也是生成的，后面会说明

我们可以选择将他变大：

    <style>
        .iconfont{
            font-size: 60px;
        }
    </style>
<!--可以选择放在后面，放在前面准备样式，html会读取进行操作，放在后面，html保留，style使得操作，所以使用时css是保留最后使用（相对于元素来说，最终他是操作的，且基本是最后（最后的属于css，当然，他也有最后，即js，这里只考虑css的最后，因为还并没有说明js）），js则只考虑准备的-->

  <style>
      * {
        padding: 0;
        margin: 0;
      }
      a {
        text-decoration: none;
        color: #333;
      }
      li {
        list-style: none;
      }
      .nav {
        width: 200px;
        margin: 50px auto;
        font-size: 12px;
        text-align: center;
      }
      .orange {
        color: #f40;
      }
    </style>
    <div class="nav">
      <ul>
        <li>
          <a href="#">
            <span class="iconfont icon-cart-Empty-fill orange"></span>
            <span>购物车</span>
            <span class="iconfont icon-arrow-down"></span>
          </a>
        </li>
      </ul>
    </div>

假设对应我们需要其他图标怎么办，这里给出流程

现在我们进入这个网站：https://www.iconfont.cn/

下载这个文件：

链接：https://pan.baidu.com/s/1fOjF9zxCIs-vn1zElkpxGA

提取码：alsk

下载好后，我们点击如下：

点击左边的上传，然后点击这个：

点击上面的上传图标，将之前下载的文件都全选，进行上传，等待，进行提交，如去除颜色提交（去除后，一般也就是默认是浏览器颜色，黑的，即#333，随便输入字就知道了，而非操作其本身颜色），再点击批量操作，到达如下页面：

当然，有些可能有上传不了的，他并不会提交，会去掉了，安心提交即可，然后点击全选，批量加入购物车，回到购物车，点击添加项目，创建wd，点击确定，到如下：

注意，随着时间的推移，对应的操作可能有所改变，但是最终还是一致的，点击下载至本地，解压后，你是否可以发现，与前面的是一样的呢，也就是说他的确是"虽然他也是生成的，后面会说明"，我们将对应的文件放入到对应的项目来测试，若出现结果，代表操作成功，这样就能解决需要其他图标怎么办的问题，前提是存在svg即可

<div class="nav">
      <ul>
        <li>
          <a href="#">
              <!--去掉orange，看看是否真的去除了对应的颜色，即字体图标自然也会操作字体的颜色，那么为什么图会操作字体的颜色呢，解释如下：
字体图标（Font icons）的本质是使用字体文件中的特殊字符来代表图标，而不是传统意义上的图像文件，这些特殊字符在字体文件中被赋予了与图标相对应的形状和样式
由于字体图标实际上是字符，因此它们会继承所在文本元素的样式，包括颜色、字体大小、行高等，这意味着您可以通过设置文本元素的 CSS 样式来控制字体图标的外观，包括颜色，但是，有个前提，即需要覆盖类选择器的对应操作，因为可能比如说字体大小，在类选择器中就已经操作了，在这种覆盖的情况下，那么自然不会起作用，也就是有删除线
-->
            <span class="iconfont icon-preview orange"></span>
            <span>购物车</span>
            <span class="iconfont icon-time"></span>
          </a>
        </li>
      </ul>
    </div>

平面转换：改变盒子在平面内的形态（位移、旋转、缩放），平面转换一般都需要transform，因为他就是操作平面转换的

先看这个案例：

 <style>
      .a {
        position: absolute;

        left: 50%;
        transform: translateX(-50px); /*这个使用50%也行，即50%=100*0.5 =50，所以-50%=-50，默认加上单位，即-50px（因为不加单位不起作用，即加上删除线），这里需要注意，但凡可以使用%的，基本都可以使用数字，这是因为%最终也是得到数字来操作的，只是%的目标可能不同，有些是看父元素的宽度（width），有些是当前（自身）元素的宽度（如这里），有些是找往上的%（如绝对定位的left，除非对应的也是定位，如相对定位，大多数这样可以保证不会改变原来的位置（相对定位占用位置的），即称为子绝父相（子绝对定位，父相对定位））*/
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
    <div class="a"></div>
<!--并且由于宽高可以小数，所以他的一半也可以，但是%总是有误差的，如33%，那么一般往下取整（2.1=2，而不是2.1=3），精确到小数2位的整数，但是我们也通常不会这样操作的-->

测试位移：

 <style>
      .father {
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid red;
      }
      .son {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: all 0.5s;
      }
      .father:hover .son {
          /*translate可以存在小数，与宽高一样，大多数数字可以存在小数，有些不能，如margin和padding存在，不能的，那么加上删除线（现在应该都可以，因为就算不能，可能也会取整，具体可以百度），当然这里我们并不需要记住，只需要知道整数和百分比即可，其他的单位可以选择使用*/
        transform: translate(50px, 50px); /*你可以修改成margin:50px来测试，当然，内部一般并不是他，而是一些位置属性，在css中我们通常不能直接的改变位置属性（一般需要定位），所以了解即可
          一个参数就是左右，否则第二个参数就是上下，没有三个参数，因为他并不操作3d，三个参数的在后面的translate3d，这里注意即可
          
          位移是位移，而不是定位，他一般并不需要定位来处理的前提，所以可以单独使用，比如这里就没有操作定位
          */
      }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

<!--这里需要考虑一个问题，位移的元素在操作时，是覆盖对应移动的地方吗，答：在前面说明了"不同定位之间的层级关系"，并且位移操作是最后处理的，也就是先排版后处理，所以无论你是标准流，还是浮动，还是定位等等排版，他都可以进行移动，并且这个移动保留原来的位置，相当于相对定位，移动的并不改变，只不过他是最后操作的，至于区别，可以说定位有定位的作用，如子绝父相
这里给出相当于相对定位的例子：
  <style>
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b {
        /*移动整体，包括margin*/
        position: relative;
        left: 20px;
        /* transform: translate(20px);，将上面的两个删除，加上这个也可以 */
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-left: 20px;
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>



-->

现在来一个测试案例，需要去下面的地址下载文件：

链接：https://pan.baidu.com/s/1suUQ2kzwxCUbfhEw6aH2cA

提取码：alsk

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 1366px;
        height: 600px;
        margin: 0 auto;
        background: url(./images/bg.jpg);
        overflow: hidden; /*溢出部分隐藏*/
      }
      .box::before,
      .box::after {
        float: left;
        content: "";
        width: 50%;
        height: 600px;
        /*该图的宽高于上面的是一样的，所以操作50%即可，也正好结合background-position: right 0;*/
        background-image: url(./images/fm.jpg);
        transition: all 0.5s;
      }
      .box::after {
        background-position: right 0;
      }

      .box:hover::before {
        transform: translate(-100%); /*最终操作的是数字，可以被过渡*/
      }
      .box:hover::after {
        transform: translate(100%);
      }
    </style>
    <div class="box"></div>

测试旋转：

使用rotate实现元素旋转效果，首先需要下载下面地址文件：

链接：https://pan.baidu.com/s/1oO5CBk_Vu_IV6_eK77WNdg

提取码：alsk

    <style>
      img {
        width: 250px;
        transition: all 2s;
        background-color: red;
      }
      img:hover {
        transform: rotate(
          360deg
        ); /*可以这样做，中间的空格（回车也算，一般回车也算空格）在大多数情况下是忽略的，360度（deg英文就是：度），也就是旋转一圈，360deg代表顺时针旋转，-360deg代表逆时针旋转*/
      }
    </style>
    <img src="./images/rotate.png" alt="" />
    <!--从上面可以看出来，对应的旋转是整个元素进行旋转，因为位移也是整个元素进行位移，那么他是如何操作的呢，既然可以旋转即过渡，自然是操作数字的
    通过观察，他是默认根据元素的角到中心作为半径来进行旋转的，一般是元素的整体进行改变，由于最后操作，所以移动时会带上内部内容（何尝不是内容固定导致的呢，使得我们改变移动时，跟着来，当然，可能是整个元素的所有像素点改变导致的，具体认为是跟着来）

    当然，这里是360deg，当不过渡时，移动上去是不会改变的（没有什么函数了，即直接的确定最终赋值，当然旋转的过渡内部比较复杂，比一般的要复杂点，但是影响并不大，可以认为是几毫秒的差距，我们是感受不到的），你修改成180deg就知道了
    -->

再来一个案例：

    <style>
      img {
        width: 250px;
        border: 1px solid #000;
        transition: all 2s;
        transform-origin: right bottom; /*改变原点*/
        /*
        可以是数字，和百分比（自身的），我们可以看到由原理以中心为原点，变成了右下角了
        但是替代半径是最大的，即参照最大到四个角的半径为基准，所以这里是这个改变的原点到左上角了
        */
      }
      img:hover {
        transform: rotate(360deg);
      }
    </style>
    <img src="./images/rotate.png" alt="" />

位移和旋转一起操作：

    <style>
      img {
        width: 250px;
        border: 1px solid #000;
        transition: all 2s;
        transform-origin: right bottom;
      }
      img:hover {
        transform: translate(300px) rotate(360deg);
        /* transform: rotate(360deg) translate(300px);，可以这样，但是显示效果不同*/

        /*
因为都是数字的变化，那么他们的总和，会导致数字统一发生改变，一个是位置数字，一个是旋转数字，加起来就是他们共同操作的数字，但是先后的操作可能导致效果不同，但是最终结果相同
          
          如先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果，但是最终结果相同
          具体为什么结果不同，那么是其中位移和旋转过程（过渡，并非所有样式的过渡函数是一样的，一般是不同的，即过渡虽然操作的都是数字，但是每个样式都存在自己的函数，当然这个函数一般是持续时间、时间函数、延迟时间，以及自身属性中数字的含量组成的（你认为单纯的位移数字含量比得上旋转的数字含量吗），只是我们通常称为函数而已，其中数字的含量是函数不同的主要属性）总体（可能各有一个）函数的变化效果，这里若要了解即可百度
          
          
          数字含量代表其内部样式数字变化的情况的大小，即transform对应操作使得变化多大
        */
      }
    </style>
    <img src="./images/rotate.png" alt="" />


<!--
这里需要注意一点，经过测试，hover只是读取鼠标状态，且读取一次，当元素移开后，只需要你不移动，认为你始终在其上的，当这个时候若移动一下，读取了，发现没有，进行返回，这个时候需要你继续移动到元素上了，注意是元素，而非元素所占的位置，元素占用的位置和元素是不同的概念，而他们与margin的结合，就是真正的位置
-->

在这里，可能有些人可以操作非常好的显示效果，但是这样需要考虑数学，而非测试，在一定的数学功底下，是非常比较好操作的，否则你可能并不能理解位移和旋转交换位置后的效果出现，而是测试很多次才理解

测试缩放：

使用过渡来操作：

  <style>
      img {
        width: 250px;
        height: 250px;
        border: 1px solid #000;
        transition: all 2s;
      }
      img:hover {
       width: 100px;
       height: 100px;
      }
    </style>
    <img src="./images/rotate.png" alt="" />

旋转的数字含量太多，一般是非常难以使用过渡来完成，只能利用其自身的数字含量来完成了，而不像位移，缩放一样，对应的 transform中基本只会操作位置的移动以及宽高即可，但是由于css通常并不能操作位置属性，所以无论是位移，还是缩放，我们都只会操作transform，而不是使用一些改变其他地方的样式，如margin或者定位来完成（当然，缩放还是可以，因为css可以操作宽高，只是可能不是中间缩放而已，位移一般不行（css通常并不能操作位置属性））

但是上面的操作是对元素自身来操作的，而不会影响其他元素，为了验证，我们操作如下：

 <style>
      .box {
        width: 300px;
        height: 1210px;
        margin: 100px auto;
        background-color: pink;
        overflow: hidden;
      }
      .box img {
        width: 100%;
        transition: all 0.5s;
      }
      .box:hover img {
        width: 150%; /*对于img来说，单纯的设置一个值，另外一个值会等比例操作*/
      }
    </style>
    <div class="box">
      <img src="./images/product.jpg" alt="" />
    </div>

可以发现，对方的确只是操作元素自身来的，这里加上overflow: hidden;使得不会溢出，但是我们可以发现一个问题，他的操作是按照左上角不变来进行放大缩小的，所以并不符合我们的要求，所以需要scale来操作

使用scale改变元素的尺寸：

  <style>
      .box {
        width: 300px;
        height: 1210px;
        margin: 100px auto;
        background-color: pink;
      }
      .box img {
        width: 100%;
        transition: all 0.5s;
      }
      .box:hover img {
        transform: scale(1.2);
        /*
        数字就是倍数，可以0.8倍，1.2倍，1倍（代表不变，1倍代表乘1，而不是乘2，虽然有些时候会认为乘以2，但是在代码中1倍就是乘以1，是比较严谨的）
        -1代表旋转180度（顺时针）的图片，总最小到对应的1倍，具体自己测试（这里的旋转并不操作过渡，但也只是因为过小，所以过渡和直接的设置是一样的了，什么意思：如果说过渡的跨度最小是1，即1到100都是加1的慢慢的加过去的，那么1到2，就是加1，而1设置2也是加1，是否是一样的呢，但是还有不同的是，这个变化可能是0.5后才会变，所以说这里的旋转操作过渡可以，但是说成不操作过渡也行，不操作过渡的说明，就以数字变化与原来不操作过渡相同为原因的）
        */
      }
    </style>
    <div class="box">
      <img src="./images/product.jpg" alt="" />
    </div>

<!--一般来说这个缩放是根据当前x，y，z（z在后面会说明），来进行变化的，默认x，y，z是一起的，也就是scale(1.2)使得x，y，z变大1.2倍，你可以设置这样的scaleX(1.2);，就会发现只有x发送变化的，虽然存在过渡，但是这样的变化是正常处理（过渡的识别，无非就是一直被识别，看起来移动的样子而已，这里进行补充一下，了解即可）-->

可以发现是从中间开始的，也就是说位移，缩放虽然可以通过css来完成，但是css并不能直接的操作他的情况，所以无论是位移，缩放，旋转，我们都会使用transform来完成，这同样也是他存在的意义

现在我们来操作一个案例：

下载下面的文件：

链接：https://pan.baidu.com/s/1OD6YwFEVDQbpUl23jNrIqQ

提取码：alsk

拿取对应的图片，然后编写如下的代码（文件名称随便吧）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      img {
        width: 100%;
      }

      .box {
        width: 249px;
        height: 210px;
        margin: 50px auto;
        overflow: hidden;
      }

      .box p {
        color: #3b3b3b;
        padding: 10px 10px 0 10px;
      }

      .box .pic {
        position: relative;
      }

      .box .pic::after {
        /* 播放按钮压在图片上面 - 居中 */
        position: absolute;
        left: 50%;
        top: 50%;
        /* margin-left: -29px;
            margin-top: -29px; */
        /* transform: translate(-50%, -50%); */

        content: "";
        width: 58px;
        height: 58px;
        background-image: url(./images/play.png);

        /* 大图 */
        transform: translate(-50%, -50%) scale(5);

        /* 透明，看不见 */
        opacity: 0;
        transition: all 0.5s;
      }

      /* li:hover的时候，谁变小pic::after，无论你怎么操作只要最终选择的是他，那么就会操作（当然，也要考虑覆盖的问题，即优先级，伪类存在优先级，伪元素一般与伪类优先级相同）*/
      .box li:hover .pic::after {
        opacity: 1; /*一般明面上操作数字的，基本都可以操作过渡，而没有写数字的，有些可以，有些不行，比如font-weight:normal;可以操作数字（因为底层是数字），而block不行（因为底层没有数字）*/
        transform: translate(-50%, -50%) scale(1); /*需要保证位置的基础上进行改变，使得过渡，最主要的就是后面的隐藏覆盖的操作*/
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <div class="pic"><img src="./images/party.jpeg" alt="" /></div>
          <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
        </li>
      </ul>
    </div>
  </body>
</html>

这里有一个注意点，我们首先看案例：

<style>
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b {
        width: 50px;
        height: 50px;
        background-color: pink;
        transform: translate(50%, 50%);
        transform: scale(1);
        font-family: 宋体, 微软雅黑, sans-serif;
        font-family: sans-serif; /*这里也没有写，但是隐藏的覆盖*/
      }
    </style>
    <div class="a">
      <div class="b">22</div>
    </div>

从上面可以看出transform操作了覆盖，为什么，他明明没有直接的操作，为什么还是覆盖呢，实际上是隐藏的覆盖，也就是说，他内部其实赋值了，只是操作的是默认的，或者最终的结果赋值，所以并非没有操作哦，覆盖必然伴随赋值，所以这里也是，即存在隐藏的或者内部的赋值

渐变背景：

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

<style>
      .box {
        width: 300px;
        height: 200px;
        /*
        渐变必须需要两个颜色或者以上的变化，否则（一个颜色）不会显示出现（要不然称为渐变干什么），即加上删除线
        原理是什么：
        颜色从红色开始到下慢慢的变为黑色，最后一个像素点完全就是黑的，同理起始点像素点完全是红的
        如果上到下的像素点是200，那么将红到黑中的过程出现的像素点（代表颜色的）除以200，假设为1.7，那么1+1.7=2.7为3（四舍五入），就这样的慢慢过去
    而至于如何确定过程中出现的像素点，这里就要明白，如果全部列举出现，必然可以找到一个路径，001，002，25500，25501，这样的流程，那么只需要显示这个路径即可
    当然，你可能还不明白，没有关系，这里举出一个数学的例子：假设我的起始是1，要到终点400，如果1到400只能移动100次呢，应该每次需要移动多久
    很明显，1代表是红色像素的起点，400代表黑色像素（这样的是代表颜色的，而不是显示的像素点）的起点，100代表上到下的像素点（这个就是显示的像素点），而1到400代表398个像素（不包括两边的），那么398就是红到黑出现的像素点 
    即398/100=3.98，那么第二个高度的像素应该是1+3.98=4.98=5（颜色的像素点），直到400.98，到顶了，那么忽略小数为400
          
      但是需要考虑一个问题，这里可以写多个元素，那么如果是不规范的顺序是怎么操作的呢，答：通过第一次读取这个样式生成的函数就行了
          */
        background-image: linear-gradient(red, black);
      }
    </style>
    <div class="box"></div>

我们也可以这样：

<style>
      .a {
        width: 300px;
        height: 200px;
        background-image: linear-gradient(red, black);
      }
      .b {
        width: 300px;
        height: 200px;
        background-image: linear-gradient(red, black, pink);
      }
      .c {
        width: 300px;
        height: 200px;
        /*设置了transparent才可以这样的操作（实际上他也是一个颜色，只是他一般代表rgb(0, 0, 0, 0)的简写而已，虽然0透明度，无论什么颜色都无关紧要），否则加上删除线不操作，这里使得从默认的颜色，且0透明度，到这个颜色0.6透明度*/
        background-image: linear-gradient(
          transparent,
          rgb(0, 0, 0, 0.6) /*建议使用rgba*/
        );
      }
      .d {
        width: 300px;
        height: 200px;
        background-color: rgba(0, 0, 0);
      }
    </style>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>

还可以这样：

  <style>
      div {
        width: 200px;
        height: 60px;
        margin: 10px;
      }
      .a1 {
        background: linear-gradient(red, black);
      }
      .a2 {
        background: linear-gradient(red, black, pink, green);
      }
      .a3 {
        background: linear-gradient(to left, red, black);
      }
      .a4 {
        background: linear-gradient(to top left, red, black);
      }
      .a5 {
        background: linear-gradient(30deg, red, black);
      }
    </style>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
    <!--
颜色变化默认是从上到下的
    也可以设置方向，to left，就算向左进行渐变
to top left就是向左上进行渐变，top和left可以改变位置，效果一样，即top right bottom left这些都可以进行操作
但是不能冲突，否则操作的元素就会不显示，如left和right一起，bottom和top一起
也可以进行数学上的度数方向，如30度
下面相对于当前位置进行90度旋转，即逆时针（为什么是逆时针，你认为在数学坐标系中用一个线段从0度到90度，这个线段是怎么移动的呢，很明显是逆时针的，那么这个逆时针就是说明的这个）
如background: linear-gradient(90deg,red,black);
由于默认为从上到下，那么90度后，就是左边红右边黑
度数用deg表示，越大的元素，度数的效果越明显
  -->

现在我们来操作一个案例：

下载这个图片：

链接：https://pan.baidu.com/s/1G-3AO9ylJeuAUaHjuaH47A

提取码：alsk

 <style>
      .box {
        position: relative;
      }

      .box img {
        width: 300px;
      }

      .box .title {
        position: absolute;
        left: 15px;
        bottom: 20px;
        z-index: 2;
        width: 260px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
      }

      .box .mask {
        position: absolute;
        left: 0;
        top: 0;

        /* display: none;，不使用他是因为他不操作过渡，虽然他也可以有类似的opacity: 0;效果，那么既然不过渡，那么就会直接的到终点显示，这并不高级🤭*/
        opacity: 0;
        width: 300px;
        height: 212px;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        transition: all 0.5s;
      }

      .box:hover .mask {
        opacity: 1;
        /* display: block;*/
      }
    </style>
    <div class="box">
      <img src="./images/product.jpeg" alt="" />
      <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
      <!-- 渐变背景 mask -->
      <div class="mask"></div>
    </div>

现在我们来操作一个总体案例：

需要如下的图片：

链接：https://pan.baidu.com/s/1_ODZdMB98weUR7zMhQw9gA

提取码：alsk

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      a {
        text-decoration: none;
      }

      img {
        width: 100%;
        vertical-align: middle;
      }

      .box {
        width: 1110px;
        height: 247px;
        margin: 20px auto;
        /* background-color: pink; */
      }

      .box li {
        position: relative;
        float: left;
        width: 350px;
        height: 247px;
        margin-right: 30px;
        overflow: hidden;
      }

      .box li:last-child {
        margin-right: 0;
      }

      .box .txt {
        position: absolute;
        left: 0;
        bottom: -50px;
        width: 350px;
        height: auto;
        padding: 20px 30px;
        z-index: 1;
        color: #fff;
        transition: transform 0.5s; /*transform默认为none，即不移动，这里我们操作transform时，那么会操作过渡，因为他内部是对位置改变，那么自然也会移动，因为我们操作的是他的过渡，那么他的值改变，也是过渡，会间接的对位置进行过渡的改变，当然，至于他是怎么过渡的，这里不做说明，有些过渡可能是不同的操作，虽然最终都是数字改变，一般是函数（但是可能是直接改变某些变量的，这里以函数作为说明）*/
        /* transition: all .5s;，这里可以加上这个东西吗
          答：可以，但是需要考虑浏览器读取样式的先后，如果这个属性transition: all .5s;首先读取，那么其他后读取的可能会操作过渡（假设padding后读取，那么他对于的设置可能就操作过渡了，因为他是从默认值（大多数数字的默认值是0，只是在前端样式（元素那里）中不会进行直接显示，计算样式可以找到）到对应值的，自然会触发过渡操作），当然，现在的浏览器一般会解决这样的问题，但是为了防止这样的问题，一般我们在项目中会很少使用all的，这里需要注意
          */
      }

      .box .txt h4 {
        font-size: 14px;
        font-weight: 400;
        line-height: 2em;
        color: #fff;
      }

      .box .txt h5 {
        margin-bottom: 40px;
        font-size: 18px;
        line-height: 1.5em;
        color: #fff;
      }

      .box .txt p {
        color: #fff;
        font-size: 14px;
      }

      /* 1. 渐变背景的盒子 */
      .box .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 350px;
        height: 247px;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        opacity: 0;
        transition: all 0.5s;
      }

      /* 2. hover效果 */
      /* 2.1 图片缩放 */
      .box li .pic img {
        transition: all 0.5s;
      }
      .box li:hover .pic img {
        transform: scale(1.2);
      }

      /* 2.2 渐变背景显示 */
      .box li:hover .mask {
        opacity: 1;
      }

      /* 2.3 文字向上移动 */
      .box li:hover .txt {
        transform: translateY(-50px);
      }
    </style>
    <div class="box">
      <ul>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./images/product.jpeg" alt="" />
            </div>
            <div class="txt">
              <h4>产品</h4>
              <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
              <p>
                <span>了解更多</span>
                <i></i>
              </p>
            </div>

            <!-- 添加渐变背景 -->
            <div class="mask"></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./images/huawei1.jpeg" alt="" />
            </div>
            <div class="txt">
              <h4>行业洞察</h4>
              <h5>迈向智能世界2030</h5>
              <p>
                <span>了解更多</span>
                <i></i>
              </p>
            </div>
            <!-- 添加渐变背景 -->
            <div class="mask"></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./images/huawei2.jpeg" alt="" />
            </div>
            <div class="txt">
              <h4>《ICT新视界》刊首语</h4>
              <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
              <p>
                <span>了解更多</span>
                <i></i>
              </p>
            </div>
            <!-- 添加渐变背景 -->
            <div class="mask"></div>
          </a>
        </li>
      </ul>
    </div>

这里需要注意一个地方，我们看如下的案例：

   <style>
      .a {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .b {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: pink;
      }

      div {
        width: 500px;
        height: 500px;
        background-color: black;
      }
      .a:hover {
        transform: scale(9);
      }
    </style>
    <div>
      <div class="a"></div>
      <div class="b"></div>
    </div>

<!--

上面的.a:hover并不会生效，而修改成.b:hover就会，这主要是因为点击元素的生效范围，当一个元素在其元素之上，那么这个:hover只会操作他，否则不会进行处理，现在你将.a里面加上z-index: 2;，来点击，可以发现生效了，这里是hover的操作方式，当然，相关（是相关的）的伪类都是如此，比如:active 

这就是为什么之前案例的hover是在.box li:hover，而不是在后面的对应元素上加上hover的原因，因为他们可能存在覆盖的操作，总要有一个在上面显示吧，没有同时显示的，所以需要在他们上一层中进行处理（如li，当然a也是他们共同的上一层，所以a一般也行）
-->

空间转换：

空间：是从坐标轴角度定义的，x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换也叫3D转换

属性：transform（也是使用他，前面是平面的转换，其实他还可以空间的转换）

使用translate实现元素空间位移效果

 <style>
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transition: all 0.5s;
      }

      .box:hover {
        transform: translate3d(50px, 100px, 100px); /*代表x，y，z*/
        transform: translateX(100px);
        transform: translateY(100px);
        /* transform: translate(50px,100px,100px); 参数不对，加上删除线，不起作用，删除线加上自然不会操作覆盖，单纯的translate可不是translateZ，与rotate和rotateZ是一样的是不同的*/
          transform: translateX(100px) translateY(100px); /*也可以存在多个，并且同样的，那么后面的覆盖前面的，如transform: translateX(100px) translateY(100px) translateY(300px);中，是操作300px*/
      }
    </style>
    <div class="box"></div>
    <!--看起来移动了，实际上我们的z轴移动，并没有移动，因为需要其他的处理-->

上面由于z轴我们看不出效果，所以需要一些操作（比如立体，观察，立体代表真实存在的，观察是虚假的存在，只是因为观察造成的大小变化而已，并非真实存在，即只是大小变化），观察比如如下：

使用perspective属性实现透视（perspective中文一般是透视的意思）效果：

<!--
生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
默认情况下，为什么浏览器或者电脑屏幕的显示无法观察到Z轴位移效果
答：Z轴是视线方向，移动效果应该是距离的远或近，浏览器或者电脑屏幕的显示是平面，默认无法观察远近效果，既然是默认，那么自然可以通过某些方式来完成这种效果，要不然为什么这样说明呢，那么为什么可以实现呢，很明显，显示的效果归根结底都是硬件来给你完成显示的，而电脑自身或者浏览器只是给出一些参数而已，任何操作最终都会到硬件，原理如下：
电脑屏幕的Z轴移动是通过显示器的硬件实现的，在一般的平面显示器中，屏幕上的图像是通过液晶显示技术或其他显示技术生成的，并在屏幕表面的像素阵列中呈现
尽管显示器屏幕本身是一个平面，但通过改变显示器后面的光源和液晶层的工作状态，可以实现一种视觉上的Z轴移动效果（近大远小、近清楚远模糊），一种常见的技术是使用背光源和液晶层的组合，来控制光的透过和阻挡，从而实现深度感知，液晶层中的像素可以通过改变其透明度或遮挡程度来控制光的透过情况，从而改变图像在Z轴方向上的显示效果，例如，在液晶显示器中，可以通过控制液晶层的电场来调整液晶分子的方向，从而控制光的透过程度，这样可以实现在不同区域显示不同的透明度，产生一种层次感和深度感，另外，还有一些其他的显示技术，如立体显示（3D display）或者体积显示（volumetric display），可以在显示器中实现更直接的Z轴移动效果，这些技术利用了不同的原理，如分层显示、立体成像或光栅投影，以在屏幕上呈现立体或体积效果，需要注意的是，虽然可以通过这些技术在屏幕上实现视觉上的Z轴移动效果，但实际上屏幕本身仍然是一个平面，这些技术主要是通过显示器的特殊设计和处理来欺骗我们的视觉系统，使我们感觉到图像在Z轴上的移动或深度变化，特别的，我们可能在学习数学时，画出过正方体，那么对应的旋转（如transform: rotateX(360deg);）一般也是根据他这样来操作的（只不过只有一个面时，看起来并不立体，为了操作这样的情况，后面给出了立体的操作，要知道二进制是可以进行几乎的任何处理的，因为你使用画图软件都可以复现了，为什么你就认为他不能自动这样处理呢），只是观察不同而已，然而，计算机只是模仿而已，并不能完全一致，这主要考虑数学是否完全解释了，虽然就算呢，也不很难考虑到其他因素，所以整体来说只能模仿
	
属性（添加给父级，这是规定的，具体原因可以百度）：
perspective: 值;
取值：像素单位数值，数值一般建议在800 – 1200（满足人视觉的习惯。你一般要看多远呢）
作用：
空间转换时，为元素添加近大远小、近实远虚的视觉效果，简单来说就是添加一个眼睛来控制显示
-->

 <style>
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transition: all 0.5s;
      }

      .box:hover {
        transform: translateZ(200px); /*越大，越容易看到大*/
      }
      body {
          /*负数不操作，加上删除线，0会一直循环*/
        perspective: 1000px; /*越小，那么对比视觉就靠近，即越大，这个与Z轴的大小共同影响视觉，z为负数，那么这里越小就越小*/
      }
    </style>
    <div class="box"></div>

这里根据图片来进行解释为什么perspective越小看起来越大，当z为负数，perspective越小就看起来越小了，而z越大看起来也越大

首先对应的d是perspective的值，而z是translateZ的值，当设置了d时，那么眼睛就出现了（所以对应的距离就是我们通常看多远的距离），就通过这个眼睛来控制显示，当然d没有时，那么我们就相当于没有眼睛，即这个时候会默认为对应的图（可以自己测试），那么不操作这样的方式，其中第二个图，d是正数，z是是负数，因为：

虚线的像是z的终点定位，最终看到的是真实图中的图形被线剪切的部分（比如第一个图实现圆小于被线剪切部分的背景圆，这个背景圆就是我们看到的效果），二进制可以选择让你看到什么，一般z代表人移动，d代表你移动，正好结合生活中的近大远小，但是他也只是模拟，具体我们肉眼的工作可能是非常复杂的（而不是看的图像不动，关联参照虚线图来决定看的多少），即这里只是模拟视觉的近大远小的处理，所以可以得到：

perspective和z都是正数时，perspective越大，那么显示越小

perspective是正数但是z是负数时，perspective越大，那么显示越大

perspective没有负数，且无论z是否为负数，z越大那么显示越大（针对数字来说的，因为-200大于-300，自然也符合，即perspective不变时，设置z就能操作近大远小了，一般我们也不会改变perspective，将他默认一个好的值就行了），因为最终的看法是z的终点（参照他，满足他），并且他与原图一样大小，所以也就造成了若z是正数，看到的必然是比原来的大点的（只是在这个基础上变小），若是负数，看到的必然是小点的（只是在这个基础上变大）

简单来说perspective控制我们与目标的距离，而translateZ控制目标参照图像移动的距离（虽然他与现实不同，因为有负数，我们需要参照他，满足他，使得出现参照他的看到的图像），并且根据这些来模拟人肉眼的视觉，最终完成上面的情况，这里慢慢的体会吧

建议这样的体会：将你自己看成那个眼睛，那么就很合理了

当然任何的说明都比不上你的实践，只有实践才可以让你更加的清楚明白

使用rotate实现元素空间旋转效果：

这里需要一个图，地址如下：

链接：https://pan.baidu.com/s/1xIyDoymgDv-cn2Ju1_wyyg

提取码：alsk

 <style>
      img {
        width: 250px;
        transition: all 20s; /*给出20s，是为了可以更加的清楚怎么旋转的，记得等一下*/
      }
      .b1 img:hover {
        transform: rotateZ(
          360deg
        ); /*与之前操作旋转的rotate(360deg)是一样的效果*/
      }
      .b2 img:hover {
        transform: rotate(360deg);
      }
      .b3 img:hover {
        transform: rotateX(360deg);
      }
      .b4 img:hover {
        transform: rotateY(360deg);
      }

      /*
      从这里可以看出了，默认的rotate是操作z轴的，对应的旋转是保证z轴不变，在z轴基础上进行旋转（这里是顺时针）
      同理rotateX保证x不变，进行旋转，rotateY保证y不变，进行旋转，你认为你对着一条线段进行旋转，是否也有顺时针之分呢
     
     我们可以发现，对应就是在中心点旋转的（前面的图有显示的）
      */
    </style>

    <div class="b1">
      <img src="./images/hero.jpeg" alt="" />
    </div>

    <div class="b2">
      <img src="./images/hero.jpeg" alt="" />
    </div>
    <div class="b3">
      <img src="./images/hero.jpeg" alt="" />
    </div>
    <div class="b4">
      <img src="./images/hero.jpeg" alt="" />
    </div>

当然，上面我们是没有加上d的，那么看起来是图像自己操作，因为没有眼睛，这样可能并不会出现正方体的处理方式，所以现在我们加上d看看效果：

<style>
      .b3 {
        width: 300px;
        perspective: 1000px;
      }
      img {
        width: 300px;
        transition: all 2s; 
      }

      .b3 img:hover {
        transform: rotateX(360deg);
      }
    </style>

    <div class="b3">
      <img src="./images/hero.jpeg" alt="" />
    </div>

是否感觉正常多了，但是还有一个问题，如果将.b3里面的width: 300px;删除，那么会怎么样，我们删除运行一下，也就是说，如果我们单纯的加上d，那么他是斜起来的，这是为什么，很明显对应的x轴与宽度可能有某种关系，并且经过测试，该宽度与Y和Z基本没有什么关系（Y一般代表rotateY的说明），且就算有，显示的也不明显（当然，对于x和z，d也是需要加的，这是为了保证正常，所以一般我们也会加上d，其中宽度与对应图基本没有什么变化，所以可以不操作，但是也为了保证正常，也会一致的），所以我们这里主要操作说明的是x轴，并且经过测试，当width删除后，那么他默认按照正方体的x，y，z来进行操作（到顶就是这个了），当有width时，这个值越大，左边线越斜（这就是为什么width删除后，会这样的原因，因为这个时候，宽度是占满一行的），到正方体的过程，若width正好是图片的宽度，那么就正好的完成的上下旋转，这也是为什么上面的他们都是300px，注意：这里了解即可，并且为了保证显示，在旋转时，一般我们都会操作宽度一致，并且加上d，这也是后面我们固定的写法了，那么为什么会出现这样，这肯定是规定的（他程序就是如此）了，因为二进制是可以做到了，不要小看需求（芯片都可以制造出来，他自然也是可以的），当然，若你比较厉害，手动改变也行，虽然这种情况很少，所以忽略不计

实际上在很多时候也会有较容易的判断正向旋转：

左手法则：判断旋转方向，左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

还有如下的扩展：

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度，x，y，z 取值为0-1之间的数字

<style>
      .b3 {
        /* width: 300px; */
        perspective: 1000px;
      }
      img {
        width: 300px;
        transition: all 2s;
      }

      .b3 img:hover {
        transform: rotate3d(
          0.4,
          0.5,
          1,
          360deg
        ); /*
        x，y，z是按照轴，是将x，y，z轴都看成大小为1的轴，这里可以取值为0和1
        如果你有数学功底，那么可以很容易的看出来是求得原点到指定点的线段作为轴，所以这里你运行一下，然后修改成如下：
        rotate3d(0,0,1,360deg);，那么这也就操作z轴的旋转了，并且这个1可以是0.1，因为轴短或者轴长都是z轴，且由于没有其他的x，y影响，所以不会变化（否则会的，因为指向决定不同，可以自己理解一下的）
        当然，直观上与数学上的几何有点不同，但是也只是几何x，y，z旋转或者移动过来的而已，即操作对象不同而已，你将x，y，z移动一下是否与正方体的x，y，z是一样的表示呢
        */
      }
    </style>

    <div class="b3">
      <img src="./images/hero.jpeg" alt="" />
    </div>

立体呈现（前面我们知道观察，现在来看看立体）：

目标：使用transform-style: preserve-3d呈现立体图形

由于perspective只增加近大远小、近实远虚的视觉效果，所以对于立体一般需要其他方式，并且由于上面的自定义轴也只有一个方向，所以这里必须说明一下立体呈现

实现方法：

添加 transform-style: preserve-3d;，使子元素处于真正的3d空间，一般他的默认值是flat，即表示在2D层面呈现

呈现立体图形步骤

1：盒子父元素添加transform-style: preserve-3d；（一般与d一样的规定，放在父里面，他们都表示里面都进行这样的处理，所以他们一般都放在对应的父元素里面，即代表在子元素在透视空间或者立体空间）

2：按需求设置子盒子的位置（位移或旋转）

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

 <style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transition: all 2s;
        transform-style: preserve-3d; /*默认是flat，代表2d*/
      }
      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .front {
        background-color: orange;
        z-index: 20;
        transform: translateZ(
          200px
        ); /*当是立体时（不是flat时），那么设置了translateZ，一般情况下，会认为是高等级的显示，即优先看他，除非其他的也存在translateZ，并且逻辑上大的移动后优先显示*/
      }
      .back {
        z-index: 200;
        background-color: green;
      }
      .cube:hover {
        transform: rotateY(180deg);
      }
    </style>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>

正是由于立体的存在，导致Z轴的移动会出现效果，虽然直观上看不出来，但是在旋转时就能看出来的，且要注意，这里没有操作d

你可以修改成如下：

.cube:hover {
        perspective: 1000px;
        transform: rotateY(180deg);
      }

然后可以发现，对应的大小并没有因为移动来处理，而是在透视改变大小后，将这个大小来操作立体而已，所以这也是为什么在旋转过程中，你移开他，他会发生变化，即回到原样，并且没有继续操作透视的原因

我们再来观察一个特别的案例，理解即可：

<style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transition: all 2s;
        transform-style: preserve-3d;
      }
      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px; /*尝试改变宽度，使得有点斜*/
      }

      .front {
        background-color: orange;
        z-index: 20;
        transform: translateZ(
          200px
        ); 
      }
      .back {
        transform: translateZ(
          -200px
        ); 
        z-index: 200;
        background-color: green;
      }
      .cube:hover {
        perspective: 1000px;
        transform: rotateY(180deg);
      }
    </style>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>

比较神奇吧，现在我们来操作一下案例：

 <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .navs {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }

      .navs li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;
        transform-style: preserve-3d; /*让里面的内容操作3d，使得z轴起作用的显示*/
        /*实际上立体的操作，我们也可以给一个面进行处理，即斜一个面，来实现一点立体的效果，这是保证可以看到全貌的基础，而不是正面看（前面我们基本都是正面看）*/
        /* transform: rotateX(-20deg) rotateY(30deg); */
        /*
        想象一下一起操作时是否是类似的正方体的写法呢，transform可以存在多个的前面我们操作过了
        只要是同一种属性，那么就可以放在一起，所以按照这样的说法，那么transform: rotateX(-20deg) rotateX(-10deg);，也是可以的，只是后面的-10deg后操作覆盖，即这里是-10deg起作用
        */
      }

      .navs li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }

      .navs li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }

      .navs li a:last-child {
        background-color: orange;
        transform: rotateX(90deg) translateZ(20px); /*从这里可以看出，在旋转过程中，对应的x，y，z一般会跟着，或者说，x，y，z是根据当前元素来对照的，所以这里的效果正好进行对应（x先，y后，z最后，而不是一起的，要不然前面的斜一个面应该不是对应的样子了）*/
        /*由于x，y，z是根据自身元素或者自动移动来决定的，所以这也可以这样：translateZ(20px);*/
        /*到这里你应该悟了，旋转和移动都是建立在我们生活中的例子，前面我们之所以并不能直观的看出来，是因为并没有操作3d，即transform-style: preserve-3d;，现在应该明白了吧*/

        /*这里还要注意一个问题，我们知道，显示最小单位通常是像素，所以在考虑90deg时，可能存在的并不是真的中间，但是这点误差并不大（一般考虑是1像素的误差），当然，我们也可以给出奇数的高度来操作中间的处理，来解决这个误差，这个时候需要考虑总高度减去1然后除2了，这里了解即可
      因为1像素的误差并不会太影响美观，所以有时候我们通常不会解决这样的问题，除非要求完美
      */
      }

      .navs li:hover {
        transform: rotateX(
          -90deg
        ); /*这里注释前面的transform: rotateX(-20deg) rotateY(30deg);，否则过渡会统一的处理，隐藏的Y处理，所以你可以看起来加上和不加上的最终执行结果是一样的
          前面的transform: rotateX(-20deg) rotateY(30deg);的存在，主要是让你知道其他面在具体哪个位置
          */
      }
     
     
     /*上面还要主要，整体操作li是内部所有分开操作，要知道面看起来是立体的，但是其实他们的分开操作的，因为他们是不同的元素，所以这里利用li比较方便，而不是内部都进行处理，虽然比较麻烦，并且可能处理不了*/
    </style>
    <div class="navs">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登录</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注册</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>

这个案例可以完善你对立体的操作，至此，我们的观察和立体基本学习完毕，即空间转换操作完毕，当然，平面转换也是操作完毕的

我们的操作基本都是transform来完成的，他存在位移，缩放，旋转，在空间层面我们完成的位移和旋转，平面层面都进行了操作，所以现在只有空间层面的缩放了

空间缩放：

要知道明显的处理，可以看这个代码：

.navs li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;
        transform-style: preserve-3d; 
        transform: rotateX(-20deg) rotateY(30deg) scale3d(0.5,1.1,2);
    /*这里也可以修改成transform: scale3d(0.5,1.1,2);，都进行测试吧*/

        
      }

前面的代码修改成这样即可，你就会发现问题了，z轴默认情况下是没有长度的，只有当位移后，那么他会以原来部分位置为参照来进行，这里与x，y是不同的，即位移起始位置不变，这里说明比较不友好，你可以认为其中一个颜色的图片始终不同，另外的一个图片的大小是变化的，这里给出代码：

 <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .navs {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }

      .navs li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(30deg) scaleZ(1.4); /*这个1.4你可以改一改数值，你就能明白了*/
      }

      .navs li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }

      .navs li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }

      .navs li a:last-child {
        background-color: orange;
      }
    </style>
    <div class="navs">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登录</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注册</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>

任何说明都比不上你的一次测试理解的通透，自己测试一下吧（上面的scaleZ(1.4);改一下其他数值进行测试）

动画：

目标：使用animation添加动画效果

一般情况下，虽然动画内部是使用过渡的，但是还存在其他操作，所以动画可以操作过渡，但是过渡可能操作不了动画，比如：动画可以暂停操作（即其他操作造成的），过渡并不能

所以：

过渡是实现2个状态间的变化过程，开始到结束，然后结束到开始

动画实现多个状态间的变化过程，开始到中间，中间到结束等等（在后面会理解的），且动画过程可控（重复播放、最终画面（类似于开始到结束，这里在一定程度是过渡的操作）、是否暂停）

由于过渡是根据函数来发生改变的，那么在多次改变过程的渲染，就相当于我们在观察他过渡的情况（如果一个小本子，写上了多个动作，你进行快速的翻页，那么他是否也是连续的呢，具体可以看看这个视频：https://www.bilibili.com/video/av626368363/）

那么这个一页纸，也就相当于我们的一个像素的移动或者规定的几个像素的移动，每一个像素或者几个像素代表显示一次，从而形成了过渡的操作，所以建立在过渡之上的动画应该也是如此，即动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，而这个图片在浏览器上就是渲染一次的画面（一般我们也会称为帧），所以在一定程度上构成动画的最小单元是帧或动画帧（一般固定，与浏览器是不同的），在浏览器中就代表渲染一次的时间（虽然浏览器这个时间可能会有所波动而已，但是差别不大，可以忽略不计，同样的，这也是过渡的说明，以为动画建立在过渡之上，虽然还有其他操作，但是过渡是基本操作，是离不开的，这个其他操作可能是使得这个过渡进行重复，暂停等等的处理而已）

现在我们来进行测试：

 <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        /*
        使用动画
        animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
        */
        animation: change 1s; /*可以只给部分，其他默认即可，但是这两个必须要有，否则可能不会动，默认秒为0s，即不动的，其他的如重复次数为0，即不重复，还有其他的具体可以百度一下默认值或者作用*/
      }

      /*动画存在多个状态，自然他也可以是过渡的两个状态，但是在操作多个状态时，过渡不能完成，即这是其他操作的原因*/

      /*
      两个状态，相当于就是过渡
      */
      /*首先定义动画，并不是直接就起作用的，因为你还需要让谁进行处理的
      而让谁进行处理，自然需要使用这个动画，也就自然需要谁来代表这个动画了，所以下面就使用change来代表这个动画*/
      @keyframes change {
        from {
          /*开始属性*/
          width: 200px;
        }
        to {
          /*结束属性*/
          width: 600px;
        }
      }
    </style>
    <div class="box"></div>

与过渡不同的是，他的变化只是操作一会，而不是固定好，并且没有返回的操作，可以说他只是定义一个小过渡，即200px到600px这个时间，其他的不会操作，而没有过渡的回退，这主要是因为他是进行使用，而非被动的监听（过渡是这样的），所以这里执行后他直接的进行处理了，并且将from里面的200px，变成10px，最终的结果还是不变（即元素不变），更加的验证了动画只是动一动，而非最终改变元素的属性，即只是操作一会，即动画一下，而过渡则是整体处理，即自身进行过渡处理，而非使用处理，这里可以自行运行体会，可以认为首先直接设置200px，进行过渡，到600px时，结束过渡，不会退，然后直接设置回来（虽然是因为默认状态的原因，后面会说明的），即动画操作完后，就会设置回自身，除非你是无限循环的，那么自然不会设置回自身了（这里可以参照后面第一次操作alternate的情况），即200px（这个200px代表元素的，如果元素的是20px，那么这里就是20px，而非200px）

即：

过渡：自身元素的变化，存在回退（在于元素变化，而非起始的赋值，可以认为这个处理是最后的）

动画：中间虽然使用了过渡，但是存在其他操作，设置起始时，过渡到终点值，直接结束过渡，到设置元素值，过渡只是在中间进行，两边都是直接的设置，相当于并没有按照自身元素的变化（即没有过渡的哪个监听属性，如transition: width 2s;或者transition: all 2s;中的width或者all的监听），且并没有回退

由于各自的特点，我们可以发现，过渡的确有时候不能完成动画的处理，但是由于动画还存在如下操作，所以动画可以完成过渡的处理：

<style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        animation: change 1s; /*不分先后，他们在得到值时是没有冲突的，所以可以是animation: 1s change;，虽然有些需要，比如字体的直接结尾（如font-family，具体可能也会发生改变的，因为可以人为改变，虽然一般不会），那个时候需要有顺序，但是顺序与否并不重要，因为这种规定可以被人为改变（虽然一般不会），记住并无意义，只需要了解即可，即记住常用的即可，比如按照这个顺序：animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;*/
      }

      /*操作多个状态的，很明显，百分比是动画的总时长的位置*/
      @keyframes change {
        0% {
          width: 200px;
        }
        50% {
          width: 500px;
          height: 300px;
        }
        100% {
          width: 800px;
          height: 500px;
        }
      }
      /*可以发现，他们的变化有点停顿（当然，这个停顿一般也会与总时长有关，所以他也会变化，除非少于其最小停顿，那么这个时候可能会出现总是长不一致的可能性，但是时长可能也会存在最小，也正好对应与停顿，所以一般情况下，这种情况我们并不考虑），因为状态之间在动画这里是存在停顿的（函数的继续计算覆盖，因为其过渡的函数是不同的），但是可以发现的确是多个状态，即存在中间*/
    </style>
    <div class="box"></div>

如果上面修改成这样，看起来与过渡是否一样呢：

@keyframes change {
        0% {
          width: 200px;
        }
        50% {
          width: 500px;
          height: 300px;
        }
        100% {
          width: 200px;
          height: 100px;
        }
      }

经过测试与过渡是一样的（在后面会继续处理的，这个过渡可以自己写写测试一下），只是他这个1s代表来回时间，所以对于过渡来说，设置0.5秒就是一样的了

即验证了过渡可能操作不了动画，但是动画一定能操作过渡，因为动画的基础是过渡，但是由于动画存在其他操作，所以单纯的过渡是不能一定完成动画的

当然，动画和过渡在一定程度上一起操作时，会以动画为主（在某种情况，并不以过渡的互相覆盖来操作，这是因为他们一起操作时，可能你动画显示优先级高，除非他操作完毕，那么就是过渡了）

注意：这里还需要说明一下这个：

<!--
比如按照这个顺序：animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
一般情况下，如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间，这里默认第一个是动画时长的，当然我们一般不考虑修改源码的情况的

现在我们来操作上面的速度曲线，要操作速度曲线我们需要认识这个图：

一般来说速度曲线就是上面的单词，如：

<!--
linear匀速
ease逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
没有ease-out-in，因为一开始总要加吧（实际上只是不存在而已，因为需要起始向上的切线，而不是降低切线，这是保证为0时的问题，如后面的ease-in-out，你认为一开始的线可以降低切线吗），当然，如果包括方向的话，那么他是可以进行处理的，在后面会说明
-->

一般需要结合延迟时间来进行处理，当然，这些操作是对过渡的操作，而动画是操作过渡的，所以这些操作可以操作过渡和动画

首先是过渡：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 1s linear;
      /*默认都是ease，即缓慢的操作*/
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      transition: all 1s;
    }

    .c {
      width: 100px;
      height: 100px;
      background-color: pink;
      /*
        linear匀速
        ease逐渐慢下来
        ease-in加速
        ease-out减速
        ease-in-out先加速后减速
        默认是ease，如单纯的width 2s一般就是按照ease来的，且默认延迟时间为0s，即立即变化，而不是等待变化
        同样的这个延迟实际上存在几秒时，如2s，那么需要改变的数字再2s内没有回到原来的样子
        这样才会变化到你当前改变的数字，你可能会继续改变
        但是只是确定一个最终（这里存在嵌套的延迟，所以比较麻烦的解释），否则重置数字，继续延迟，且回退也会操作这个延迟
        */

      transition: all 1s ease 1s;
    }

    .d {
      width: 100px;
      height: 100px;
      background-color: green;
      transition: all 1s linear;
    }

    .a:hover {
      width: 500px;
    }

    .b:hover {
      width: 500px;
    }

    .c:hover {
      width: 500px;
    }

    .d:hover {
      width: 500px;
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>

然后是动画（操作了延迟时间，和速度曲线）：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: a1 1s linear;

    }

    @keyframes a1 {
      from {
        width: 200px;
      }

      to {
        width: 500px;
      }
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s ease;
      /*
      也是默认，因为对应的参数都是操作过渡的，而这里基本盘也是过渡，所以是一样的效果
      只是动画控制过渡的如何出现，以及位置变化，但是他还是过渡，所以这里照样进行操作
      */
    }

    @keyframes b1 {
      from {
        width: 200px;
      }

      to {
        width: 500px;
      }
    }

    .c {
      width: 100px;
      height: 100px;
      background-color: pink;
      animation: c1 1s 2s;
      /*延迟，第二个数字，是操作了延迟，由于没有回退，所以他返回时并不会进行延迟的直接设置*/
    }

    @keyframes c1 {
      from {
        width: 200px;
      }

      to {
        width: 500px;
      }
    }

    .d {
      width: 100px;
      height: 100px;
      background-color: green;
      animation: d1 1s linear;
    }

    @keyframes d1 {
      from {
        width: 200px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>

可以看出他们的操作，并且我们可以发现，动画其实在某种程度只是操作了过渡的状态位置，即如百分比，否则一般情况下他们的其他操作基本都是一样的，但是也由于这样的状态存在，所以我们通常都会操作动画来进行细节处理，而不是使用过渡，所以通常动画使用的比较多，当然，由于某些情况并不需要动画的麻烦处理，所以过渡也并非不会使用，具体情况具体分析吧

现在我们来解释一下前面的"没有ease-out-in"的说明，在单纯的设置中，可能是没有的，但是还是存在其他方式有的，我们可以将上面的过渡代码进行执行，然后在如下可以看见（之所以是过渡代码，是因为可以动态的改变，而不是一开始就进行改变）：

所以可以看到，对应的linear是默认的曲线，你可以拉动右边的圆圈（自己试一试），可以发现，能够存在ease-out-in的情况，我们可以这样（对应上面还有自动的操作测试，虽然并不是我们自身的，但是也复刻的会出现的情况）：

然后将鼠标移上去，触发过渡，可以发现，往后走了，现在我们将这个操作进行处理：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 1s cubic-bezier(0.29, -0.35, 1, 1); 
        /*
        通过测试，该曲线存在如下特点：
        首先x范围是：0-1，包括0和1，而y基本随便设置，但是有些地方的视频或者博客可能也会说明成0-1，这是保证再没有其他方向的情况下的
        这样的值并不需要多大，因为我们只是定义曲线，x，y的边界大小，并不重要，你认为当x处于0-100，y也是0-100，生成的曲线，可以在x，y中都是0-1的情况下，也能复刻出现吗（只是整体的曲线比例大小比较小而已）
        
        */
    }


    .a:hover {
      width: 500px;
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s cubic-bezier(0.29, -0.35, 1, 1);
    }

    @keyframes b1 {
      from {
        width: 100px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>

即基本上什么函数曲线都行，只是直接设置的不存在先减速再加速而已

当然还存在一个重要的处理（帧的操作），大多数情况下，游戏角色的移动就可以利用他来完成：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 1s steps(3);
      /*
      过渡可以设置的，动画也可以设置，所以注意即可，后面就不提示了
      steps(3)代表动帧，即总个过程分3次处理，一个帧代表了视频或动画中的一个瞬时时刻，即前面我们说明的"而这个图片在浏览器上就是渲染一次的画面（一般我们也会称为帧）"
      */
    }


    .a:hover {
      width: 500px;
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s steps(4);
      /*
动画的from设置（无论他里面是否操作，就算是空的操作，都会这样的，不写from的话或者他是空操作，默认from中为元素的起始值，即原地算一个帧，同样的，如果to不写，默认也是如此，即元素的起始值（实际上这也符合常理，你没有设置，自然就是自身元素的值了），所以设置了from中width为200px，to不写，那么反过来的动画了，即相当于to中width写上了100px，同样的，from不写，其width也是100px，具体可以自己测试一下）也会算作一个帧（将下面的from里面的100px设置成50px就知道了，会到50px一下的），所以这里就会出现一个问题，width在没有设置到500px时，就结束了（因为其中的一帧被起始占用了），并且他这个帧确也还是处理了100px到500px的范围
使得动画无论怎么设置都会少一个帧，这个时候可能需要其他的处理，具体可以百度
      */
    }

    @keyframes b1 {
      from {
        width: 100px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>

我们继续看如下（前面操作了速度曲线，延迟时间，这里操作重复次数）：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 1s steps(3) 4;
      /*
      4是重复次数，代表操作4次，但是过渡一般并不操作重复次数，所以这里出现删除线
      你要明白一个事情，过渡自身的操作你认为可以存在次数吗，根据逻辑来说应该是不能存在的，所以过渡通常没有重复次数，主要是他并没有直接的回退，而动画存在
        所以为了更好的处理，后面基本完美只会操作动画，而不操作过渡了，总不能每个都进行测试吧，在以后需要处理时，可以测试一下就行，并不需要记住，这是没有必要的（别人是可以进行修改的，当然，记住也没有什么坏处，只是没有必要而已）
      */
    }


    .a:hover {
      width: 500px;
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s steps(4) 2s 3;
      /*只是延迟2s处理这里，所以后面的就不会延迟了，3代表重复次数，即操作3次，具体可以自己测试*/
    }

    @keyframes b1 {
      from {
        width: 100px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>

当然上面的还可以这样：

<style>
    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s steps(4) 2s infinite; /*infinite的中文意思：无限的*/
    }

    @keyframes b1 {
      from {
        width: 100px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="b"></div>

我们还能这样（操作动画执行方向）：

<style>
    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s steps(4) 2s infinite alternate; /*alternate：反向的处理*/
        /*这里解释说明和测试之前的操作："那么自然不会设置回自身了（这里可以参照后面第一次操作alternate的情况）"*/
      /*
        反过来的第4帧也是将from作为一帧（反过来的也是操作速度曲线，只不过是反向的速度曲线而言，比如你可以将steps(4)修改成ease来测试看看速度，是否是反向的，过渡的反向也是如此的，虽然他们最终都是操作同样的，只是动画存在其他的操作方式，如百分比）
        默认情况下，重复次数是1，帧数是1px的处理，所以看起来是动态的移动了
        但是这里还需要特别的注意：alternate会占用重复次数，如果重复次数只有1，那么他是不会回退的，所以通常情况下，alternate一般会结合无限循环来进行处理
        */
    }

    @keyframes b1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="b"></div>

这个回退与之前的某个操作有点类似（在之前的"如果上面修改成这样，看起来与过渡是否一样呢："这里），我们给出代码：

<style>
    .a {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation: change 1s;
    }

    @keyframes change {
      0% {
        width: 200px;
      }

      50% {
        width: 500px;
        height: 300px;
      }

      100% {
        width: 200px;
        height: 100px;
      }

    }

    .b {
      width: 200px;
      height: 100px;
      background-color: pink;

      transition: all 0.5s; /*存在回退，所以每次都是0.5，这是因为上面的动画总体是1，并且来回基本一样，所以需要这样的处理*/
    }

    .b:hover {
      width: 500px;
      height: 300px;
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>

他们是一样的，现在我们来操作这个回退而不是进行百分比处理的回退试一下：

<style>
    .a {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation: a1 1s infinite alternate;
    }

    @keyframes a1 {
      0% {
        width: 200px;
      }

      100% {
        width: 500px;
        height: 300px;
      }

    }

    .c {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation: c1 1s infinite alternate;
    }

    @keyframes c1 {
      from {
        width: 200px;
      }

      to {
        width: 500px;
        height: 300px;
      }

    }

    .b {
      width: 200px;
      height: 100px;
      background-color: pink;

      transition: all 0.5s;
    }

    .b:hover {
      width: 500px;
      height: 300px;
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>

我们可以看到完全一样，且由于都是一次的动画，所以动画和过渡都是设置1s，实际上是重复次数造成的直接一次，所以就与过渡一样的了

我们继续操作（操作动画执行完毕时状态）：

  <style>
    .a {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: a1 1s backwards;
      /*默认值是backwards*/
    }

    @keyframes a1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }

    .b {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: b1 1s;
    }

    @keyframes b1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }

    .c {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: c1 1s infinite alternate backwards;
      /*
      一般情况下，由于backwards操作了最终状态，所以其他影响最终状态的属性与他一起时，他可能并不会进行操作
      如方向的处理，或者重复次数等等，而方向的处理一般需要重复次数，所以若需要执行状态，那么重复次数和方向处理基本不能写上，即infinite alternate不能写上
      这样也验证了一个情况，只要你单词对了，那么你写在哪里都可以，所以这里也可以是animation: infinite alternate c1 1s backwards;
      而如果是错误的单词，那么基本加上删除线，他并不会像字体的font-family一样，只是找，找不到就跳过，而这里没有，就会直接报错的，大多数都是如此，而不是字体的那个处理
      */
    }

    @keyframes c1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }

    .d {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: d1 1s forwards;
      /*
      backwards：代表第一帧的状态，一般情况下，第一帧代表一开始的显示，这也是默认的
      forwards：代表最后一帧的状态，一般情况下，最后一帧代表最终的显示，这里就是500px
如果有过程，那么会操作过程，最终会变成最后一帧的情况（是否看起来就是过渡的操作呢，针对变化最终结果而言），而不是默认的到第一帧
这也是为什么动画会默认最后会设置为原来元素的原因，因为这个的存在导致的，即"然后直接设置回来（虽然是因为默认状态的原因，后面会说明的）"
在一定程度上也验证了动画是对过渡的进一步操作，或者有其他操作
      */

    }

    @keyframes d1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }

    .e {
      width: 100px;
      height: 100px;
      background-color: black;
      animation: e1 1s steps(9) forwards;
      /*
     结合steps就会使得少了一帧的情况得以解决并出现（前面说明了"使得动画无论怎么设置都会少一个帧，这个时候可能需要其他的处理"，比如这里的处理），所以大多数情况下，我们会结合steps使用
     他保证存在最后一帧，并且如果有过程，最终也会到最后一帧的情况，正好处理了steps在动画的缺点
      */

    }

    @keyframes e1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>

至此，大多数的属性说明，我们基本都操作完毕了

现在我们来继续操作动画，前面我们基本都是统一处理，即animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;，实际上他们自然可以分开，大多数都可以部分设置，这里也给出上面没有存在的一些设置（如暂停动画），并且理解一下其代表的含义

这个图应该是需要动的，后面会进行处理的

我们来测试部分的属性设置：

<style>
    .a {
      width: 100px;
      height: 100px;
      background-color: black;
      animation-name: a1;
      animation-duration: 1s;
      animation-iteration-count: infinite;

    }

    /*移动上去就是加上，否则没有加上，在没有过渡时，可是直接的进行设置和取消设置的，这里自然对该值也是如此的，且他基本不会操作过渡，他不是数字*/
    .a:hover {
      /*移动上去就暂停，这是使得他不会进行移动，实际上这样操作是可以的，可以认为在移动之前有个变量控制是否移动的，默认情况下，是可以移动，当设置了这个，那么就不能，否则可以*/
      animation-play-state: paused;
    }

    @keyframes a1 {
      from {
        width: 50px;
      }

      to {
        width: 500px;
      }
    }
  </style>
  <div class="a"></div>

来一个案例测试（前面的图片中，两个时针的操作，还有前面也说明的"游戏角色的移动就可以利用他来完成"）：

逐帧动画：帧动画，开发中，一般配合精灵图实现动画效果

精灵动画制作步骤：

1：准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

2：定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

3：使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同，包括起始自身的话，正好整体的帧

4：添加无限重复效果

这里给出对应的精灵图地址：

链接：https://pan.baidu.com/s/1NwYG3jfQWP2TP9sHuOT9dw

提取码：alsk

<style>
    .box {
      /*这个图片，在没有其他影响的情况下，通常是宽度是1680，高度是140，所以为了进行显示，所以我们的高度和宽度也需要是其中一个图片的宽度和高度
      总共有12张小图（精灵图的小图），那么宽度是1680/12=140，所以这里的宽高都是140px，当然，若不是1680（找到图片，右键查看属性，点击详细信息就可以看到其宽高的像素了），那么你可以计算并修改一下即可
      */
      width: 140px;
      height: 140px;
      border: 1px solid black;
      background-image: url(./images/bg.png);
      animation: move 1s steps(12) infinite;
      /*
      当帧一直切换，就相当于我们一直翻页，使得看起来是连续的一样
      但是他也只是"快速切换大量图片时在人脑中形成的具有连续性的画面"
      所以如果你选择提供这个1s，可以发现，中间是跳过的，这样可以明显的看到其本质，所以上面才会说"快速切换大量图片"
      */
    }

    @keyframes move {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -1680px 0;
      }
    }
  </style>
  <div class="box"></div>

这个精灵图还不够完全的连续，这是因为图的原因，你可以选择在网上找一个连续的图，这里可以自行操作，当然，有时候快速和图直接的跨度，以及是否够多存在一定的关系，比如够快速，那么就算你跨度比较大，也是可行的，但是在一定程度上跨度大到一定程度，那么速度再快也容易被看到不对劲的地方，所以需要够多，总体来说，即够多，够快，跨度，才是角色移动的关键，在这个时候，可以选择增大跨度，但是不能使得够多变少，一般情况下，10张差不多了，那么满足了够多和跨度，这个时候我们只需要保证一定速度即可，1s一般就行，即大多数情况下，10张，1s是标准，若存在图宽度比较大，可以选择增加几张（多和跨度是相反的），这里的说明了解即可

上面实现了角色的跑步，但是他也只是原地跑步，现在我们来完成移动的时候进行跑步

要实现移动的同时进行跑步，只需要移动盒子即可，即操作多个动画（可以不同，而不是相同），或者说一个动画里面存在多个操作（就如之前的宽高的动画设置，他操作了两个，即宽和高，这是因为他们需要相同的时间，或者相同次数以及帧数等等）：

<style>
    .box {

      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      /*
      使用多个动画，需要使用","隔开，但是这里与js不同的是，若写上","而没有其他动画，那么删除线
      大多数在css中,后面要写东西的，否则删除线，比如：font-family，有些为了不这样，而是直接的空格隔开，比如：animation中的一个动画处理
      一般来说","完全不看先后（都是一样的操作方式，那么使用便可），而空格可能需要，比如动画第一个1s必然是动画时长，而不是延迟时间
      */
      animation:
        move 1s steps(12) infinite,
        mo 1s forwards;
      /*分开处理，我可不想某些样式使用无限循环，所以虽然时间相同，但是还是分开处理了，否则是相同的样式属性，并且还存在帧*/


    }

    @keyframes move {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -1680px 0;
      }
    }

    @keyframes mo {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(800px);
      }
    }
  </style>
  <div class="box"></div>

现在我们继续操作案例：

首先给出图片：

链接：https://pan.baidu.com/s/1y8KdLd1x3zqOrnVmAHrpmA

提取码：alsk

<style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 200px;
    }

    .box {
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
      /*
      没有他，你可以看到他回到第一个图的效果，这就是为什么我们还需要前面三个图的根本原因，使得你看不出了他的操作
      让你以为他真的一直移动的，如果使用录屏软件录制，然后每一帧的查看，可以看到在最后会有一点的停顿，甚至可能还看不到
      */

    }

    .box ul {
      width: 2000px;
      animation: move 5s linear infinite;
    }

    .box li {
      float: left;
    }

    @keyframes move {
      to {
        transform: translateX(-1400px);
      }

    }

    .box:hover ul {
      animation-play-state: paused;
    }
  </style>
  <div class="box">
    <ul>
      <li><img src="./images/1.jpg" alt=""></li>
      <li><img src="./images/2.jpg" alt=""></li>
      <li><img src="./images/3.jpg" alt=""></li>
      <li><img src="./images/4.jpg" alt=""></li>
      <li><img src="./images/5.jpg" alt=""></li>
      <li><img src="./images/6.jpg" alt=""></li>
      <li><img src="./images/7.jpg" alt=""></li>

      <!--保证不会留白，即他作为无缝的替换-->
      <li><img src="./images/1.jpg" alt=""></li>
      <li><img src="./images/2.jpg" alt=""></li>
      <li><img src="./images/3.jpg" alt=""></li>
    </ul>
  </div>

再来一个案例，首先还是需要一些图片：

链接：https://pan.baidu.com/s/15sjtHQcSpue_mygxcSTJpw

提取码：alsk

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      height: 100%;
    }

    body {
      background-image: url(./images/f1_1.jpg);
      background-repeat: no-repeat;
      /*下面这两个属性可以删除，变成background-size: 100% 100%;，虽然可能会变小一点，因为他并没有进行变大居中的处理的，而是直接的刚好满足*/
      /* background-position: center 0; 这个特殊的属性，在前面可能没有说明
      但是也有类似的，即"即这样的考虑方式，具体可以自己测试来体会"，自行体会，一般都是考虑该单纯的分量来操作的，了解即可，因为可能以后会发生改变，所以100%的操作是比较稳定的
      因为对于数字的操作通常比较稳定，而不会或者较难以发生改变
      background-size: cover; */
      background-size: 100% 100%;
      /* background-size: cover; */
      /* background-position: center 0; */
      /*既然是背景，那么当你放大整个区域时，一般他们不会改变，如果存在下拉框，他们也不会改变
      也就是说，他们的背景大小只是代表窗口的大小，即body，真正的html并不是
      */
      /*
      获取自身盒子的宽高，由于body是块，占用一行，所以宽度是存在的，但是高度没有，这里有个特别的，body会默认继承html的高度，而html所在父默认为窗口
      所以这里只需要设置html的100%即可
      否则，我们是需要手动设置body的，对于没有像这种继承（隐藏的继承）的，那么就需要手动，而这里就不需要，只需要设置html即可（虽然在一定程度上也是手动）
      
      */
    }

    .cloud img {
      position: absolute;
      left: 50%;
      top: 0;
    }

    .cloud img:nth-child(1) {
      margin-left: -300px;
      top: 20px;
      animation: cloud 1s infinite alternate linear;
    }

    .cloud img:nth-child(2) {
      margin-left: 400px;
      top: 100px;
      animation: cloud 1s infinite alternate 0.2s linear;
    }

    .cloud img:nth-child(3) {
      margin-left: -550px;
      top: 200px;
      animation: cloud 1s infinite alternate 0.4s linear;
    }

    /*定义的动画，可以被多人使用，因为我们只是使用他的信息，而非占用*/
    @keyframes cloud {
      to {
        transform: translateX(20px);
      }
    }


    .onin img {
      position: absolute;
      left: 50%;
      top: 0;
    }

    .onin img:nth-child(1) {
      margin-left: -400px;
      top: 1000px;
      animation: oni 0.6s 0.2s infinite alternate;
    }

    .onin img:nth-child(2) {
      margin-left: -200px;
      top: 1000px;
      animation: oni 0.4s 0.1s infinite alternate;
    }

    .onin img:nth-child(3) {
      margin-left: 0px;
      top: 1000px;
      animation: oni 0.4s 0.3s infinite alternate;
    }

    .onin img:nth-child(4) {
      margin-left: 200px;
      top: 1000px;
      animation: oni 0.7s 0.5s infinite alternate;
    }

    @keyframes oni {
      to {
        transform: translateY(-20px);
      }
    }
  </style>


  <!--云彩图片-->
  <div class="cloud">
    <img src="./images/yun1.png" alt="">
    <img src="./images/yun2.png" alt="">
    <img src="./images/yun3.png" alt="">
  </div>
  <div class="onin">
    <img src="./images/1.png" alt="">
    <img src="./images/2.png" alt="">
    <img src="./images/3.png" alt="">
    <img src="./images/4.png" alt="">
  </div>

一般来说，网页通常放在PC端（如电脑），以及移动端，这里说明他们的区别：

<!--
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
在电脑里面边写代码边调试移动端网页效果一般使用谷歌模拟器

具体的区别如下：
PC 端和移动端之所以需要区分，是因为它们具有不同的设备特性、屏幕尺寸和用户交互方式，因此需要针对不同的平台进行适配和优化
1：设备特性：
PC 端通常具有更高的处理能力、更大的屏幕尺寸和键盘鼠标等外部输入设备，而移动端设备则具有较小的屏幕、触摸屏幕和移动性等特点，这些设备特性对应用程序的设计和功能有着直接的影响，需要针对不同的设备特性进行优化和适配
2：屏幕尺寸：
PC 端的屏幕通常较大，显示内容的布局和排版可以更自由地进行设计，而移动端的屏幕较小，需要更关注内容的可读性和排版的紧凑性，因此，需要根据不同的屏幕尺寸调整页面布局和响应式设计，以便在各种设备上提供良好的用户体验
3：用户交互方式：
PC 端用户通常使用键盘和鼠标进行交互，而移动端用户主要通过触摸屏幕进行操作，这两种交互方式在操作习惯和用户界面设计上有着差异，需要根据不同的交互方式来设计用户界面和交互逻辑，以提供更符合用户习惯的体验
通过将 PC 端和移动端进行区分，开发者可以更好地适应不同设备的特性和用户需求，提供更好的用户体验。这也是为什么在开发网站、应用程序和移动应用时需要考虑到 PC 端和移动端的区别，并进行相应的说明和适配的原因
而为什么叫做pc端，以及为什么叫做移动端，说明如下：
"PC 端"一词中的"PC"代表"Personal Computer"（个人电脑），它最初是指能够执行通用计算任务的台式电脑或笔记本电脑，在计算机发展的早期阶段，个人电脑是人们主要用于工作和娱乐的设备，它们通常采用桌面式或便携式的形式，因此，这些设备被称为"PC"
而"移动端"一词中的"移动"指的是移动设备，即能够携带和移动的电子设备，如智能手机、平板电脑和便携式游戏机等，移动设备通常具有较小的尺寸和轻便的特点，使用户能够在不受地理位置限制的情况下使用它们，这些设备因其便携性和无线连接功能而被称为"移动"设备
随着技术的进步和智能手机的普及，越来越多的人开始使用移动设备进行上网、娱乐和日常任务，为了满足不同设备的需求，开发者和设计师需要将应用程序、网站和界面进行适配和优化，以确保在不同平台上提供最佳的用户体验，因此，为了更准确地描述不同设备的特性和用途，产生了"PC 端"和"移动端"的称呼
-->


<!--后面说明的，二倍图，视口，窗口，body，html等等介绍只是一个补充，可能并不准确，大致看看即可，最后会给出一个图，来说他们的情况-->

在上面我们说明了pc端调试移动端是通过谷歌模拟器的，一般来说其他浏览器（不只是谷歌存在），也存在类似的处理：

通常在如下：

基本上所有的浏览器都在这个位置，上面可以选择尺寸（也可以选择其他的，自己看看选择即可），自己来测试吧，点击之后，他只是相当于将原来的窗口变小，还没有变成移动端的处理，所以这个时候，你需要刷新一下即可

屏幕尺寸：

指的是屏幕对角线的长度，一般用英寸来度量

一般情况下，一个设备存在分辨率，一般是宽高存在的像素，比如：

大多数情况下，他是不能改变的，而可以改变的（如我们网页布局），一般我们称为逻辑上的分辨，不可改变的，也就是你的屏幕，一般我们称为物理上的分辨（上面的显示器分辨率可以调整，但是不能大于物理上的，如果强行改变，可能会出现某些问题（某个地方黑，或者操作系统出现问题报错，然后可能关机变回原样，或者自动设置回原样），所以选项上也没有对应的大的选项），上图中，缩放（可以缩小和放大的总称）为150%，代表原来的三个格子占满屏幕，变成了2个格子占满屏幕，当然这在显示时是变大的（总体变小了），具体可以参照浏览器的放大和缩小（ctrl+滚轮），但是并不影响屏幕，所以一般指逻辑上的分辨

某些逻辑上的分辨是处于滑动的，如浏览器的滑动，这个时候是可以大于总分辨率的，因为他并没有真的大于物理的分辨，只是可以通过滑动来处理而已

一般主流的如下：

红色的框框，框上的一般代表主流的设计目标（我们这里按照他来说明），其中他也存在逻辑分辨率，一般我们会根据逻辑分辨率来操作的（在前面谷歌模拟器设置时，选择其他的，找到这个，选择后，可以看到，其上面显示的分辨率就是这个逻辑分辨），他明显相当于我们缩放了50%（一般我们默认缩放是进行放大的，虽然他有缩小和放大的总体意思的说明，或者分开说明），这时就会有一个问题，既然物理分辨率（分辨率也可以称为像素）是固定的，那么显示一个字需要的分辨率他是否也有起始呢，或者说，一个字的最小分辨是多少，一般情况下，字的分辨也会存在最小的，所以一般情况下，物理分辨率与字体最小大小也会有关系，你将缩放变成100%，那个就是最小的字体大小了，所以分辨率也会影响字体的最小大小，具体多大，需要看电脑的型号以及其物理分辨率了（当然，可能还包括其他的因素），这里可以选择百度查看

关于分辨率的问题，在后面的说明中，是非常模糊不定的，如果需要好的理解，那么建议直接跳过，全局搜索"当然，说明是较难以理解，并且，说明也并不严谨"即可，从这里开始就行了

一般情况下，我们都会参考逻辑分辨率来写网页（一般逻辑分辨不会超过物理分辨，因为也超过不了），这是保证为了确保网页在不同设备上的显示效果一致，并实现响应式布局，同样的设计时也会给出二倍关系信息，来使得提高观察分辨

逻辑分辨率是设计师或开发者在创建网页时所使用的参考分辨率，通过以逻辑分辨率为基准进行设计和开发，可以更好地控制和规划网页的布局、字体大小、图像尺寸等元素

使用逻辑分辨率的好处之一是可以实现响应式设计，响应式设计可以根据不同设备的屏幕尺寸和分辨率，调整网页的布局和元素大小，以便在各种设备上都能提供最佳的用户体验，通过设计师在逻辑分辨率下的工作，可以确保网页在不同分辨率下仍然保持一致的布局和设计风格（因为逻辑分辨率一般是这个型号的统一处理，虽然我们一般会根据百分比来进行满足物理，但是不同型号的倍数可能不同（比如上面图中的第一个和第二个就是逻辑分辨相同但是倍数不同），导致显示可能会比较的模糊，在后面说明二倍图时会提到，虽然对应的地方说明的是二倍），这是主要的作用

另外，逻辑分辨率也有助于简化开发流程，通过使用相对单位（例如百分比、em、rem等），而不是固定像素值，可以使网页元素相对于逻辑分辨率进行自适应调整，这样，当网页在不同分辨率的设备上显示时，元素的大小和布局会相应调整，以适应不同的屏幕尺寸

总而言之，参考逻辑分辨率可以帮助设计师和开发者创建适应不同设备和分辨率的响应式网页，并确保网页在各种设备上都能提供一致的用户体验

大多数情况下，由于电脑屏幕是比较大的，所以宽度（高度一般看内容，所以我们并不考虑）我们一般会操作版心（前面说明项目时的那种），而手机屏幕通常使用100%来处理

我们看这个代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
  <title>Document</title>


</head>

<body>

  <!--
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 是一个用于设置移动设备视口（viewport）的 <meta> 元素

name="viewport"：这个属性指定了将要定义的视口设置
content="width=device-width, initial-scale=1.0"：这个属性值指定了视口的设置值，具体包含两个参数：
width=device-width：表示视口的宽度应该等于设备的宽度，也就是将网页宽度设置为与设备屏幕宽度一致，确保网页在移动设备上能够适应屏幕大小（前面的1vw就类似于这样）
initial-scale=1.0：表示初始缩放比例为 1.0，即默认缩放级别为正常大小，不进行缩放（如果是0.5，那么代表缩小50%，这里要怎么解释呢，实际上很简单，你随便进入一个浏览器，按照ctrl+滚轮，可以发现缩放的操作，如在谷歌浏览器这样操作，那么会出现对应的缩放的比例的显示（右上角），具体自己测试吧，如果是50%，那么就是0.5咯）
这里是对设备进行操作的，比如手机，对与浏览器一般不操作，所以删掉也没有问题，当然，浏览器也可以模拟手机，在检查元素的左边就有一个手机的标志，我们点击即可
-->
</body>

</html>


<!--后面的<meta name="viewport" content="width=device-width, initial-scale=1.0" />代码记得写上，这里只是测试一下而已-->

由此可以得出，视口相当于跟随显示部分来进行处理的（前提是进行了设置），所以在前面浏览器操作设置1vw时，改变窗口对应的也会改变，而对于手机来说，显示的是当前手机的屏幕，由于我们是按照逻辑分辨来处理的，所以自然的在有视口操作时，会进行改变，没有就不会（说明的是设置，不用搞错了），上面是删除的，所以你可以选择看看再手机（模拟的）上，默认没有视口设置时是多少分辨（像素，一般是980），当然，视口一般影响的是像素，由于浏览器的body的宽与显示窗口对应，所以默认的处理在body中还是按照窗口的，也相当于body了，我们可以认为其视口默认是100%，由于这时候视口基本固定（100%固定），所以也就导致视口默认为一开始的窗口大小（这也是为什么前面需要设置1vw的原因，需要让他进行改变，而不是固定，这里考虑到div在随着显示窗口而不会改变就明白了（因为他一开始就是按照起始的100%视口的，即对应的html占满的情况，这里可能有点不好解释，你就将div中设置px，或者vw的情况理解就行，px就是100%，在没有改变当前物理分辨时，你的显示窗口无论怎么变化，他的显示也不好变化，他是固定的），而移动端会导致显示问题，也就是操作了视口（在移动端又何尝不是操作了一开始的100%呢，所以这个问题移动端和pc是一样的，即div是不变的，即pc和移动端的处理在视口方面是一样的，只是对默认的处理是不同的）），而不是与移动端一样的存在具体的数字（如980），简单来说，视口基本操作移动端的，所以这里我们就以移动端为主

综上所述：

视口作用与浏览器时（pc端），默认100%（无论是否设置，且是一开始的，需要改变一般需要1vw，这个移动端一般也是如此），并且其分辨率固定

视口作用与移动端，没有设置时，默认一般是980，否则就是移动端的逻辑分辨率

简单来说，视口就是显示的变化的分辨率（可以认为是窗口，是显示窗口，一般显示窗口才是我们真正显示的地方，否则url的那一行（块）或者检查的那里面的显示，你认为算html吗，即窗口包含多种显示窗口，如html，检查，url等等，我们主要说明html的处理），在一个小的显示的地方，占满指定的像素的意思，如果说逻辑分辨是物理分辨的改变，那么视口就是逻辑分辨的上层固定，你可以将物理分辨当成视口，这个时候看逻辑分辨就相当于是内容了

body：该页面下的窗口内容（显示窗口，不考虑高度的情况，而其他说明显示窗口的基本都是高度也进行考虑的，统称为显示窗口），可以被其他小窗口挤压

窗口：整个窗口，可以最小化，和最大化的这个，宽与body是互相联系的，所以可以认为，body就是窗口（虽然存在其高（如url那里），并且body一般也是块，所以说成这样也是可以的）

html：隐藏的很多地方，一般由内容造成很多（虽然他的设置一般也是窗口的大小，但是他的设置未必一定代表他（html的可能的特有情况），导致继承时或者使用时，并非他真实的值，只是设置的值），那么我们移动body就行

视口：一般代表像素的分部，在浏览器上由于100%的原因，基本与窗口一致（基本只是显示的窗口，但是一般是指html的显示，按照html的宽来对照，如果关于视口说明显示窗口时，一般说明的就是html，而不是body），可以认为存在两种处理，即像素变化和窗口变成，相当于是一个操作了像素的视口，前面的1vw就是参照了视口的像素变化，否则一般是没有的

二倍图（一般基本都是二倍关系，虽然也存在多倍，考虑变小的可能，进行清晰）：

前面我们知道了比例关系（在图中可以看到），那么他为什么这么显示，或者说作用是什么，实际上逻辑分辨是保证统一，而不会出现问题，那么比例就是保证显示在指定机型的处理，一般情况下，不同的机型需要不同的比例，那么在页面中，可能需要指定这种处理，来保证页面显示在对应的机型中，虽然一般情况下，我们可能设置100%来满足所有机型的情况，但是在放大时通常可能会出现模糊，模糊是因为你放大后，图元素被多个元素填充，这在视觉上可能并没有那么清晰（一个像素是会比四个像素组成的看起来的一个像素要清晰的），所以寻常的二倍图一般并不是放大原来的图，而是按照像素分布完整的给一个清晰度（所在格子是一样的），并且还是二倍关系，所以二倍图无论缩小是必然提供清晰度的，简单来说，二倍图是一种技术，而不是思想，是将原来的图二倍原清晰的处理的技术，即在满足比例的情况下，使用二倍图可以消除清晰带来的问题（直接满足二倍）

在上面提到，一个像素是会比四个像素组成的看起来的一个像素要清晰的，换句话说，一个像素代表一个格子比四个像素代表一个格子更清晰，为什么：

当一个像素代表一个格子时，每个像素都被用来显示一个单独的颜色或图像信息，因此可以实现更高的图像细节和清晰度

而当四个像素代表一个格子时，即所谓的像素均化或像素合并，四个相邻的像素被组合在一起来显示一个单一的颜色或图像信息，这种像素均化技术通常用于降低图像或文本在屏幕上的分辨率，以减少图像处理或文本渲染的工作量，从而提高性能

尽管像素均化可以在某些情况下提供较好的性能，但它可能会导致图像或文本的细节损失和模糊效果，因此，如果清晰度是首要考虑因素，使用一个像素代表一个格子的方式更适合，而正是因为需要结合这些像素，必然需要损耗一些东西，这就是清晰降低的根本原因

所以在我们按照逻辑分辨进行设计时，要回到原来的机型（由于机型非常多，就统一逻辑，而不是我们选择一个，导致其他的不好统一（比例基本不会为整数），这也是逻辑分辨出现的原因），以图为例，需要根据比例进行放大，那么这个放大图片会导致图像失真和不清晰，当你放大一张图片时，每个像素都会变得更大，因为相同的像素要填充更多的空间（相当于多个像素代表一个格子了），这会导致图像变得模糊或像素化，因为原始图像中的细节无法在放大过程中得到保留

当然，一般情况下，我们也可以不会将设置100%来满足，因为对元素来说，我们进行设计时，一般会在前面说明的工具中PxCook中进行处理，我们可以选择放大（一般他里面有倍数关系，虽然可能是反过来的比例），然后根据放大的进行设计样式（虽然大多数我们并不这样，因为图片是固定的，而非不清晰的，这里需要结合百分比（布局）来操作的），这样就不会操作100%，使得可能出现问题了，当然，有些样式会操作的，所以这个100%一般指某些样式来说的，当我们在逻辑分辨处理完毕后，根据机型进行倍数处理，然后可以开始根据这些设计写页面代码了

百分比布局：

在前面我们可能使用百分比使用的比较少，但是并不意味着没有使用，百分比在于视口变小（视口的大小一般是像素的分部）或者窗口变小（窗口一般才是百分比操作的对象）时发生的改变，或者说当前显示的地方的变化而进行变化，说成body也是可行的

百分比布局，也叫流式布局，效果：宽度自适应，高度固定

当然，无论怎么设计还是布局，只要完成任务即可，或者，你认为自己的方式方便，那么就使用自己的方式，而并非必须使用上面说明的流程

现在可以给出一个百分比布局的例子：

首先给出对应的图片，下载地址如下：

链接：https://pan.baidu.com/s/1C2B__EYa7bObwsz2XzfqwQ

提取码：alsk

<style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .toolbar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px; /*由于高度是固定值，那么后面只要有设置高度的，那么基本都是固定的*/
      background-color: pink;
      border-top: 1px solid #ccc;
    }

    .toolbar li img {
      height: 100%;
      /*
      在给元素设置宽高时，百分比值是相对于其父元素的对应属性进行计算的，这里是高度
      如果父元素的高度没有明确指定，或者没有设置一个固定的高度
      那么它的高度会被浏览器默认撑开以适应其内容
      */
    }

    .toolbar li {
      float: left;
      width: 20%;
      height: 50px;
    }

    .b {
      width: 100%;
      height: 100px;
      background-color: red;
    }

    .b img {
      width: 50%;
    }
  </style>

  <div class="b">
    <img src="./images/index.png">
  </div>
  <div class="toolbar">
    <ul>
      <li>
        <a href="#"><img src="./images/index.png"></a>
      </li>
      <li>
        <a href="#"><img src="./images/classify.png"></a>
      </li>
      <li>
        <a href="#"><img src="./images/jd.png"></a>
      </li>
      <li>
        <a href="#"><img src="./images/car.png"></a>
      </li>
      <li>
        <a href="#"><img src="./images/login.png"></a>
      </li>
    </ul>
  </div>

上面也就只有加上的.b存在随着显示窗口的改变而改变，使得图片可大可小，这是因为他处理是不是固定值，当然，视口整体像素变化并没有改变，因为这里是随着窗口改变的，而视口是改变单独的像素，这里参照之前的1vw即可，我们认为视口一开始不变即可（在浏览器上，或者移动端的改变窗口中使用类似的1vw可能会导致显示区域发生改变，即视口改变，看起来手机屏幕和浏览器一开始或者电脑屏幕是同等的）

当然，说明视口和窗口的区别还是很困难，现在我们给出一个图来说明这种情况：

对于浏览器来说：

对应的起始视口是由于浏览器第一次的左边的显示窗口是窗口的大小，所以这样的指向，否则对应视口是对应的显示窗口，这里要注意，所以同样的，视口在移动端也是显示窗口，并且也有额外注意：视口只是改变单独像素的变化，这里只需要参照之前的1vw的操作即可

当然，上面的了解即可，其中对二倍图的理解也只是在适应层面，实际上一开始的二倍就是非常高的分辨了，这个时候，无论你是根据逻辑，还是根据逻辑进行其他的比例，都可以基本满足任意机型，但是也由于是固定的，所以导致更大的屏幕并不能解决，这个时候就需要其他技术了，这里了解即可，具体可以百度

Flex布局：

首先我们回顾浮动的影响：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* height: 200px; */
      border: 1px solid #000;
        /* overflow: hidden; 可以加上这个来解决浮动问题 */
    }

    .box div {
      float: left;
      margin: 10px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="box">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

即没有高度关联，虽然我们也可以通过overflow: hidden;，但是有没有更好的办法呢，而不是每次进行手动的处理呢，实际上是有的，也就是Flex布局（他一般是主流的处理了（可以选择性的替代浮动，当然，需要是可以替代的地方，因为浮动是部分，而他是整体，操作形式并不相同，所以某些情况下他们可能并不能替代，就如浮动第一个的向右浮动，而flex基本都是第一个从左开始，虽然flex可以也是右开始，但是一般他是反方向的右浮动（所以一般是不同的），即flex部分不包含浮动，所以他是主流的），建议后面的代码，都去操作一下移动端来测试测试，一般我们也可以发现，浏览器的显示窗口与对应的窗口是类似的，只是其中一个是浏览器显示窗口，另外一个是手机的屏幕，即同等的）：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
        /*另外一种排版，会使得内部元素并不按照自身排列排版，在部分或者默认的排版中，一般类似于左浮动*/
      display: flex;
      justify-content: space-between; /*在当前父元素中，有间隔的分离子元素（尽量先靠近左边以及右边，所以当只有两个时，是左右的最左和最右边），这里可以再加上一个<div>1</div>，就可以明白了*/
        /*上面加上这两个就能解决之前添加的多个属性造成的影响了，既然浮动，清除浮动，和margin，虽然第二个可以使用margin来替换，但这个时候记得放入在div的样式中，flex的排版相当于子元素操作了浮动，并且自身清除浮动的排列方式，但并没有设置对应属性造成的，而是设置基础代码或者某些一样以及或者类似的操作造成的，即与浮动操作同样或者基本类似的基础代码*/
        
      height: 200px;
      border: 1px solid #000;
    }

    .box div {

      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="box">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

<!--一般来说，flex布局会让自身子元素变成块级别，即盒子会自动（其里面的一个等级，而不会操作子的子，大多数的对子的操作都是如此）设置成块级别（block），这里了解即可，可以自己测试看看-->

Flex布局一般也称弹性布局（它被称为"弹性"是因为它允许容器内的项目具有弹性的伸缩性，可以根据可用空间进行自动调整，如上面的justify-content: space-between;属性，就可以无论你的子元素变多还是变少，都会使得他们之间的距离始终一样，当然，可能存在上限和下限，但是一般没有，具体看这个属性如何发展了），是一种浏览器提倡的布局模型（即对浏览器更加友好，且渲染一般更快），布局网页更简单、灵活，且基本避免了浮动脱标的问题，但是他作用的范围一般只是儿子，而非孙子（大多数父元素的说明都只是儿子，而非孙子，如果存在孙子，一般会进行说明，但是也可能避免不了遗漏（如前面的preserve-3d，可以选择测试看看是否说明错误），所以最好自己经过测试后进行处理），也就是说，在子元素的div中的子元素并没有避免浮动脱标的情况，但是还需要注意一个问题，flex是比较新的技术，那么在一些低版本的浏览器（移动端一般都是新的，所以不考虑，虽然可能也存在，但是较少），可能并不会识别这个flex，那么怎么查看对flex的兼容的浏览器版本呢，我们访问这个网站：https://caniuse.com/?search=flex或者https://caniuse.com/

所以我们需要注意：即flex只是操作父子关系的

输入flex：

往下面翻：

一般来说，红色的框框代表该CSS 属性在该浏览器版本中的支持程度较差或不支持，我们很明显，flex尽量需要高的浏览器版本（绿色的）

对应的父元素我们一般会称为弹性容器，而其对应的子元素我们会称为弹性盒子

在上图中，我们来说明他为什么可以与浮动操作同样或者基本类似的基础代码

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /*
加上了display: flex;，说明：弹性盒子都是沿着主轴排列，并且主轴在水平，所以看起来与浮动一样的在水平排列了
要知道这是一种排列方式，与各种定位操作改变排列的方式是类似的
所以基础代码也并非完全一样，除非是到操作系统的开关层面
        */
      display: flex;
      height: 200px;
      border: 1px solid #000;
    }

    .box div {

      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="box">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

一般来说，网页中盒子之间是存在距离的，即在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

修改主轴对齐方式属性：justify-content（一般加在容器中，使得容器有这样的特性），在前面我们就操作了justify-content: space-between;，所以这里就不给出对应的案例了

其中flex-end，相当于反方向右浮动，可以看到第一个1（可以设置其他的数来观察）还是在左边

其中justify-content: space-around; 代表一个盒子存在左右的距离，所以看起来盒子和容器之间的距离比盒子之间的距离小，这是因为盒子之间的距离由盒子左和右的距离相加得到的结果，所以看起来盒子之间的距离是盒子与容器之间距离的两倍关系

这里还需要注意一下：大多数默认值，在计算样式中可能并不会直接的显示出来，而是以normal作为值的显示，但并非他没有操作默认值，或者说，他内部就是他作为默认值，以及作为默认值的开关而已

我们前面使用过justify-content: space-between;，正好是间距在盒子之间，所以导致最左和最右（因为只是盒子之间，而不是盒子与容器之间，自然一开始会从最左边紧挨着，然后到右边开始（这个到右边是一个规定，从紧挨着开始））

侧轴对齐方式：

flex包含了主轴和侧轴，他们都有默认的处理，前面我们操作了主轴，自然也会给出侧轴的处理

使用align-items调节元素在侧轴的对齐方式，但是他需要如下的操作：

修改侧轴（也就是在前面图中的交叉轴）对齐方式属性:

1：align-items（添加到弹性容器）

2：align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

即存在两步，一般有如下的操作属性：

这里也给出一个案例吧：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      align-items: center;
      /*在垂直上的中间，具体可以测试一下，与之前的justify-content:center;是类似的，只是他代表水平而已，而不是垂直*/
      height: 200px;
      /* justify-content:center;，可以加上，来综合使用 */
      /*还存在一个属性*/
      align-items: stretch;
      /*
      前提是盒子没有高度，否则就不会操作了，他也是默认值，所以可以不加，注意：他一般只是操作背景，如果内容超过了，那么不会进行变化，要不然里面的内容岂不是被拉伸了，自己看看2，4，1这三个内容是否被拉伸就知道了
      但是，如果加上了其他的属性，如align-items: center;，那么这个时候还是需要加上了，因为其他的属性或多或少会进行忽略，使得默认的值被覆盖，一般会使得变成与内容一样的高度了
      所以这个时候，我们要反向的覆盖，将优化或者说被覆盖的再被我们覆盖即可
      */
      border: 1px solid #000;
    }

    .box div {

      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="box">
    <div>2</div>
    <div>4</div>
    <div>1</div>
  </div>

现在我们来操作第二个案例：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      height: 200px;

      border: 1px solid #000;
    }

    .box div {

      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .box div:nth-child(2) {
      align-self: center;
      /*给盒子（不是容器，或者说是弹性盒子，不是弹性容器）操作的
        同样的，设置了这个，也就相当于加上了之前的align-items: center;的部分操作，这个部分在于覆盖前面的默认属性，使得安装内容处理，即：
        "但是，如果加上了其他的属性，如align-items: center;，那么这个时候还是需要加上了，因为其他的属性或多或少会进行忽略，使得默认的值被覆盖，一般会使得变成与内容一样的高度了"
        很明显，覆盖的是子元素的操作，只是上面的align-items: center;由于继承，导致也覆盖了
        */
    }
  </style>
  <div class="box">
    <div>2</div>
    <div>4</div>
    <div>1</div>
  </div>

当然高度存在默认铺满的效果，但是宽度一般是没有的，要不然为什么上面说明高度呢，这是因为宽度在项目中，通常是根据内容来处理的，而高度通常需要我们自己进行调试，这是一种大多数情况的处理，当然，你也可以进行处理宽度（要不然width属性为什么可以设置），这只是大多数处理方式而已，所以大多数的样式都是宽由内容处理，高度由样式处理（只是大多数哦，并不是全部，因为width就可以设置）

但是布局是伸缩的，宽度自然也会这样，那么有什么例子可以证明宽度也是伸缩的，看如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 968px)" href="./a.css">
</head>

<body>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        .box {
          display: flex;
          height: 300px;
          border: 1px solid #000;
        }

        .a{
            width: 100px;
            background-color: red;
        }

    
     
      </style>
      <div class="box">
        <div class="a">1</div>
        <div class="b">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>

      </div>
</body>

</html>

当另外一个内容足够多，导致其撑开的时候，由于并不能保留，所以会导致左边的进行挤压，导致宽不是100px了，如果这个时候还进行了增加，那么就增加滚动符号，可惜的是，这个布局由于太过正式，导致其边框，并不能随着滚动进行移动，而是固定为满的状态，那么有什么情况可以解决增加了（内容）值的问题呢，看如下：

使用flex属性修改弹性盒子伸缩比：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      height: 200px;
      /* margin: 0 20px;，这里可以加上看看后面的结果是否减去了外边距，一般是处理的，并且他操作的边距与普通标准是一样的，即不像静态，绝对等等的自身移动，浮动因为宽存在，所以与标准是一样的*/
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 50px;

    }

    .box div:nth-child(2) {
      /*
      这个1代表将该容器里面的其他的盒子宽由总容器宽进行减去的一倍，也就是说
      假设有三个元素，分部是a，b，c，其中a占用100px，b占用150px，c占用200px，总共有1000px，当c设置了这个flex:1时
      那么c占用的是（1000-100-150）*1=750.如果是flex:2，那么还是750，当然，如果还存在外边距，那么还要减去他们外边距的px（包括自身），即整个盒子占用的宽
        也就是说这个数值代表着比例，即剩下的比例，如果有固定宽度，那么先减去固定的宽，然后在剩下的里面选择比例，如果只有你一个人设置，那么默认是100%，否则如果你设置了1，他设置了3，那么你占用剩下的四分之一，他占用四分之三，一般来说，flex的优先级大于其对应的宽度，所以你设置了宽度，所操作的还是flex，这里可以认为flex是在底层相对最后处理的（解决了上面的增加值导致的挤压问题了）
      */
      flex: 1; /*因为倍数的关系，差不多是改变了该盒子的伸缩，而不只是只由容器来决定（并不是改变位置：align-self，改变位置，不是伸缩的意思）*/
    }
  </style>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

当然，有多个元素设置了flex，那么将他们加起来，进行划分，比如b为2，c为1，那么b占用剩余的2份，c占用剩余的1份

现在我们来写一个项目（主要操作模拟手机的，也可以看看pc端的），首先需要创建如下文件夹和文件：

其中css存放样式的，images存放平常的图片，uploads存放不固定图片（比如头像，即经常更换的），index.html首页，当然，这里可以写成orders.html，lib一般存放一些框架的文件，即css，js等等的代码结合，比如以后的（移动）web框架bootstrap，还有前面操作的字体图标样式，或者vue等等，其中css中也创建了两个文件，分别是base.css基础样式（如去除某些默认的样式）

和index.html当前对应的页面样式index.css，虽然这里代表首页，但如果你写成order.html，那么这里也是order.css，这个时候就不是首页了，这里建议将上面的index修改成order.html，我们就不操作对应的index名称了，当然，你也可以不修改（只是一个名称而已，并没有特别说明的）

其中这里给出一个文件夹，请将它放在lib文件夹里面，这个给出的文件夹是字体图标（前面我们已经操作过了）：

链接：https://pan.baidu.com/s/1uDYkp8OtizHGBRw1P5xxVA

提取码：alsk

这里就不给出psd文件了，前面有说明理由，并且后面是一步步操作的，所以在过程中给出的都是部分代码，如果部分有问题，可以到该项目最后看看整个代码（会给完整的代码的）

编写index.xml内容（不修改了）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--主体内容：滑动查看-->
    <div class="main">1</div>
    <!--主体内容：滑动查看-->


    <!--底部支付，固定定位-->
    <div class="pay">2</div>
    <!--底部支付，固定定位-->
</body>

</html>

然后到index.css中加上如下：

body {
    background-color: #f7f7f8;
}

/*主体内容*/
.main {
    padding: 12px 11px 80px;
}

/*主体内容*/

/*底部支付*/
.pay {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background-color: pink;
    border-top: 1px solid #ededed;
}

/*底部支付*/

现在我们才真正的开始编写：

现在我们继续补充index.css：

/*底部支付*/
.pay {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 11px;
    background-color: pink;
    border-top: 1px solid #ededed;
}

/*底部支付*/

补充index.html：

<!--底部支付，固定定位-->
    <div class="pay">
        <div class="left">1</div>
        <div class="right">2</div>
    </div>
    <!--底部支付，固定定位-->

然后再base.css中加上如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #5eb69c;
}
img {
  width: 100%;
  vertical-align: middle;
}
input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}

执行后，看看1和2是否出现即可，若没有加上box-sizing，那么由于没有内减（整体变的更加宽了），那么一般会导致右边超过边界，可能2就不会显示出来了

我们继续补充index.html，现在的总的index.html是：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>确认订单</title>
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!--主体内容：滑动查看-->
  <div class="main">1</div>
  <!--主体内容：滑动查看-->


  <!--底部支付，固定定位-->
  <div class="pay">
    <div class="left">
      合计：<span class="red">￥<i>266.00</i></span>
    </div>
    <div class="right">
      <a href="#">去支付</a>
    </div>
  </div>
  <!--底部支付，固定定位-->
</body>

</html>

补充部分index.css，现在的总的index.css是：

body {
    background-color: #f7f7f8;
}

/*公共样式*/
.red {
    color: #cf4444;
}

/*主体内容*/
.main {
    padding: 12px 11px 80px;
}

/*主体内容*/

/*底部支付*/
.pay {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;

    width: 100%;
    height: 80px;

    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}

.pay .left {
    font-size: 12px;

}

.pay .left i {
    font-size: 20px;
}

.pay .right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    color: #fff;
}

/*底部支付*/

现在的对应的base.css总的是：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}

li {
  list-style: none;
}

em,
i {
  font-style: normal;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #5eb69c;
}

img {
  width: 100%;
  vertical-align: middle;
}

input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}

button {
  cursor: pointer;
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

/*
这里需要提一下，如果是老版本，那么他可能操作不了::after或::before，所以有时候我们可能需要建议解决这种情况，那么需要加上如下：
.clearfix {
  *zoom:1;
}
与上面的清除浮动是一样的效果，或者就是相同的效果，即：
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

当然，由于随着时间的推移，老版本基本不存在了，所以建议并不要写上这个，虽然写上也没有问题，但是报错的出现是有点不好的
*/

现在我们继续再index.css中补充如下：

.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

在这里说明一下，对于宽高来说，一般建议大小为偶数，因为大多数有取一半的操作方式，这种情况对于奇数来说是不友好的，可能会出现某些误差，因为存在最小渲染像素的（这里了解即可）

然后再index.html中加上如下：

  <div class="main">
    <!--用户信息-->
    <div class="pannel user_msg">1</div>
    <!--用户信息-->
  </div>

继续再补充或者修改：

 <!--用户信息-->
    <div class="pannel user_msg">
      <div class="location">
        <i class="iconfont icon-location"></i>
      </div>
      <div class="user">2</div>
      <div class="more">
        <i class="iconfont icon-more"></i>
      </div>
    </div>
    <!--用户信息-->

对应的css：

.user_msg{
    align-items: center;
    display: flex;
    padding: 15px 0 15px 11px;
}

.user_msg .location{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg,
    #6fc2aa 5%,
    #54b196 100%
    );
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.user_msg .user{
    flex: 1;
}

.user_msg .more{
    width: 44px;
    height: 44px;
    background-color: pink;
    text-align: center;
    line-height: 44px;
    color: #808080;
}

补充index.html（从现在开始，后面我就不给出很全的代码了，注意看class即可）：

<div class="user">
        <div class="top">
          <h5>林丽</h5><!--一般单纯的字体，与h3有点类似的大小，虽然没有加粗，如果加粗后，那么可能是一样的（可能h3大或者下，具体看浏览器如何处理，即看版本，一般h3大点）-->
          <!--大多数距离的操作都后于排版，所以像什么flex，或者浮动，都是先排列后，才进行距离的操作的-->
          <p>16728382838</p>
        </div>
        <div class="bottom">北京市 海淀区 中关存软件园 信息科技大厦1号 楼410#
        </div>
      </div>

补充index.css：

.user_msg .user {
    flex: 1;
}

.user_msg .user .top {
    display: flex;
}

.user_msg .user .top h5 {
    width: 55px;
}

.user_msg .user .bottom {
    margin-top: 5px;
    font-size: 12px;
}

现在我们大致写好了一个大div了，现在我们继续写：

但是在这之前，首先需要从下面的地址下载图片，然后放到项目的uploads文件夹里面：

链接：https://pan.baidu.com/s/1afoVtdQdy0HCqoqVkJWN2A

提取码：alsk

在index.html中的用户信息同级的情况下，在他的下面写上如下：

  <!--商品-->
    <div class="pannel goods">
      <div class="pic">
        <a href="#"><img src="./uploads/pic.png"></a>
      </div>
      <div class="info">
        <h5>康尔贝 非接触式红外体温仪
          领卷立减30元 婴儿级材质 测温...</h5>
        <p>
          <span>粉色</span><span>红外体温计</span>
        </p>
        <div class="price">
          <span class="red">￥<i>266</i> </span>
          <span>￥299</span>
        </div>
      </div>
      <div class="count">
        <i class="iconfont icon-x"></i>
        <span>1</span>
      </div>
    </div>
    <!--商品-->

对应的css是：

/*商品*/
/*padding自然是会增大元素的*/
.goods {
    display: flex;
    padding: 11px 0 11px 11px;
}

.goods .pic {
    /*base存在给图片宽操作100%，所以设置父级会改变图的*/
    width: 85px;
    height: 85px;
    margin-right: 10px;
}

.goods .info {
    flex: 1;
}


.goods .info h5 {
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}

.goods .info p {
    width: 95px;
    height: 20px;
    margin: 5px 0;
    background-color: #f7f7f8;
    font-size: 12px;
    color: #888;
}

.goods .info p span:first-child {
    margin-right: 5px;
}

.goods .info .price {
    font-size: 12px;
}

.goods .info .price i {
    font-size: 16px;
}

.goods .info .price span:last-child {
    margin-left: 5px;
    color: #999;
    text-decoration: line-through;
}

.goods .info p span:last-child {
    margin-left: 5px;
    color: #999;
}

.goods .count {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
}

我们继续在与商品同级的情况下，在其下面写上如下：

<!--其他信息-->
    <section class="pannel rest">
      <div>
        <h5>配送方式</h5>
        <p>顺丰快递</p>
      </div>
      <div>
        <h5>买家备注</h5>
        <p>顺丰快递</p>
      </div>
      <div>
        <h5>支付方式</h5>
        <p>支付宝<i class="iconfont icon-more"></i></p>
      </div>
    </section>
    <!--其他信息-->

对应的css：

/*其他信息*/
.rest {
    padding: 15px;
}
.rest div{
    display: flex;
    margin-bottom:30px;
}
.rest div:nth-child(2n+1){
    justify-content: space-between;
}
.rest div:nth-child(2) h5{
    margin-right: 20px;
}

.rest h5,.rest p{
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}
.rest div:nth-child(2) p{
    font-size: 12px;
    color: #989898;
}
.rest div:last-child{
    margin-bottom: 0;
}
.rest div:last-child p{
    display: flex;
}

我们可以继续补充，在该其他信息中，复制下来继续写一个类似的：

  <section class="pannel rest1">
      <div>
        <h5>商品总价</h5>
        <p>￥299.00</p>
      </div>
      <div>
        <h5>运费</h5>
        <p>￥<i>0.00</i></p>
      </div>
      <div>
        <h5>折扣</h5>
        <p>-<span class="red">￥<i>30.00</i></span></p>
      </div>
    </section>

对应的css：

.rest1 {
    padding: 15px;
}
.rest1 div{
    display: flex;
    margin-bottom:30px;
}
.rest1 div{
    justify-content: space-between;
}

.rest1 h5,.rest p{
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}
.rest1 div:last-child{
    margin-bottom: 0;
}

至此，我们大致操作完毕了

前面我们学习了主轴和侧轴排列的一些操作，其实我们还可以存在如下：

使用flex-direction改变元素排列方向：

在主轴默认是水平排列的，那么如何垂直排列呢，使用侧轴，但是这里我们需要让主轴也这样，所以我们需要flex-direction属性来操作，或者说，主轴和侧轴的本质就是操作flex-direction来使得水平排列以及垂直排列的

现在先从这个地址下载图片：

链接：https://pan.baidu.com/s/17E8tedozThB53lBhcceT2w

提取码：alsk

写上如下的代码：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .box li {
      display: flex;
      width: 80px;
      height: 80px;
      border: 1px solid #ccc;
    }

    .box img {
      width: 32px;
      height: 32px;
    }
  </style>
  <div class="box">
    <ul>
      <li>
        <img src="images/media.png" alt="">
        <span>媒体</span>
      </li>
    </ul>

  </div>

由于类似于浮动，所以其实他flex也不会考虑基线

一般修改主轴方向的属性值有如下：

我们回到之前的代码，修改对应的css，由于是操作主轴的，所以在对应的父元素中进行处理：

 .box li {
      display: flex;
      flex-direction: column;
      width: 80px;
      height: 80px;
      border: 1px solid #ccc;
    }

查看结果（自然是运行后的），发现的确是垂直的了，那么侧轴呢，实际上当主轴变成垂直时，侧轴会变成主轴那里，可以选择在容器上加上flex-direction: column;来看看侧重在那个中间就知道了，也就是说其实主轴和侧轴都只是对容器来说的一个方向，而该属性相当于将原来的方向进行交换而已，自然也会使得某些居中的属性也进行不同的变化（这个时候可以试一下：align-items: center;，即水平居中了，因为侧轴在水平），也可以证明主轴和侧轴的本质就是操作flex-direction来使得水平排列以及垂直排列的，你可以看成坐标轴方向就行了，左上角是原点，根据坐标轴方向来处理

这里需要注意一下一些细节，请看代码：

<style>
    .box {
      display: flex;
      justify-content: center;
      /* justify-content: space-between; */
      width: 300px;
      height: 300px;
      background-color: red;
    }

    div {
      width: 120px; /*你也可以将这个120px修改成500px或者100px来进行测试*/
      height: 50px;
      background-color: pink;
    }
  </style>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

也就是说，他是不会换行的，与浮动不同的是，浮动会由于内容的存在（宽）而进行换行，而他则会自适应进行处理（他们是不同的排列的，出现这个样子是正常的），要不怎么叫做弹性布局呢

根据上面的测试，我们知道，他并不会操作换行，那么我们要如何操作出现，我们可以操作如下：

弹性盒子换行显示：flex-wrap:wrap;

修改上面代码：

 .box {
      display: flex;
      /* justify-content: center; */
      /* justify-content: space-between; */
      flex-wrap: nowrap; /*这个是默认值，即不换行，大多数的默认值和不默认值都只是操作基础代码的方式而已*/
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      background-color: red;
    }

但是这个时候你可以发现，他在换行时也存在间隔，要解决这样的问题需要看如下：

之前我们操作过这个属性justify-content: space-between;，保证他们之间的间距，但是可以发现右边的也是贴紧边界的，我们可以试一下这个属性align-content，取值与justify-content基本相同

.box {
      display: flex;
      /* justify-content: center; */
      /* justify-content: space-between; */
      flex-wrap: wrap;
      align-content: center;
      width: 300px;
      height: 300px;
      background-color: red;
    }

可以发现到中间了，所以他代表着将内容的起始位置放在哪里，或者说，将内容如何进行换行后的处理，一般需要与flex-wrap: wrap;进行结合，所以这个时候，你可以将width: 120px;，修改成20px看看，可以发现的确到中间处理了，我们一般也会称他为调整行对齐的方式

在某种情况下，他相当于对换行后的justify-content处理，只是他默认的处理方式的边界是最后一个换行的行，也算是一个默认处理，即normal（改默认并不是justify-content的默认，他们到底还是不同的属性的）

当然，这些操作都是封装好的，或者说，是底层进行处理的结果，最后操作最原始的代码，即操作系统的开关，这里了解即可

现在我们再来完成一个项目：

首先我们创建wdxm这个文件夹，然后加上如下地址里面的内容：

链接：https://pan.baidu.com/s/1EyOWNTGmKYSsAfmsJ0zhZw

提取码：alsk

如果有些css有报错，一般可以忽略，因为css的报错通常并不会导致css整体不操作，只是报错部分不会操作而已，在html，css，js中，js是比较严谨的，其他的html和css在不违反特殊的报错的情况下，基本都会执行，这里了解即可，这是他们解释器的不同的原因

我们主要操作的就是center.html这个文件，现在开始编写，但是记得先将内容里面的删除，即：

<!-- 内容：待完成 -->
<!-- 内容 -->

这里我们主要操作pc端的，所以就不操作模拟手机了，也可以操作，即看看模拟手机的

现在我们开始写上代码，在内容里面写上：

 <!-- 内容：待完成 -->
    <div class="xtx_body">
        <div class="wrapper">
            <!--侧边栏，这样的包括起来的，同等级的，并且名称相同的，代表这些内容是他的（侧边栏），这里另外的解释，而非只看注释下面的信息，碰到同等级注释结束而已-->
            <div class="aside">
                <div class="herimg">
                    <!--随便找个图片即可，这里就不给出了-->
                    <a href="#"><img src="./images/address.png"></a>
                    <h3>张老四</h3>
                    <a href="#">黄金会员</a>
                </div>
                <ul>
                    <li>
                        <div>
                            <h3>我的账户</h3>
                            <a href="#">个人中心</a>
                            <a href="#">消息通知</a>
                            <a href="#">个人信息</a>
                            <a href="#">安全设置</a>
                            <a href="#">地址管理</a>
                            <a href="#">我的积分</a>
                            <a href="#">我的足迹</a>
                            <a href="#">邀请有礼</a>
                            <a href="#">幸运抽奖</a>
                        </div>
                    </li>
                    <li>
                        <div>
                            <h3>交易管理</h3>
                            <a href="#">我的订单</a>
                            <a href="#">优惠卷</a>
                            <a href="#">礼品卡</a>
                            <a href="#">评价晒单</a>
                            <a href="#">售后服务</a>
                        </div>
                    </li>
                    <li>
                        <div>
                            <h3>我的收藏</h3>
                            <a href="#">收藏的商品1</a>
                            <a href="#">收藏的商品2</a>
                            <a href="#">收藏的商品3</a>
                        
                        </div>
                    </li>
                    <li>
                        <div>
                            <h3>帮助中心</h3>
                            <a href="#">进入帮助心</a>
                            <a href="#">在线客服</a>
                        
                        </div>
                    </li>
                </ul>
            </div>
            <!--侧边栏-->
            <!--主体内容-->
            <div class="main">2</div>
            <!--主体内容-->

        </div>
    </div>
    <!-- 内容 -->

对应的center.css里面的内容也全部删除，然后加上如下：

.xtx_body {
    background-color: #f6f6f6;
    padding: 30px 0 85px;
}

.xtx_body .wrapper {
    display: flex;
}

/*侧边栏*/
.xtx_body .aside {
    width: 227px;
    min-height: 500px;
    /*最小高度，固定如此，如果内容撑开导致大于，那么也会进行变化，即变大（否则一直是500px，反之max-height也是如此，同样的也包括宽，也是min以及max），而不是固定，这里需要特别的注意*/
    margin-right: 18px;

}

.xtx_body .aside .herimg {
    width: 100%;
    height: 275px;
    background-color: #ffffff;


}

.xtx_body .aside .herimg a:nth-child(1) {
    display: block;
    padding: 36px 76px 14px 66px;


}

.xtx_body .aside .herimg a:nth-child(1) img {
    width: 85px;
    height: 85px;

}

.xtx_body .aside .herimg h3 {
    width: 50px;
    margin: 14px 93px 14px 83px;
}

.xtx_body .aside .herimg a:nth-of-type(2) {
    color: #f9f9f9;
    display: block;
    width: 93px;
    height: 26px;
    background-color: red;
    margin: 14px 72px 14px 62px;
    text-align: center;
    font-size: 14px;
    line-height: 26px;
    border-radius: 13px;

}

.xtx_body .aside ul li {
    margin-top: 8px;
    width: 100%;
    background-color: #ffffff;
    padding: 33px 90px 61px 52px;
}

.xtx_body .aside ul li div a {
    display: block;
    font-size: 14px;
    color: #333333;
    margin-top: 23px;
}

.xtx_body .aside ul li div a:nth-child(1) { /*这一般不会操作*/
    font-size: 28px;
    color: red;
}



/*主体内容*/
.xtx_body .main {
    flex: 1;
    min-height: 500px;
}

上面是侧边栏的大致编写，现在我们来编写一下主体内容

但是在操作之前，建议先从这个地址拿取图片：

链接：https://pan.baidu.com/s/1S-WyJNJL-dMZDoAIahmqEg

提取码：alsk

对应一下即可

在侧边栏同级的标签下，加上如下：

          <!--主体内容-->
            <div class="main">
                <!--用户账户概览-->
                <div class="overview">
                    <div>
                        <a href="#">
                            <!--如果alt=""，默认不存在时，默认图不会显示的，所以建议尽量加上，当然，你也可以选择不加上-->
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/safe.png" alt="">
                            <p>安全设置</p>
                        </a>
                        <a href="#">
                            <img src="./images/address.png" alt="">
                            <p>地址管理</p>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span>6</span>
                            <p>优惠卷</p>
                        </a>
                        <a href="#">
                            <span>70</span>
                            <p>礼品卡</p>
                        </a>
                        <a href="#">
                            <span>120</span>
                            <p>积分</p>
                        </a>
                    </div>
                </div>
                <!--用户账户概览-->

                <!--订单-->
                <div class="pannel orders">
                    <div class="pannel_title">
                        <h4>我的订单</h4>
                        <a href="#">查看更多></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg"></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖 这里是需要进行测试出现的结果</h5>
                                        <p>颜色：白色 尺码：M 数量：1</p>
                                    </div>
                                </div>
                                <div class="status">
                                    <a href="#">待付款</a>
                                </div>
                                <div class="pay common">
                                    <p>￥99.00</p>
                                    <p>（含运费：￥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_2.jpg"></a>
                                    </div>
                                    <div class="txt">
                                        <h5>李宁跑步鞋男鞋空气弧 这里是需要进行测试出现的结果</h5>
                                        <p>颜色：白色 尺码：M 数量：1</p>
                                    </div>
                                </div>
                                <div class="status">
                                    <a href="#">待收货</a>
                                    <a href="#">查看物流</a>
                                </div>
                                <div class="pay common">
                                    <p>￥199.00</p>
                                    <p>（含运费：￥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--订单-->
                <div class="pannel collect">
                    <div class="collect_title">
                        <h4>收藏的商品</h4>
                        <a href="#">查看全部></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <img src="./uploads/clothes_goods_1.jpg">
                                <p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
                                <span>￥55</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_2.jpg">
                                <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                                <span>￥20.9</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_3.jpg">
                                <p>三都港 冷冻无公害黄花鱼700g 2条 袋装 </p>
                                <span>￥209</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_4.jpg">
                                <p>ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</p>
                                <span>￥274.5</span>
                            </li>

                        </ul>

                    </div>
                </div>
                <div class="pannel collect">
                    <div class="collect_title">
                        <h4>我的足迹</h4>
                        <a href="#">查看全部></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <img src="./uploads/clothes_goods_1.jpg">
                                <p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
                                <span>￥55</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_2.jpg">
                                <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                                <span>￥20.9</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_3.jpg">
                                <p>三都港 冷冻无公害黄花鱼700g 2条 袋装 </p>
                                <span>￥209</span>
                            </li>
                            <li>
                                <img src="./uploads/clothes_goods_4.jpg">
                                <p>ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</p>
                                <span>￥274.5</span>
                            </li>

                        </ul>

                    </div>
                </div>



                

            </div>
            <!--主体内容-->

对应的css：

*主体内容*/
.xtx_body .main {
    flex: 1;
    min-height: 500px;
}

.overview {
    display: flex;
    height: 132px;
    margin-bottom: 18px;
    padding: 20px 0px;
    background-color: #fff;
}

.overview div {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
    flex: 1;
}

.overview div:first-child {
    border-right: 1px solid #f4f4f4;
}

.overview div a img {
    width: 25px;
    margin-bottom: 10px;
}


.overview div span {
    font-size: 25px;
    color: #e05e30;
}

.overview div p {
    font-size: 16px;
    ;
}

.overview div a:last-child img {
    width: 18px;
}

.pannel {
    padding: 28px 20px;
    margin-bottom: 20px;
    background-color: #fff;
}

.pannel .pannel_title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f4f4f4;
}

.pannel .pannel_title h4 {
    font-size: 22px;
    color: #333;
    font-weight: 400;
}

.pannel .pannel_title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999;
}

.orders li {
    display: flex;
    height: 137px;
    margin-top: -1px;
    margin-bottom: 20px;
    border: 1px solid #f4f4f4;
}

.orders li:last-child {
    margin-bottom: 0;
}

.orders li .goods {
    display: flex;
    /*布局是可以嵌套的，因为你可能是其他的子，如浮动也是如此，即只是另外的一种称呼*/
    /*
    图片的变化另有其他样式造成的，在index.css的
    img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
      造成的，自己测试就知道了
      */
    flex: 1;
    margin-right: 120px;
    align-items: center;
    padding: 17px 0 14px 12px;

}

.orders .goods .pic {
    width: 107px;
    height: 107px;
}

.orders .goods .txt {
    font-size: 14px;
    color: #999999;
    width: 0;
    flex: 1;
    /*由于加上了flex:1，那么会覆盖宽度的，无论是否在后面，优先级都比宽度大*/
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    /*当被overflow: hidden;进行隐藏后，在后面使用...来进行显示处理，但是也在内容里面
    且如果操作弹性盒子，一般不会进行处理，这就需要添加宽度才可，也就是说弹性盒子是需要添加宽度的，否则不会进行处理这个省略号，即...来进行显示处理
    这是内部代码的问题，所以了解即可
    */
    white-space: nowrap;
    /*不操作换行行为，也就是说，如果没有这个，可能换行后出现两个...或者某些行没有，具体可以自行测试*/
    overflow: hidden;
    font-size: 16px;
    color: #333333;
}

.orders li .status {
    width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.orders li .pay {
    width: 200px;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.orders li .action {
    width: 180px;
}

.orders li .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*一般来说，居中是根据自身子元素来决定的（包括垂直和水平的结合，所以可能会在添加新的数据时，导致改变位置），而不是固定的，所以会存在真的居中
    但他也只是操作居中，对里面的子元素的其他操作，如加上宽高等等并不会产生很大的影响的
    */

}

.orders li .status a:first-child {
    font-size: 14px;
    color: #e05e30;
}

.orders li .pay p:first-child {
    font-size: 14px;
    color: #9a2e1f;
}

.orders li .action a:first-child {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    background-color: #5eb69c;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
}


.collect {
    padding: 28px 20px;
    margin-bottom: 20px;
    background-color: #fff;
}


.collect .collect_title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f4f4f4;
}

.collect .collect_title h4 {
    font-size: 22px;
    color: #333;
    font-weight: 400;
}

.collect .collect_title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999;
}

.collect ul {
    display: flex;
}

.collect li {
    flex: 1;
    height: 396px;
    margin-bottom: 20px;
    padding: 22px 10px 20px 12px;

}

.collect li:last-child {
    margin-bottom: 0;
}

.collect li img {
    width: 260px;
    height: 260px;
}

.collect li p {
    font-size: 16px;
    color: #333333;
    width: 260px;
}

.collect li span {
    font-size: 22px;
    color: #9a2e1f;
    width: 160px;
}

当然，并不要求编写的与psd文件一致，大致相同即可（所以这里基本上为了实现，可能与原本的psd文件对应内容并不相同（比如实际上对应的psd的字体大小可能并不会与字体本身高度有关，而是被设置的，或者也设置了行高，并且他们基本都是比较小的，导致与psd的实际上效果要高点，也使得对应右边的内容高度需要变大，才会对齐），比如高度，当然，这里可能并没有给出这个文件，所以这里了解即可），具体完整代码地址：

链接：https://pan.baidu.com/s/1l6PwmnROtGh0gxb4tzxHiw

提取码：alsk

接下来我们来说明移动适配：

实际上前面在说明二倍图时的响应式就是一个适配操作，而移动适配只是以移动端处理而已，实际上无论是pc还是移动都是适配的意思，即响应式的意思，即移动适配可以是响应式设计的一部分

在前面我们大致说明了一下视口，虽然对于手机来说他可能并不会发生变化，即视口并不会发生变化，但是也并不一定，就如电脑也可以改变窗口，所以说无论是移动还是pc，其视口是都会改变的，这就需要之前的我们操作的vw了，当然还有其他操作，现在我们来进行说明：

rem：

我们能够使用rem单位设置网页元素的尺寸

现在我们来操作一下案例：

但是在操作之前首先拿取这个js文件，下载地址如下：

链接：https://pan.baidu.com/s/1lXgayK16YkuYF32JuyrEjg

提取码：alsk

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
    <div class="box"></div>
    <script src="./js/flexible.js"></script>

其中如果加上了flexible.js，5rem代表占视口的50%（的宽或者高），并且rem在pc端会进行改变而不是固定，即根据视口改变

当没有flexible.js时，5rem只是代表一个字号的大小，并且只会按照html的属性进行处理，如：

html{
            font-size: 20px;
        }

由于默认是16px，那么如果你在.box中加上或者body加上font-size: 20px;都不会起作用，因为只会按照html的属性进行处理，所以如果你加上上面的，就会发生改变，从上面可以看出，1rem = 1HTML字号大小

那么为什么加上flexible.js就会代表占视口的50%呢，我们来看看他的源码：

在这之前首先看看这个：

<script>
        (function fa(a) {
            console.log(a)
        } (1))
    /*
    给出固定的参数1，并且自执行，这是js的特性（需要括起来），这在某种程度是括号的作用，一般来说，如果被括起来的函数没有定义参数，那么这个括号只是获取一下你，而不会调用，这个时候就需要这样：
     (function fa(a) {
            console.log(a)
        })(1)
        
        而有参数的定义，那么会顺便执行一下，而不是单纯的获取一下你
        
        这都是js的特性
    */
    </script>



<!--
存在这样的：

 <div id="id" class="idd">2</div>
    <script>
        var a =  document.getElementsByClassName("idd");
        var b = document.getElementById("id");
        console.log(a[0]==b) //true
   
    </script>
-->

当然，这里会给出注释，来防止你没有学过js，那么flexible.js的源码如下：

(function flexible(window, document) {
  //将全局的 window 和 document 对象作为参数传入
  //这样做可以确保在函数内部使用 window 和 document 对象时不会受到外部作用域的干扰

  //获取文档的根元素（<html> 标签），用于后续操作，这是全局的document的属性，所以可以这样做
  //相当于使用document.getElementById("id")类似的处理，只是顶部的html存在这个属性的直接指向（当然，并没有像根据类那样的处理，因为其偏向与数组，虽然里面的数据是一样的）
  var docEl = document.documentElement
  console.log("docEl：" + docEl);
  //获取设备的像素密度（DPR）
  //window.devicePixelRatio 表示设备物理像素与 CSS 像素的比例（二倍图那里的说明的）
  //通常用于在高密度屏幕上进行适配，同样的，如果浏览器不支持获取 DPR，将默认值设置为 1（因为window.devicePixelRatio这个时候可能是0，即默认假的值）
  var dpr = window.devicePixelRatio || 1
  console.log(dpr)

  // adjust body font size：
  // 翻译：调整正文字体大小
  function setBodyFontSize() {
    if (document.body) {
      //设置body的字体样式大小，为12*倍数
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      //如果 document.body 不存在，将在文档加载完成后监听 DOMContentLoaded 事件，然后再次尝试设置字体大小
      //这是为了确保在页面加载时字体大小已被正确设置，大多数这里并不会到达，这里只是防止加载速度问题，因为有以下的情况会出现不存在的情况：
      /*
1：当 JavaScript 脚本被放置在 HTML 文档的 <head> 部分并且没有使用 defer 属性或者放在 <body> 元素之后时
脚本会在页面尚未完全加载时执行（也就是body，因为我们是根据顺序来操作的），这意味着在代码执行时，document.body 可能还没有被创建，因此判断条件 if (document.body) 会被判定为假，从而执行 else 块中的代码
2：当页面包含外部资源（例如样式表、图片等）的加载可能会影响到页面的渲染速度，如果 JavaScript 脚本早于这些外部资源执行，也可能导致在脚本执行时，document.body 尚未完全创建，同样会执行 else 块中的代码
实际上简单来说，就是防止body（标签）之前加载js脚本的情况
      */

      //在文档的 DOM 内容全部加载完成后，执行 setBodyFontSize 函数，这样就解决了body没有加载完成的情况
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  //先进行调用
  setBodyFontSize();

  //上面设置了body属性的字体大小，现在我们看看下面的代码

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    //这一行计算出一个基准字体大小 rem
    //即docEl.clientWidth 表示文档根元素的客户端宽度（即可见区域的宽度，你也可以认为是视口）
    //然后将其除以 10，得到一个合适的基准字体大小
    var rem = docEl.clientWidth / 10
    console.log(rem)
    //给html进行设置该字体大小
    docEl.style.fontSize = rem + 'px'
  }

  //执行一下
  setRemUnit()

  // reset rem unit on page resize
  //翻译：页面调整时重置rem单元
  //window.addEventListener('resize', setRemUnit)：在窗口大小调整时
  //调用 setRemUnit 函数以更新 rem 单位的基准值，从而保持适配
  window.addEventListener('resize', setRemUnit)
  //window.addEventListener('pageshow', function (e) {...})：在页面重新显示（例如从缓存中重新加载页面）时
  //检测是否需要重新设置 rem 单位基准值
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  // 翻译：检测0.5px支持
  //检查设备的像素密度 (dpr) 是否大于或等于 2。如果满足这个条件，即设备是高密度屏幕
  if (dpr >= 2) {
    //创建一个虚拟的 <body> 元素。这个元素并不会直接显示在页面上，只是用于测试边框样式
    var fakeBody = document.createElement('body')
    //创建一个测试用的 <div> 元素，用于测试边框样式
    var testElement = document.createElement('div')
    //为测试元素设置一个 0.5 像素宽的透明边框，这是为了测试浏览器是否支持 0.5 像素的边框样式
    testElement.style.border = '.5px solid transparent'
    //将测试元素添加到虚拟的 <body> 元素中
    fakeBody.appendChild(testElement)
    //将虚拟的 <body> 元素添加到文档根元素 (<html>) 中
    docEl.appendChild(fakeBody)
    //检测测试元素的高度是否为 1 像素，如果是，说明浏览器支持 0.5 像素的边框样式
    if (testElement.offsetHeight === 1) {
      //如果支持 0.5 像素边框，将为文档根元素添加一个类名 'hairlines'，这个类名可以用于进一步的样式调整
      docEl.classList.add('hairlines')
    }
    //最后，将虚拟的 <body> 元素从文档根元素中移除
    docEl.removeChild(fakeBody)
  }
}(window, document))

经过注释的理解，我们知道html的字体大小是视口的1/10，而body则是对应的12*二倍图对应的倍数，当然，这里我们主要看html，根据前面的说明，1rem代表html的字体大小，5rem代表5倍的html的字体大小，当我们没有对应的flexible.js时，那么的确如此，但是若有flexible.js，那么5rem应该就是：视口的10%大小（html的字体大小，这是设置成这样的，否则就是根据默认的）在乘以5，即视口的50%大小，也就是说，加上了flexible.js就使得5rem的这个5代表了视口的百分比的5倍关系了（本质是字体，只是对应的值是视口的百分比，即10%），而不是字体大小的5倍关系，因为存在var rem = docEl.clientWidth / 10，所以为了保证适配，我们一般建议加上flexible.js，来保证百分比的处理，而正是如此，所以如果你加上了这个js，然后你自行的手动设置html的字体大小，那么就会被覆盖，使得并不会按照百分比了，而是你加上的了，你可以选择再次的试一下：

html{
            font-size: 10px !important; 
        }

当然，存在最小的字体，只是对方只会看你设置的，而不会看计算样式的固定，即只看设置的，并且为了保证优先级，所以这里加上了!important来进行处理，因为js设置的优先级比寻常的都要高，一般与行内是同等级，那么这个时候就需要看加载顺序了（由于是行内级别，所以会在检查元素中看到其设置的样式，并且，由于js要获取标签信息的原因，一般会在后面，所以导致js设置的优先级比寻常的都要高），除非特别的，如!important，可以自行测试一下就知道了，如：

  <div id="box">1</div>
    <script>
        //记得写在标签后面，因为是从上到下的，否则找不到box，那么自然不会操作了，这里注意即可（所以最好建议js放在最后，包括引入的）
        document.getElementById("box").style.color = "pink";
    </script>

    <style>
        #box {
            color: red
        }
    </style>

所以综上所述，flexible.js的确是保证适配而操作的，所以我们引入即可，当然，代码是可以自行改变的，了解即可，并且里面的数据处理是非常合理的，即不多算也不少算的

其中，一般根据其他属性计算或者说来得到结果的，我们一般会称他为相对单位，即rem是一个相对单位，因为rem单位是相对于HTML（根）标签的字号计算结果的

原因说明完毕，我们继续往后学习：

rem移动适配的媒体查询：

假设，上面的js我们没有引入，有没有办法进行处理呢，即适配呢（没有引入之前，是并没有根据视口来适配的，这里的适配都是根据视口来说的，也就是显示窗口），实际上有的，我们看如下：

 <style>
        /*检测视口的宽度是否是375.33px（实际上视口一般是375，但是由于显示的关系，html宽度确是375.33，一般情况下，我们并不建议使用@media，因为与js获取视口宽度不同的时，@media获取的完全是对应的html宽度，虽然html宽度一般情况下就是视口宽度，但是对应js在考虑某些配置时，比如<meta name="viewport"一般就是他的值，否则就是html的，而@media就只是html，所以@media可能存在差别，因为html宽度并不完全等于视口宽度，只有在不考虑到具体像素变化时（后面会解释0.33的出现的），才会完全相等），如果是，那么给style添加样式的操作，当然，他也是根据顺序来的，因为从上到下，自然也会考虑覆盖关系*/
        @media(width:375.33px) { /*括号里面是媒体的特性，一般指当前视口的处理，别称为媒体查询*/
            html {
                font-size: 40px;
            }
        }
    </style>

通过@media来判断视口宽度是否是对应的括号的值，如果是，那么添加样式设置，但是上面的为什么需要375.33px呢，实际上视口宽度在一定程度上代表了html宽度，因为html是固定的显示窗口的宽度，也就是视口的，一般来说html的宽应该不等于视口，但是因为浏览器在没有显式设置的情况下，会对元素应用一些默认样式，其中就包括将元素的宽度设置为视口宽度，这个默认样式是出于历史原因和一致性考虑，在早期的 web 开发中，为了确保网页在各种浏览器中显示一致，浏览器厂商常常会应用一些默认样式，其中之一就是将元素的宽度设置为视口宽度，这样做的好处是，网页开发者可以在不显式设置宽度的情况下，让网页内容自动充满视口，达到一个基本的一致性效果，需要注意的是，这种默认样式可能在不同的浏览器和不同的浏览器版本中有所不同，不同浏览器的默认样式可能会稍有差异，因此，如果您希望确保网页的宽度在不同浏览器中一致，最好是显式地使用 CSS 来设置宽度，而不是依赖于默认样式，我们知道了html一般是视口的大小，然而对应的显示的375确变成了375.33，那么你认为实际正确（375），还是虚拟正确呢，那肯定是实际正确，而出现这样的情况是有很多原因，这涉及到浏览器和设备在处理视口（viewport）以及设备像素与CSS像素之间的关系时可能出现的细微差异，比如：

浏览器在处理视口时，通常会将设备的物理像素映射到逻辑的CSS像素（你的像素必须以我总像素为例子，我10像素，你6像素，那么你就占用我的6像素，即我的60%），以便在不同的屏幕分辨率下提供一致的网页显示，这种映射可能会导致浏览器在计算视口宽度时出现细微的差异

设备像素是硬件上实际存在的物理像素，而CSS像素是用于排版和渲染的抽象单位，通常情况下，一个CSS像素会对应于多个设备像素，这是为了适应不同的屏幕密度和分辨率

所以，当您设置视口宽度为375px时，浏览器会将这些CSS像素映射到设备的物理像素，然而，由于浏览器和设备之间的微小差异，可能会导致实际的视口宽度略微不同于您所期望的375px

这种微小差异可能受到不同设备、浏览器和操作系统的影响，以及它们在处理视口和像素映射时的算法和舍入方式，在设计和开发响应式网站时，通常会考虑到这种差异，并使用弹性布局、百分比单位等来确保在不同设备上获得一致的外观和布局

总之，这种微小的差异是正常的，但通常情况下不会对大多数用户的浏览体验产生显著影响，但是对精准的@media媒体查询会造成巨大的误差，所以@media一般是不会常用，如果要使用，一般会根据当前html的宽来处理，所以这里需要换一个说法，@media是根据html的宽来确定设置字体大小的，按照这个说法，说法感受到了适配的意思了呢，所以在这个时候的话，@media一般会常用的，由于视口与物理像素有关，以及浏览器自身的关系，所以一般并不允许设置视口，所以前面的类似的<meta name="viewport"中一般并没有对应的视口设置的大小，一般只有比例的缩放的操作进行处理，当然，还有其他的，只是我们用的少而已

通过上面的说明，我还是建议对应的@media里面的宽是对应的屏幕宽，虽然可能因为细小差异导致出现问题，但是一般来说这个细小差异也只是屏幕像素与视口的关系，我们其实也可以解决，看如下：

设置成100%一般就行了，我这里是150%，那么为什么会出现之前的375.33呢，这里需要注意如下的解释：

逻辑像素，逻辑分辨率，物理像素，物理分辨率（最上层的逻辑分辨率）

他们在不同的地方是不同的解释的，在二倍图中，逻辑分辨率的显示比例处于物理分辨率的下位，即小，但是这只是比例，而由于比例小，所以逻辑像素一般大于物理像素，即一个逻辑像素占用多个物理像素（在某种情况下，css代码的px和用截图工具（如qq）所操作的对应相同目标的px，是不同大小的px，因为一个是按照逻辑，一个是按照物理），也就是说分辨率只是比例，而像素才是真正的处理，在一般情况下，你也可以将分辨率称为像素的意思，然而我们一般并不能这样

那么根据这样的说，假设我的电脑是1920（以宽为例子）像素，那么物理像素是1920，逻辑像素也是1920（因为当前屏幕的确都是显示的），这个时候的分辨率比例是1:1（设备像素比（DPR）），但是我们需要以移动端为例子，或者说以移动端的二倍图概念为例子，所以我们需要如下的假设：

考虑一个逻辑分辨率为 1920x1080 的设备，但实际物理分辨率是 3840x2160，在这种情况下，设备像素比（DPR）为 2，即一个逻辑像素对应四个物理像素，并且你也只是在逻辑分辨率下操作的图，你还不知道他设备的真实分辨率，那么，如果您在网页上使用一张 1920x1080 的（二倍原样图）图，当你将这个图填满的放入这个真实分辨率的设备中，那么由于并不能填满，所以其中的一个1920的像素需要变大为两倍（二倍图），也就是比例的大小，即：

存在如下（以宽为例子）：

一个图：

物理像素：1920个像素，逻辑像素：1920个大像素（如果是两倍关系，那么一个像素占用原来的四个小像素，其实也就是四个小像素，要注意，这个两倍是宽高变化的，所以一个格子是变成4个格子，而不是两个）

物理分辨率：3840，逻辑分辨率：1920

这里就需要说到另外一个解释：在说到分辨率时，我们需要意识到是说明的设备，而说明像素的时候，需要说明是当前处理的对象像素，而这里就是图，而不是设备本身

现在假设我们将上面我的设备，也就是1920的物理分辨进行缩放，也就是变成100%，说明什么都没有变，那么这个图也的确是原来的四个像素，假设缩放为150%，那么首先原来的，说明原来的1920像素中，以物理的逻辑分辨为主，物理的逻辑分辨代表是物理分辨的替代（也就是上面的物理层面的固定缩放），也就是1920中一个格子中变成了1.5 * 1.5=2.25个格子，你可以发现，有小数点，那么虽然看起来这个时候1920的物理分辨没有变化，但是物理的逻辑分辨应该是比1920要小的，而且并没有0.25的格子（这里我们考虑最小的像素点），所以我们需要进行取舍，然而取舍的层面并不是去掉，只是一个显示问题而已（如某些标签的显示（可以试一下表格），可能有些只会必须要求整数（表格），或者不必须要整数，大多数真实的并不会的（不必须要整数）），他是永远存在的，以这个基础上，那么如果该物理的逻辑分辨中存在其他的物，如图片，那么无论他如何进行处理，都一定会存在出现小数的情况，因为你操作的格子就存在小数，而他的物理和逻辑会进一步的像上面的1.5 * 1.5一样的处理，也就是说，这就是我们之前说明的细微的变化，所以出现小数是正常的，当然，实际情况还会更加的复杂，这也是0.33出现的原因，当然，这里了解即可（一般来说，最终的结果如果并不是偶数（使用第一次的处理），那么一般就会出现问题，即物理设备的缩放没有出现小数，基本其他的也不会了，虽然375会出现0.33，但是其它的偶数分辨率的设备可能并不会，你可以测试一下），实际上150%也会体现在一些标签上，导致间隙，这也是间隙的真正来源（因为取舍）

其实太多的名词反而会影响理解的意思，所以这里我进行简化：

你就想象一下，一个宽2，高2的正方形，很明显，里面存在4个格子，每个格子宽高为1

假设这个时候格子放大2倍，那么这个正方形只有一个格子了，我们看这个：

其中正方形代表物理分辨率，里面的4个格子是物理像素

放大2倍代表上面的缩放2倍，这个时候格子是少了的吧，即一个格子占用了原来的四个格子了

同样的，你将4个格子看成物理分辨，1个格子看成逻辑分辨也是可以解释（这个时候在不考虑（其他）整体的话，应该是逻辑像素）

所以无论是分辨还是像素，只是因为分辨的比例而导致的像素基础的改变，从原来的四个格子的宽高为1的基础变成了为2的基础

那么这样就比较容易了在这在缩放的变化下，如果不是整数的处理，那么就容易出现像0.33这样的出现的情况

至此我们解释完毕，当然，上面的了解即可，因为并没有很大的作用，但是由于大多数缩放都是150%，所以设置的具体的像素，在显示时，一般在逻辑上是对应的值，但是在物理上他是缩放的，就如1个格子（逻辑）占用了4个格子（物理），当然，说明是较难以理解，并且，说明也并不严谨，还不如具体例子，所以这里我给出一个具体例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body>
  <style>
    div{
      width: 500px;
      height: 500px;
      background-color: red;
    }
  </style>
<div></div>
</body>

</html>

首先我的电脑是操作了150%的倍数，也就是说一个逻辑像素一般会代表多个物理像素，首先，逻辑像素一般是具体指定的，也就是上面的500px，现在我们截图，查看截图工具对该div进行测量，可以发现，是750的高度（浏览器的大小要设置为100%，否则是互相影响了），所以在这里逻辑像素是500，逻辑分辨率：物理分辨率=1.5：1，所以当逻辑像素是500时，物理像素是750，这是在浏览器的分辨，同样的在设备上自然也是如此，虽然前面的说明的都是设备，其中逻辑分辨率虽然小，但是在具体的像素占用时是多的（这是隐藏的说明），虽然看起来需要铺满，相当于扩大了（这里考虑之前为什么使用二倍图的原理，如果使用二倍，那么为了适应这个逻辑像素到物理，自然更加清晰，因为二倍图是根据逻辑的二倍清晰来处理的（虽然还有0.5的差别更加的清晰））

现在就会存在一个问题，也就是，如果用户他的缩放并没有整数比例，那么我如何操作（因为你怎么知道后面是.33呢，即375.33px，就算知道，那么这样好吗），这个时候就需要特殊的处理了，也就是之前的那个flexible.js的操作，也就是说，我们虽然也会常用@media，但是也只是针对某些视口（需要指定.33），如果需要大量的给人使用，那么@media是不行了，所以到现在，我们基本都只会使用flexible.js了（来自动处理），而不会使用@media

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10（所以前面的flexible.js也就是这样处理的）

那么现在有个问题，既然也存在了rem，那么某些设计稿中，怎么进行区分呢，即如何根据设计稿对应的大小来进行处理，因为书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem呢

他们一般存在以下的步骤：

确定设计稿对应的设备的HTML标签字号，然后将该设计稿处理，假设对应的是100px，那么100/该字号，就是rem的多少了，这样你就可以使用rem来替换这个100px了

现在有个问题，css可以操作计算吗，答案是不能，也就是说，如果要根据设计搞来处理，那么需要你手动计算后填写，而不能直接的写上计算表达式，所以这是比较麻烦的一个地方，那么有没有操作可以解决呢，我们看如下：

在一个语言自身处理不了的时候，那么需要将计算方式不放在这个语言里面，使得生成css即可，比如：

使用Less运算写法完成px单位到rem单位的转换：

Less是一个CSS预处理器，Less文件后缀是.less

扩充了 CSS 语言，使 CSS 具备一定的逻辑性、计算能力

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件，即less会生成css，什么意思呢，我们看如下：

你可以先选择在css中这样写，看看可以不可以，通过测试，发现是一个删除线，即没有起作用，但是你单纯的写上less文件，他并不会进行变化，为什么，因为你通过less生成css总要有一个东西，如程序来实现的吧，vscode自身一般并没有这样的处理，所以我们需要插件，我们给vscode下载这个插件：

我们安装后，下次只要我们保存less文件，他就会自动的生成css，并存在当前less文件所在的目录下，并且对应的width是计算过的值，也证明了将计算方式放在不同的语言中（当然，也并非是语言，可以认为是一个解释地方，比如插件，代码等等，只要可以都行）

当然，有些插件是需要重启的（并非所有插件都是），所以注意即可

上面的ctrl+s后，你可以测试看看，也就是删除css文件，然后按一下即可，当然，如果存在对应的css文件一般是覆盖（less文件的文件名，如1.less那么生成1.css），如果没有覆盖（可能因为比较卡或者慢造成的，一般不会出现这种情况），那么可以删除再进行测试

现在我们测试一下他的计算方式怎么使用：

less：

.father {
    color: red;
    width: 68+50px;
    width: 68*50px;
    width: 68/50px;
    width: 68/.50px;
    width: (68/50)px; //加括号可以省略.，即不用操作./了，前提是需要被括号括住（这样基本与-，+，*一样的操作或者性质了，比如也可以空格隔开，因为空格是针对./，而这个使用不是./了，这里需要注意）
    //但是要注意：(68/50)px;的方式可能也不行了（不同的浏览器或者以后的浏览器可能可以），因为生成的px与对应的值存在空格，在大多数浏览器中，单位需要与数字结合才行，否则不会起作用，所以我们还是建议width: (68/50px);
    //也可以width: (68/50px);
    width: 68-50px;
    width: 10./3px; 
    width: 10rem-3px;
    width: 10rem./3px;
}

css：

.father {
  color: red;
  width: 118px;
  width: 3400px;
  width: 68/50px;
  width: 68/0.5px;
  width: 1.36 px;
  width: 18px;
  width: 3.33333333px;
  width: 7rem;
  width: 3.33333333rem;
}

注意：不符合上面语法的，一般不会生成css，其中"./"中的"."不能隔开（其他的*，+，-都可以进行隔开，即空格隔开），否则不会生成，当然，报错并非是不符合，比如width: 10rem./3px;可能报错，但是他还是会生成的，报错一般是提示而已（大多数的报错都是如此，所以不要认为软件的报错就一定是解释器的报错，因为软件的提示（报错）也并非一定正确，或者一定影响运行情况，如使得停止）

其中表达式存在多个单位以第一个单位为准（前提是其他的单位与数连接，比如width: 140rem./2 px;就会得到width: 70rem px;，所以由于2 px，他们没有连接，那么会造成这样的问题，这个样式在前端可是会有删除线的），所以width: 10rem./3px得到的结果是rem的单位，所以一般情况下，我们为了单位的观察比较好，所以通常这样做：width: 10./3px;，将单位放在后面，那么上面的width: 10rem./3px;可能报错，但只是一个提示作用了，而不会影响程序运行

一般来说，像这种在生成最终文件（css，但并不只是文件，可以是某些操作）的前面进行某些处理的操作，我们称为这个操作为最终的预处理操作（你手动的写实际上也算的）

我们再看如下，假设less文件是以下的形式，你认为会出现什么结果：

.father {
    color: red;
    width: 68 + 50px;
}

.father .f {
    width: 50+90px;
}

.father {
    width: 50+90px;
}

结果是：

.father {
  color: red;
  width: 118px;
}
.father .f {
  width: 140px;
}
.father {
  width: 140px;
}

即，less只是操作计算方式，对原来css的结构并不会发生改变，当然，这个存在是例外（less特有的操作）：

.father {
    color: red;
    width: 68 + 50px;

    .f { //可以嵌套的，当然，如果里面是空的，比如.g{}，那么就不会生成
        width: 140px;
    }
}

得到的结果是：

.father {
    color: red;
    width: 68 + 50px;
}

.father .f {
    width: 50+90px;
}

当然，我们还是建议不这样操作，因为与css并不是相同的语法，但是有时候也会建议使用他，因为他一般并不会导致编写错误，即保证是对应的子集，而防止写错造成（假设你直接写，写反了对应的子怎么办，比如.a .b .c，你不小心写成了.a .c .b了，这会导致页面部分改变的，这是不好的情况，可能也会造成请求出现错误，因为js可能会根据这个顺序来得到对应的标签信息）某些问题，并且也由于都在一个样式里面，方便复制粘贴，而不用选择多个样式属性了（这是主要的好处，因为写错是正常的，就算你用这个，可能也会写错在子元素的子元素里面去，而不是对应的同级）

这里我给出疑问，为什么除法一般需要加上括号，或者加上点呢，实际上由于除法符号与注释类似，所以为了区分，所以需要这样做，这里了解即可，当然，相关的是否加上括号，以及文件生成的加点的细节并不需要了解，因为并没有什么意义，因为你按照规范来就行了，没有必要找问题，虽然他们大多数都是用代码解决这样的问题（这个时候你是否像个客户一样提了很多的需求呢）

当然，less还存在如下：

.father {
    color: red;

    &:hover { //给自己，记得加上&，否则相当于":hover"这个整体是father的子级（子集），即&一般是操作自己，简单来说&就是.father，所以会拼接成.father:hover（否则默认是.father xxx，即中间加上空格，所以存在如下）：
        /*
        & :a == .father :a 替换，这个时候存在&，那么不会自动加上.father了（在前面并且加上空格）
        .a == .father .a 自动加上.father，且默认空格
        上面保证了是自身的信息或者对应的子元素的
        */
        color: green;

    }
}

生成的css：

.father {
  color: red;
}
.father:hover {
  color: green;
}

当然，less为了解决重复的问题，所以也提出了变量：

@color: pink;

.box {
    color: @color;
}

p {
    color: @color;
}

//这样就可以完成解决重复的问题，因为我们使用变量基本，即（也是主要解决的问题）以后修改时修改变量值即可
//注意：这个变量相当于直接的替换，也就是说，如果他是一个数字，那么可以加上单位

而less也存在导入功能：

假设有一个2.less：

div {
    width: 100px;
    height: 20+20px;
}

我们在3.less中进行导入：

@import "2.less"; //这里放在相对路径，绝对路径也行的，分号要有，否则报错，其中，如果是less文件，那么可以忽略后缀名，即@import "2";也行，即默认加上less后缀名的，当然，如果对应不存在，自然报错（保存不了，即不会生成，并不是不能保存文件，而是不会生成哦）

然后保存，看看出现的3.less是否是2.less的内容了（相当于写过来），可以发现，是的

当然，一般情况下，less生成的css在当前路径下，如果需要修改css生成的路径呢，怎么处理：

首先我们可以对插件进行处理，使得在默认的当前路径被改变：

当然，如果你操作文件夹，那么如果css没有文件夹，就会创建，现在保存一下上面的json文件，那么现在你保存一下less文件看看结果吧

当然修改插件的方式是作用到所有的文件的，即修改默认，如果有些是不同的生成路径应该如何操作，看如下：

//out:./abc/
div {
    width: 100px;
    height: 50+40px;
}

注意：虽然上面存在注释//，但是由于后面的内容是out，所以他现在并不是一个真正的注释，他被识别了（底层会识别），使得他并不按照默认的路径处理，而是按照上面指定的./abc/来处理，你保存一下看看结果吧

当然，你也可以不进行生成css，只需要写成：

//out:false

这样就不会生成css了，当然，如果在对应的json里面写上：

"out": false

那么代表默认的就不会生成css，但是由于也存在//out:./abc/，他并不会按照默认的处理，相当于覆盖了，这里你可以进行测试，就不做说明，如果是这样呢：

//out:./abc/
//out:./bc/da.css

当存在多个指向时，按照第一个指向来决定，所以这里是操作了//out:./abc/，由于他并没有指定文件，所以名称是less的名称（后面的是指定的da.css的，当然da.css的.css可以省略，因为默认加上css，没有最好的/代表文件，当然，你也可以写上da.a，那么生成的就是da.a了（指定文件，那么就会相当于创建该文件，然后将生成的css放进去），因为你有后缀，那么就不会加上.css了）

当然，如果对保存了less的文件夹进行保存，那么里面的less相当于保存了，即会除非生成css文件

注意：false虽然设置后他不会生成css，但是也只是针对他自己，所以如果被其他人导入，那么他的内容还是可以被使用的，因为导入只是相当于将内容复制粘贴过去而已，看后面的项目就知道了，当然，你也可以进行测试

现在我们来写一个项目：

地址：

链接：https://pan.baidu.com/s/1q-TILaEkmB7cpWpY2a-J4w

提取码：alsk

然后我们删除less里面的index.less，以及该项目的index.html，我们重新创建他们，然后编写index.less和index.html：

由于其他两个的less是false的设置，所以我们可以在index.less中导入后进行使用

@import "./base.less";
@import "./normalize.less";

现在我们编写index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--主体内容-->
    <div class="main">
        <!--banner-->
        <div class="banner">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/banner_1.png" alt="">
                    </a>
                </li>
            </ul>
        </div>

        <!--活动标题-->
        <div class="title">
            <h4>乐园活动</h4>
        </div>
        <!--活动-->
        <section class="item">

            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!--收藏图标-->
                <i class="iconfont icon-shoucang1"></i>

                <!--活动状态-->
                <div class="active off">进行中</div>


            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>


        </section>
        <section class="item">

            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!--收藏图标-->
                <i class="iconfont icon-shoucang1"></i>

                <!--活动状态-->
                <div class="active off">进行中</div>


            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>


        </section>
    </div>
    <!--底部工具栏-->
    <footer>
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
    </footer>
    <script src="./js/flexible.js"></script>
</body>

</html>

对应的css（index.less）：

@import "./base.less";
@import "./normalize.less";

//变量，存储对应的37.5（不同手机的视口宽是不同的，当然，这里由于我们会指定一个固定的数比如50px，所以在变成rem时需要除一下，来进行满足对应的结果，因为要操作其他的处理，或者变成rem，则必须操作html大小，而37.5就是由于对应js会造成的结果，所以我们除以这个即可，这样才会是正确的rem值）
@rootSize: 37.5rem;

body {
    background-color: #F0F0F0;
}

//主体内容
.main {
    padding-bottom: (50 / @rootSize);

    //banner
    .banner {
        height: (160/@rootSize);
    }

    //活动标题
    .title {
        //这就相当于操作对应的px，即40px，或者说15px了
        height: (40/@rootSize);
        line-height: (40/@rootSize);
        padding-left: (15/@rootSize);

        h4 {
            font-size: (14/@rootSize);
            color: #3C3C3C;
        }
    }

    //活动
    .item {
        margin-bottom: (10/@rootSize);

        //图
        .pic {
            position: relative;
            height: (160/@rootSize);

            //收藏图标
            i {
                position: absolute;
                top: (15/@rootSize);
                right: (18/@rootSize);
                font-size: (24/@rootSize);
                color: #fff;
            }

            //活动状态
            .active {
                position: absolute;
                left: (15/@rootSize);
                //写成-(4/@rootSize)也行，建议把-写在括号外面，不要用-4进行处理（虽然也行，但是有时候在编程中会判断符号位，所以负数可能会更加浪费一点时间）
                top: (-4/@rootSize);
                width: (68/@rootSize);
                height: (29/@rootSize);
                background-image: url(./../images/status_active.png);
                background-size: contain;
                font-size: (12/@rootSize);
                color: #fff;
                text-align: center;
                line-height: (25/@rootSize);

                &.off {
                    background-image: url(./../images/status_default.png);

                }
            }

        }

        .txt {
            //可以这样的处理，一般括号代表是一个整体
            padding: (10/@rootSize) (15/@rootSize);
            background-color: #fff;

            .top {
                display: flex;
                justify-content: space-between;

                h5 {
                    width: (290/@rootSize);
                    font-size: (15/@rootSize);
                    color: #3C3C3C;
                    font-weight: 400;
                }

                p {
                    font-size: (15/@rootSize);
                    color: #FE6249;
                }
            }

            .bottom {
                display: flex;
                margin-top: (10/@rootSize);

                p {
                    margin-right: (15/@rootSize);
                    font-size: (11/@rootSize);

                    i {
                        font-size: (11/@rootSize);
                    }

                    color: #B4B4B4;

                }
            }
        }

    }
}

//底部工具栏

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-origin: 0;
    height: (50/@rootSize);
    background-color: #FECA49;
    text-align: center;

    a {
        color: #D78B09;
        font-size: (11/@rootSize);

        .iconfont {
            font-size: (24/@rootSize);
        }

        &.current {
            color: #fff;
        }
    }


}

前面我们已经学习了rem，现在我们来学习vw / vh，当然，他们都是单位，其中rem是html字号的单位操作方式（在有对应js的情况下，则变成是操作视口的百分比了，即1/10代表1rem），而vw/vh是视口的

1vw = 1/100视口宽度，1vh = 1/100视口高度（视口一般我们也会称为显示的窗口）

我们来看案例：

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 50vw;
      height: 30vw;
      background-color: pink;
    }
  </style>
  <div class="box"></div>

可以知道宽度是视口的50%，高度是30%，并且不会操作固定（如div，前面的固定解释或者因为视口不变化的解释都是源于此）

所以上面的使用pc或者移动端都可以操作，可以自行进行测试，实际上可以发现，10vw正好是相当于1rem（前提是操作了对应的js），但是vw并不是rem，他实际上并没有真的操作视口，只是操作了html的宽或者其高度，与@media类似（虽然html的宽与视口相关，但是并不完全相等，与之对应的body可能由于某些样式导致有所减小，但是在去掉这些默认样式后，一般是相同的，所以body也可以说成是显示的窗口）：

要完成body与html一样，加上这个即可

*{
        margin: 0;
        padding: 0;
       }

因为body默认存在margin:8px;，当然，不同版本浏览器，可能默认的不同，具体可以自行查看即可

而由于vw或者vh（这个可以自己测试一下），与@media类似，所以通常我们还是建议使用rem，只不过，虽然rem是比较严谨的，但是他比较vw或者vh需要更多的代码操作，比如需要引入对应的js（这样看来@media只能精准操作了），他们各有利弊

视口只是更具具体的视口参数（一部手机自然会存在这个参数），而进行处理的（前面说明了0.33的来源），所以一个是固定的，一个是变化的，如html（虽然尽量与固定一样，当然，这是在好的情况下，比如0.33的解决，如对应显示器分辨率100%大小的比例），根本原因是因为rem一般操作与html字体大小，而我们操作他进行视口时，一般会进行js的引入，而js操作了对应的视口属性（参数），所以是绝对的固定，而其他的一般虽然说是操作视口，但是也只是操作html的宽或者高（vh）而已，当然，由于vw（vh）并不需要与@media一样需要对应，是直接的使用的，所以在不考虑误差的情况下，一般我们都会使用这个，因为比较方便，而现在，由于误差的影响并不大，所以vw，vh通常是主流的

如果说在对应js存在的情况下，视口/10px = 1rem，那么同样的，视口/100px = 1vw（vh）

那么1px = 10/视口rem，1px=100/视口vw（vh）

所以当指定像素为x时，对应的转换应该是：10x/视口rem，100x/视口vw（vh）

所以假设视口是375，那么指定为50px时，就应该是50*10/375 = 50/（375/10）=50/37.5，正好对应之前的处理

同样的对应的vw（vh）就应该是50100/375 = 50/（375/100）=50/3.75 = 5 10px

简单来说，px到rem或者vw（vh）的转换是经过多种换算的，当然，一般情况下我们会将他们先变成px，然后算出1px对应的单位值，最后进行处理，通过上面的结果，我们只需要将指定的px除以对应计算的px值即可，就如50/（375/10）=50/37.5

比如我们可以这样：

对应的less：

// out:./
*{
    margin: 0;
    padding: 0;
}

.box{
    width: (68/3.75vw);
    height: (29/3.75vw);
    background-color: red;
}

对应的html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>


    <div class="box">

    </div>

</body>



</html>

一般来说，上面的less中生成的css的对应的值可能并不能整除，所以除了考虑到其单位自身的处理方式外（拿取html还是视口），还需要考虑计算方式

当然，你如果要操作vh那么需要这样，补充less：

.box2{
    width: (68/6.67vh);
    height: (29/6.67vh);
    background-color: red;
}

对应的补充html：

    <div class="box2">

    </div>

可以发现基本是一样的，因为vh操作高度的视口，所以在变成对应的指定的29px时，需要除以其对应高度的信息才行，这样才能变成对应的单位，由于值不同，自然基本单位不同了，即只要确定了单个处理（或者说转换关系），那么你无论是否混用都行，但是需要注意，其中一个改变，那么上面的固定操作就不行，一般情况下，基本只会存在这样的操作，即宽度视口不变，但是高度视口会改变，所以如果这个时候高度还是除以6.67，那么就会出现变大或者变小的情况，如高度视口是812时，就会变大，因为你本来是要除以8.12的，但是你是6.67，少除，自然大，所以一般我们建议都使用vw，因为他基本不会发生改变

但是从这里我们可以发现，在变成px时，无论是rem还是vw（vh），基本都需要我们指定数（其中rem虽然存在js，但是也只是得到了一个rem是多少的视口的10%而已，而并不是px），所以这个时候，精准定位处理设置值的存在就有必要存在了，比如如下的less：

//out:./
@media(width:375.33px) { 
  @rootSize: 37.5rem;
  div{
    width: (10/@rootSize);
    height: (10/@rootSize);
    background-color: red;
 }
}

虽然我们前面说了，rem，vw（vh）是较好操作视口的，而@media并不好，但是由于@media的精准操作，所以他在确定数值方面是比较优秀的，因为他可以进行变化，而之前的变量基本是固定的，特别的他也并非只是操作视口，还可以操作其他的属性，虽然其他的rem或者vw（vh）也行，但是若对应的属性不是操作数值的呢，这是rem，vw（vh）所不具备的，所以我们应该重新说明一下，在操作数值方面可以说他们各有优点，但是在其他没有操作数值方面，@media是吊打rem和vw（vh），因为rem和vw（vh）没有这些功能

好了，现在我们再来编写一个项目：

首先拿取基础工程（前面的项目可能也是这样，只是没有说明而已），下载地址如下：

链接：https://pan.baidu.com/s/1yXMwuE3sf8Jli7eTzCKI_A

提取码：alsk

我们删除index.html，以及less里面的index.less，然后重新创建他们（删除内容也行）

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <!--这个导入的样式，如果里面也存在相同的，那么按照顺序，后导入的进行处理（优先级的操作，前面一般或者可能说明过了）-->
</head>

<body>

    <!-- 头部固定-->
    <header>
        <div class="top">
            <div class="left">
                <a href="#">
                    <i class="iconfont Navbar_logo"></i>
                </a>
            </div>
            <div class="right">
                <a href="#">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <!--
                    img标签的自适应，加本来图大，加自动撑开，所以造成图大就大的情况
                    所以加上download.png以及不加他，login一般会发生改变
                -->
                <a href="#" class="login"><img src="./images/login.png" alt=""></a>
                <a href="#" class="download"><img src="./images/download.png" alt=""></a>
            </div>
        </div>
        <div class="bottom">
            <div class="tab">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">动画</a></li>
                    <li><a href="#">番剧</a></li>
                    <li><a href="#">国创</a></li>
                    <li><a href="#">音乐</a></li>
                </ul>
            </div>
            <div class="more">
                <a href="#">
                    <i class="iconfont general_pulldown_s"></i>
                </a>
            </div>
        </div>
    </header>
    <!--视频-->
    <!--共计有5个菜单（头部里面的tab，比如点击首页就有一份，那里面我写了5个选择，自然有5份视频对应），应该有5份视频的div（这里是section）-->

    <!--每一个div（这里是section）都是一份视频，一份视频通常是多个视频-->
    <!--这里我们就只操作一个了，当然，可能其他菜单只是替换了section而已，了解即可-->
    <section class="video_content">

        <div class="video_list">
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集棉#19</div>

            </a>

        </div>


    </section>

    <!--按钮固定 -->

</body>

</html>

index.less：

@import "base"; //""在前端基本上与''是等价的

// @rootSize:3.75vw;
@vw: 3.75vw;
@color: #fb7299;

//头部 固定
header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    width: 100vw;
    /*
    1vw是视口1%，所以与100%是一样的，但是上面的100%是针对其父，所以与html宽度是一样的
    而vw的视口也是html，所以这个他们的样式的结果就是一样的
    */
    height: (84/@vw);
    //当操作了z-index: 1;时，如果没有设置背景颜色，那么说明没有颜色，就会操作穿透，所以这里需要加上（穿透在前面说明过了，无色一般是没有透明的，所以一般会被穿透）
    background-color: #fff;

    //top
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (44/@vw);
        padding-left: (18/@vw);
        padding-right: (12/@vw);
        // background-color: green;

        .left {
            .iconfont {
                font-size: (28 / @vw);
                color: @color;
            }
        }

        .right {
            display: flex;

            .iconfont {
                font-size: (22/@vw);
                color: #ccc;
            }

            .login {
                width: (24/@vw);
                height: (24/@vw);
                margin-left: (24/@vw);
            }

            .download {
                width: (72/@vw);
                height: (24/@vw);
                margin-left: (24/@vw);
            }
        }

    }

    .bottom {
        display: flex;
        justify-content: space-between;
        height: (40/@vw);
        border-bottom: 1px solid #eee;

        .more {
            a {
                display: block;
                width: (40/@vw);
                height: (40/@vw);
                // background-color: pink;
                text-align: center;
                line-height: (40/@vw);
                // font-size: (22/@vw);
                color: #ccc;

                .iconfont {
                    /*
                    在一个元素中操作时，通常离不开或者是按照基线的，所以由于字体图标在没有设置大小时
                    或者由于他是固定的字体大小，那么当你设置其父元素，比如这里的a元素的字体大小时
                    那么一般由于基线的原因，导致并不会到达中间，这里了解即可
                    这是因为基线会被字体大小控制，一般情况下，基线和字体大小成正相关，所以你可以看到在一个元素中改变字体大小并且处理到中间时，他还是在中间的
                    因为字体大小是那样，但是，如果他不是在这个元素中，或者他的字体大小并不是对应于这个基线，那么就不会到中间了，所以一般情况下，中间的处理通常会让子元素不会进行准确的处理
                    所以一般情况下，我们会在对应子元素操作字体设置时，为了保证正确，通常会在其父元素添加字体来操作一个中间，然后子元素也操作这个字体即可
                    当然，也可以误差一点，比如这里设置为22px的结果，否则建议结果是16px，当然考虑到大小，所以我们一般会向上偏一点，所以这里的22还是比较合理的

                    */
                    font-size: (22/@vw);
                }
            }

        }

        .tab {
            ul {
                //布局操作高度的中间是根据自身的，而行高一般可以考虑整体，所以下面的行高会考虑到，到整体中间
                display: flex;

                li {
                    padding: 0 (16/@vw);

                    a {
                        display: block;
                        height: (40/@vw);
                        line-height: (40/@vw);
                        font-size: (14/@vw);

                        &.current {
                            color: @color;
                            border-bottom: (2/@vw) solid @color;
                        }
                    }
                }
            }
        }

    }

}

//视频
//当然，在一般情况下（并不是所有情况，比如浮动，他的浮动本身是否也考虑了边界呢，实际上好像是的，所以考虑的确也会是操作了margin），脱标的margin只是操作当前位置，而不会操作其他的边界
//所以这里的需要先移动到固定定位的下面才行，而不能通过，margin来处理
.video_content {
    padding: (84/@vw) (5/@vw) 0;

    .video_list {
        display: flex;
        flex-wrap: wrap;

        a {
            width: 50%;
            padding: (8/@vw) (5/@vw);
            // background-color: pink;
            font-size: (12/@vw);

            .txt {
                margin-top: (5/@vw);
            }

            .pic {
                position: relative;

                .count {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding: (8/@vw);
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                    color: #fff;

                    i {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

具体生成的css位置自己调（搞）（前面学习过了）

现在我们来学习一个框架：

响应式：在前面我们基本也说明了响应式的设计，为了更加方便的处理，所以我们学习一下框架

在学习框架之前，先回顾一下媒体查询：

前面的媒体查询，基本知识围绕视口或者说数值来说明的，而对应的响应式并没有说明数值之外的处理，所以我们并没有体现他（媒体查询）的真正优点，因为响应式并不只是操作数组方面的属性，特别的我们还可以操作颜色等等，是否居中等等的处理，或者也可以操作一下固定的属性，如是否加上下划线等等，所以一般来说，响应式的核心其实是媒体查询（也就是说，响应式的框架的底层也就是媒体查询了，这里我们需要了解，比如Bootstrap框架的底层是确实使用了媒体查询来实现响应式设计），而rem或者vw（vh）只是在数值上的响应式而已，而并不是真正的响应式的操作方式，现在我们开始体现媒体查询的真正优点：

操作测试代码：

我们先给出之前写过的：

  <style>
    @media(width:375.33px) { 
        /*
        375.333和375.34和375.32（可以误差）其实也行，因为一般只看后面的两位小数以及在看这两位小数时，允许存在0.01的误差，所以375.333和375.34和375.32也是375.33（即375.343也可以，因为只看两个小数，所以是375.34，而可以误差0.01，所以375.34也可以是375.33或者375.35，其中满足了375.33，那么这里就会进行处理）
        */
      html {
        font-size: 40px;
      }
    }
  </style>

看看这个，实际上前面的@media可以不那么精准，而使得容易中标（防止出现小数的情况，这里也是一种解决小数的一个好的方式）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>


</head>

<body>

  <style>
    /*其实在操作像素时，大多数像素基本只会增加而不会减少（注意：并不在于显示的忽略（如考虑出现间隙，但是包括间隙在内中，总体的数值长度是偏大或者相等的，只是间隙一般考虑不显示而已），而是真实数值），所以在范围中，小数的影响可以忽略不计了*/
    /*视口小于等于768，网页背景是粉色
    max-width:768px，代表最大是768，也就是在没有超过768时，会进行处理
    */
    @media(max-width:768px) { /*相当于<=768，即最大是768*/
      body {
        background-color: pink;
      }
    }

    /*视口大于768，网页背景是红色
    min-width:768px，代表最小是768，也就是在超过768时，会进行处理
    */

    @media(min-width:768px) { /*相当于>=768，即最小是768*/
      body {
        background-color: red;
      }
    }

    /*特别注意：他们都包括768，并且媒体查询看的是html宽（可以看成是逻辑分辨，一般来说，不是物理分辨的都是逻辑分辨），而不是视口（可以看成是物理分辨），那么就需要看先后顺序了，也就是说，当视口宽度为768时，上面的是出现red，他们换一个位置，那么就是粉色了*/
  </style>


</body>

</html>

由于他的优点很好，所以一般情况下max-width和min-width是使用的最多的，当然，还存在高度，只是一般高度都是自适应，并不方便进行某些处理，且大多数操作的都是宽度，所以max-width和min-width是在媒体查询@media中是基本最重要的

当然，如果一个宽度他们都没有，那么说明不会进行处理，所以就是默认的背景颜色（起始没有进行处理的颜色）了

上面的处理在框架中可以看到他的确是核心原理，在学习时会明白的

上面的测试代码中，说明了顺序问题，实际上在考虑一个宽度（比如他的768）被多个样式影响时，就会考虑顺序问题，这在多个操作时会有体现：

  <style>

    @media(min-width:468px) {
      body {
        background-color: pink;
      }
    }



    @media(min-width:768px) {
      body {
        background-color: red;
      }
    }
    
    </style>

你可以交换上面的@media位置，可以看到对应的结果了，所以在以后我们如果要确定一个有顺序（如宽度）的操作时，那么样式也需要有顺序，而最好不要交换样式顺序（层叠性出现的根本原因就是先后的执行顺序，所以这里也可以说成是层叠性）

其实@media还有其他的写法：

@media 关键词 媒体类型 and (媒体特性) { css代码 }

之前我们写的都是媒体特性，我们没有写的基本都是：关键词媒体类型 and，一般不写的话，他们是默认的值

现在我们来了解一下：

关键词一般有这些：and only not，上面的@media 关键词媒体类型 and (媒体特性) { css代码 }中and也是关键词

媒体类型一般有这些：

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

媒体特征一般有这些：

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

这些操作一般我们只会操作特征，当然，我们可以给出测试案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>


</head>

<body>

  <style>
    /*
这里需要注意很多：
首先：and是一个连接媒体类型或者媒体特征的处理，相当于都满足，即如java的&&的处理，而only相当于是否支持媒体查询，一般情况下，我们也会加上了
当然，写上了only，自然不能接着写上and了（报错，因为关键词基本是一个连接媒体类型或者媒体特征的处理），所以也就不能连接了
而screen则也是条件，因为媒体特征不也是一个条件吗，&&连接的两方不就是一个判断条件的信息，而这个就是代码你的设备信息，也就是说，我们可以选择你的浏览器是否支持这个
并且考虑是否是一个对应的设备，并且在都满足的情况下，可以再来确定是否是在这个范围

当然，现在的处理基本上，对应的关键词（除了and），还有媒体类型，只能写在前面了，也就是第一个，后面的只能使用and连接了，这是因为其他的，如关键词或者类型，基本只需要判断一次即可，连接没有任何意义
所以才会有这样的处理
      如果就是单纯的写上媒体特征，而没有其他的，那么and就不能单独写，因为写上and，基本就必须需要其他的类型（写在（最）前面，且基本只能是一个）或者说特征

*/
    @media only screen and (min-width: 768px) and (max-width: 968px) {
      body {
        background-color: red;
      }
    }

    /*上面就能在一个范围中间进行处理了，而不是一方的无限延伸或者到最小的延伸
一般浏览器是存在最小的缩小窗口的，就如视口或者html宽基本是没有0的，显示生活中，存在0长度的屏幕吗
而0长度的屏幕不就是没有屏幕吗，手动滑稽🤭
*/
  </style>


</body>

</html>

当然，这些了解即可，我们其实还可以使用link方式：

<link rel="stylesheel" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

前面在满足条件时，可以让样式进行生效处理（所以，基本上能够被样式影响的，基本都可以处理，比如可以隐藏，放大，位移等等操作），同样的他也可以用于样式的表（css文件），具体的操作是一样的（其中逻辑符其实也就是关键词）

现在我们举个例子：

a.css：

body {
    background-color: red;
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--标签的属性是不分顺序的，包括xml，除非某些情况需要，那么一般对应的也会提供解决这样问题的功能，所以总体来说还是无序的-->
    <link rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 968px)" href="./a.css">
</head>

<body>

</body>

</html>

当然，我们说过了对应的媒体查询是操作html的，所以只需要将显示窗口改变即可，而非要是整个窗口

当然，也会考虑层叠性，这里我们只需要认为，满足后，相当于加上该样式的理解就行了

说明了这么多，我们只是说明其响应式的相对底层操作，但还并没有说明框架（对其操作的封装），现在我们来真正的说明框架

BootStrap：

大多数封装了前端的代码的框架我们一般也会称为UI框架

UI框架概念就是即将常见效果进行统一封装后形成的一套代码，例如：BootStrap

作用：

基于框架开发，效率高，稳定性高，因为封装好的，所以效率高，并且已经提供给大量用户使用的，就是基本稳定的

我们可以访问这个网站看看一些框架：https://www.bootcss.com/

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果

我们可以从上面的网站中下载，也可以从下面的网址中拿取：

链接：https://pan.baidu.com/s/1wy4p6vvuOuBJ_NAEvcH1Og

提取码：alsk

当然一般来说，一个js或者css可能都存在远程的地址，具体需要被提供才可，可以选择百度

我们来举个使用该框架的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--
bootstrap.min.css
是
bootstrap.css
的一种压缩版，注意这个压缩并不是替换什么信息来压缩，就只是单纯的去掉他们的间隙，或者说去掉回车和空格（自己可以看看即可）
-->
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<body>
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
    <!--
    在bootstrap中，该样式是如下的
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

-->
    <div>1</div>
    <!--
    大多数情况下，css样式都会存在前缀container的，所以通常container一般作为bootstrap的起始操作，即我们的大多数代码都会写在该样式中（但是也并非所有哦，好像对应的占用12个格子哪里就可以不再里面，因为他们基本都是单独的（浮动））
    来保证会起作用
当然，bootstrap里面一般也包括了媒体查询，你看一下源码即可，这个时候，你可以选择缩小窗口，一般可以发现div的宽度可能会发生变化
-->
    <div class="container">1</div> <!--他存在宽度哦，要不然，不会存在两边的间隙
因为在没有宽度的情况下，左右的auto是不会起作用的，所以他存在宽度
-->
    <!--当然，随着bootstrap的版本不同，他的样式可能也会不同，具体看版本吧，但是大致的作用是基本一样的，所以可以选择替换版本，但是也并不能保证一样，所以尽量不替换就不替换-->
</body>

</html>

远程地址可以试一下这个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

当然，如果对方没有提供了，自然我们也不能使用这个了（虽然他的版本可能与我们的不同，导致样式可能会有点改变，但是大致的作用是基本一样的，所以也可以放心的引入，但是也并不能保证一样，所以尽量不替换就不替换）

BootStrap栅格系统：

栅格化是指将整个网页的宽度分成若干等份，BootStrap3默认将网页分成12等份（注意：对应的分成，一般是对container的宽度进行分成的）

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%

一般分别使用.row类名和 .col类名定义栅格布局的行和列

注意:

1：container类自带间距15px（内）

2：row类自带间距-15px（外）

3：col相关的也是内（这个时候，在没有写上他时，内容靠左边界，否则相当于没有写row）

我们来看几个案例吧，来进行进一步的理解

在这之前，我们首先说明一下，为什么上面的边界基本是768，992，1200：

其实他基本是我们大多数屏幕的显示，而正是因为大多数，所以以这些默认值来处理，当然，也可以通过源码修改这些默认的值的

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<body>
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
    <div class="container">
        <!--
            当然，col-lg在图片中说明了，响应的情况是>=1200px，也就是说，只有在你的窗口或者说屏幕的宽度>=1200，那么这些样式才会进行处理
            这里其实也就是媒体查询的效果
            这个时候，对应的容器宽度，也就是container的div的宽度也是变化的，因为他也操作了媒体查询，并且与之一样的
            那么很明显，一个临界点操作了很多东西，当操作这些东西后，由于你的样式写上了对应的值，那么会根据样式信息或者js信息的处理（bootstrap有js的）
            来进行占用情况的处理，所以下面的处理就是四个一行
            当然，这里也存在一个对第一个元素的处理，如果你没有满足，这个临界点，那么可能其他的元素会看起来少点（自己缩小宽度就知道了）
            这个原因就是上面div设置的height: 50px;，可能他是导致第一个出现特殊情况的一个bug或者是另外一个操作，这里我们了解
            即这种不需要理会

        -->
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>

        <div class="col-lg-5">5</div>
        <div class="col-lg-3">6</div>
        <div class="col-lg-3">7</div>
        <div class="col-lg-3">8</div>

        <div class="col-lg-3">9</div>
        <div class="col-lg-3">10</div>
        <div class="col-lg-3">11</div>
        <div class="col-lg-3">12</div>
        <!--如果你占用的格子在该行中并没有了，那么换行继续占用，总格子是12个格子-->
        <div>20</div> 
        <!--对应的col-lg-3类似于浮动，在源码中也的确是如此的，所以这个20所在的位置也是合理的
比如对应的源码可能是如下：
@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
..

当然，也的确操作了满足情况
为什么没有使用flex，我们要知道flex在一些浏览器中可能操作不了，而框架是需要兼容性比较高的，所以使用浮动是好的选择，而不是flex


而从这里我们也可以看出，他只是将所有的都定义好了，也就是1到12，由于12相当于100%，那么12也就相当于<=0或者>12的操作，即col-lg-121或者col-lg--1或者col-lg-0
只是他可能并没有其他的属性操作，比如：
上面是所有的情况
..
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}


所以bootstrap也的确封装了css操作（并且是直接的给出对应的数字，即1到12的样式的）
-->
    </div>
</body>

</html>

我们继续看案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<body>
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
    <!--
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

    -->

    <!--区别是container-fluid基本没有设置宽度，所以在前面才说：
    .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%
    -->
    <div class="container-fluid">1</div>
    <div class="container">2</div>
</body>

</html>

前面的注释中存在"这个原因就是上面div设置的height: 50px;，可能他是导致第一个出现特殊情况的一个bug或者是另外一个操作，这里我们了解"这个问题，那么有什么办法可以解决，我们看如下：

还继续看案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<body>
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
    <div class="container">
        <!-- 创建一个行（row） -->
        <div class="row">
            <!-- 划分列（column） -->
            <div class="col-md-4">
                <p>这是第一列</p>
            </div>
            <div class="col-md-4">
                <p>这是第二列</p>
            </div>
            <div class="col-md-4">
                <p>这是第三列</p>
            </div>
            <div class="col-md-4">
                <p>这是第三列</p>
            </div>
        </div>
    </div>
</body>

</html>

row可以解决这样的情况，一般是因为在里面需要按照row的类来进行处理（或者进行统一），导致其他的类可能被其覆盖，使得并不会出现相应的问题，当然，具体是什么情况，可以看源码来了解，这里我们只需要知道即可（因为源码那么多，谁也不能保证他是否影响了其他的地方，所以这也是为什么会出现row类的情况，即需要层次的进行，这也是bootstrap出现row的一个原因）

经过测试，是因为：

margin-left: -15px;
margin-right: -15px;

所以，只要你的属性存在这个，就能解决：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<body>
    <style>
        div {
            height: 50px;
            background-color: pink;
        }

        .roww {
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
    <div class="container">
        <!-- 创建一个行（row） -->
        <div class="roww">
            <!-- 划分列（column） -->
            <div class="col-md-4">
                <p>这是第一列</p>
            </div>
            <div class="col-md-4">
                <p>这是第二列</p>
            </div>
            <div class="col-md-4">
                <p>这是第三列</p>
            </div>
            <div class="col-md-4">
                <p>这是第三列</p>
            </div>
        </div>
    </div>
</body>

</html>
</body>

</html>

实际上他只是将整体内容统一而已，而不是由于第一个与其他不同导致不同，所以他就是统一的处理

具体情况在于他们三个的样式：

<!--

container的样式：
.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


row的样式：
.row {
  margin-right: -15px;
  margin-left: -15px;
}


col相关的样式：
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

他们都是15（所以可以统一）

单纯的存在container，那么内容有内边距，这个时候，加上row在里面，外边距抵消，靠左边界，如果不是加上row，而是col
由于存在两个边界的处理，并且浮动是在于内容来的，所以存在第一个宽一点
而这个时候加上row，并且里面加上col，由于row在边界，所以相当于统一处理了，按照这样的操作，那么第一个是特别的也是正常的

-->

BootStrap预定义了大量类用来美化页面，我们需要学习这些类，那么就需要一些文档或者手册，这就需要开发出这个框架的人给出的了，而开发出这个框架，或者说，开发一个框架通常都会有官网（除非是小众的框架，或者个人开发的），官网掌握手册的查找方法是学习全局样式的重点

网站首页（https://www.bootcss.com/） → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

通过上面的步骤，可以选择学习样式的使用

当然，既然我们知道他是封装了，那么如果可以的话，还是建议不用看其源码，直接使用即可（虽然上面为了解决问题而看源码，但是实际上这些问题我们按照顺序使用类，自然也不会出现）

现在我们看看如何操作表格：

先给出一个原本的表格操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

</html>
</body>

</html>

操作这个框架的表格操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
    <table class="table">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

</html>
</body>

</html>

看看效果吧

也可以修改这样：

<table class="table table-striped">

当然，他底层是依赖与:nth-child的CSS选择器实现的，所以如果一些浏览器并不支持这个，那么可能并没有效果，比如：这一功能不被 Internet Explorer 8 支持（这个在前面的BootStrap3中文文档中也会提到的）

也可以继续修改：

 <table class="table table-striped table-bordered">

这里有三个样式：

<!--
table：代表基本的表格样式（位置而已，所以后面两个样式并不依赖于这个），可以选择只加上他来看看效果
table-striped：隔行变色，这个时候可以发现，第二行起始（4，6，8...），会改变背景颜色
table-bordered：加上边框
他们都可以单独的使用，即互不影响


-->

可以继续修改：

<table class="table table-striped table-bordered table-hover">
    
    <!--
table-hover：悬停在对应的一行时，会改变颜色，单独使用（在bootstrap中，写在同一个标签的样式基本是互不影响的（只是基本），这实际上在css中也是如此（只是对比其他的框架中，bootstrap可能更加的互不影响而已，这是一种趋势，因为这样最好维护），除非他受两个样式影响，但是大多数并不是这样的，所以注意即可）
当然，还存在这样的样式：
.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}
一般他是作为table的父级的，且需要table（他的变化的宽度，需要宽度（overflow-x: auto;））
-->

当然，还有其他的样式（大多数样式并不依赖于视口，所以也并非所有的处理都会操作视口的，但是最基本的响应式是必须要会的，比如操作百分比的处理），具体可以看中文文档，这些记住并没有意义，查看文档即可（大多数的知识，最好根据文档来，因为单纯的靠记忆，是学习不了多少知识的，需要学会方法，除非他本来就需要记忆，如记单词等等）

当然，除了表格外，我们也可以学习一些按钮，但是在bootstrap中，并不是所有的样式都可以操作按钮的，一般只能是这些：

为 <a>、<button> 或 <input> 元素添加按钮类（button class），即可使用 Bootstrap 提供的样式，当然，可能还有其他，了解即可

一般按钮的样式有很多，我们通常会操作这些：

<!--
btn：基准样式
btn-info，btn-success：设置按钮背景色
btn-block：设置按钮为块元素
btn-lg，btn-sm，btn-xs：设置按钮大小
-->

还有这些：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <!--他们的样式基本都是互不影响-->
  <button type="button" class="">我在这里</button><br>
  <button type="button" class="btn">我在这里</button><br>
  <button type="button" class="btn btn-info">我在这里</button><br>
  <button type="button" class="btn btn-success">我在这里</button><br>
  <button type="button" class="btn btn-block">我在这里</button><br>
    <!--大到小，前面也有类似的lg，sm，xs的显示，如栅格系统-->
  <button type="button" class="btn btn-lg">我在这里</button><br>
  <button type="button" class="btn btn-sm">我在这里</button><br>
  <button type="button" class="btn btn-xs">我在这里</button><br>
  <button type="button" class="btn btn-default">（默认样式）Default</button><br>
  <button type="button" class="btn btn-primary">（首选项）Primary</button><br>

  <button type="button" class="btn btn-success">（成功）Success</button><br>

  <button type="button" class="btn btn-info">（一般信息）Info</button><br>

  <button type="button" class="btn btn-warning">（警告）Warning</button><br>

  <button type="button" class="btn btn-danger">（危险）Danger</button><br>

  <button type="button" class="btn btn-link">（链接）Link</button><br>

</body>

</html>

之所以基本只会给a，button，input提供支持，是因为这样基本存在样式是由他们一起进行处理的，这里了解即可

上面的颜色的处理一般与其内容相关，注意即可，当然，还有大量的操作，这里我们看中文文档即可，也就没有必要这里写上了，因为没有意义（总有忘记的时候），但这里给出一些比较常用的操作：

表单处理：

<!--
form-control：设置表单元素input，select，textarea的样式
checkbox 和 radio：设置复选框和单选框的样式
form-inline：设置表单元素水平排列
disabled：设置表单禁用状态样式
input-lg，input-sm，input-xs：设置表单元素的大小（一般并没有input-xs）
-->

案例（具体的使用方式可能并不是参照测试的，这里只是看看效果）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <form action="#" method="post">
    <input type="text"> <!--有时候，由于引入了对应的css，他可能默认处理了基本样式，这里你可以选择去掉引入的css看看这个结果-->
    <input type="text" class="form-control">

    <input type="checkbox" value="">
    <input type="checkbox" value="" class="checkbox"> <!--发生了改变-->
    <input type="radio" value="">
    <input type="radio" value="" class="radio"> <!--发生了改变，因为有其样式的处理-->
    <!--
      比如：
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
当然，还有很多，所以前端的（如css，js，html等等的封装处理）框架在一定程度上只需要知道效果即可，而并非要理解源码（除非有时间）
    -->
    <div class="form-inline">
      <input type="checkbox" value="" disabled>
      <input type="checkbox" value="" class="checkbox">
      <input type="radio" value="">
      <input type="radio" value="" class="radio">
      <input type="text" value="" class="input-lg">
      <input type="text" value="" class="input-xs">
      <input type="text" value="" class="input-sm">
      <input type="text" value="" class=""> <!--相当于input-xs，但是在源码中，并没有这个选项，所以并没有input-xs-->
    </div>
  </form>
</body>

</html>

实际上通过对该框架的文档说明，我们应该可以得到如下的操作：

<body style="padding:100px;">
  <form>
    <div class="form-group">
      <label>输入框</label>
      <input type="text" class="form-control" placeholder="请输入文本...">
    </div>
  <!--class="form-group"基本样式操作，你去掉就知道了，这基本是一下模板样式-->
    <div class="form-group">
      <label>文本框</label>
      <textarea class="form-control" cols="30" rows="5"></textarea>
    </div>

    <div class="checkbox">
      <label> <!--并不影响实际上样式处理-->
        <input type="checkbox"> 抽烟
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 喝酒
      </label>
    </div>
    <div class="checkbox">

      <input type="checkbox"> 喝酒

    </div>
    <hr>
    <div class="checkbox-inline">
      <label>
        <input type="checkbox"> 洗澡
      </label>
    </div>
    <div class="checkbox-inline">
      <label>
        <input type="checkbox"> 烫头
      </label>
    </div>
    <hr>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="checkbox"> 音乐
      </label>
      <label class="btn btn-primary">
        <input type="checkbox"> 体育
      </label>
      <label class="btn btn-primary">
        <input type="checkbox"> 美术
      </label>
      <label class="btn btn-primary">
        <input type="checkbox"> 电脑
      </label>
    </div>
    <hr>

    <label class="radio">
      <input type="radio" name="sex"> 男
    </label>
    <label class="radio">
      <input type="radio" name="sex"> 女
    </label>
    <hr>
    <label class="radio-inline">
      <input type="radio" name="gender"> 男
    </label>
    <label class="radio-inline">
      <input type="radio" name="gender"> 女
    </label>
    <hr>

      <!--class="btn-group"基本样式操作，你去掉就知道了-->
    <div class="btn-group" data-toggle="buttons">
        <!-- data-toggle="buttons"去掉原生按钮的样式，需要对应js操作出复选框效果，你删除他就知道了-->
      <label class="btn btn-primary">  <!--他也可以操作按钮-->
        <input type="radio" name="gender"> 男
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="gender"> 女
      </label>
    </div>
  </form>


</body>

实际上大多数的标签，如果需要学习框架，在不考虑学习源码的话，我们只需要知道他的作用即可，但是由于作用对于具体细节来说，我们可能并不知道，这就需要模板的处理了（比如：大多数情况下，我们会向上面的这样的处理表单，而并不需要其中，如btn-group的模板（或者说版心）样式的具体作用是什么）

图片：

<!--
img-responsive：图片自适应
img-rounded：图片设置圆角
img-circle：图片设置正圆
img-thumbnail：图片添加边框线
-->

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <style>
    div {
      width: 700px;
      height: 400px;
      background-color: pink;
    }

    img {
      width: 100px;
    }
  </style>
  <div>
    <img src="../images/1.jpg" class="img-responsive">
    <!--本质是不会超过其父元素的宽度
  .img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
  -->
    <img src="../images/1.jpg" class="img-rounded">
    <img src="../images/1.jpg" class="img-circle">
    <img src="../images/1.jpg" class="img-thumbnail">


  </div>
</body>

</html>

辅助类：

<!--
pull-right：强制元素右浮动
pull-left：强制元素左浮动
clearfix：清除浮动元素的影响
text-left：文本左对齐
text-right：文本右对齐
text-center：文本居中对齐
center-block：块元素居中
-->

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <style>
    .a {
      width: 400px;
      height: 400px;
      background-color: red;
    }

    .b {
      width: 50px;
      height: 50px;
      background-color: black;
    }

    .c {
      width: 150px;
      height: 50px;
      background-color: pink;
    }
  </style>
  <div class="a">
    <div class="c"></div>
    <div class="b pull-right">
      <!--
其实源码很简单，所以说在不考虑学习源码的话，我们只需要知道他的作用即可
      .pull-right {
  float: right !important;
}
    -->

    </div>
    <div class="b pull-left">

    </div>

  </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <style>
    .top {
      margin: 0 auto;
      width: 1000px;
      background-color: pink;
    }

    .bottom {
      margin: 0 auto;
      width: 1400px;
      height: 100px;
      background-color: red;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: #ccc;
    }

    .right {
      float: right;
      width: 790px;
      height: 400px;
      background-color: skyblue;
    }
  </style>
  <div class="top clearfix"> <!--加上即可-->
    <div class="left"></div>
    <div class="right">1</div>
  </div>
  <div class="bottom"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <style>
    div {
      width: 400px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="text-left">
    1
  </div>
  <br>
  <div class="text-right">
    1
  </div>
  <br>
  <div class="text-center">
    1
  </div>
  <div class="text-center center-block">
    1
  </div>
</body>

</html>

一般情况下，他的（类或者框架）处理虽然是封装了一些样式，但是我们可以发现，他的类名是非常友好的，这也就是导致，我们并不需要再次的编写相关操作的样式了，因为他这个框架提供了，我们直接使用即可

布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容，再前面从表格开始，基本上并没有主要的视口操作，因为他们基本只需要操作基本的百分比处理就行，主要是他们并不需要视口的相关处理，就如，一个按钮有必要进行处理吗，这是因为有对应的处理，比如版心的处理，当然，再一定程度上，他可能也会改变按钮的大小，只是现在不会）

当然，这也不得不思考如果单纯的考虑1200px的临界点，那么如果超级超级超级的大屏幕岂不是会显示的小了，所以框架只能是主流（固定的三个大小，大小是三个临界点，但是范围是四个属性），而不能操作特殊，如果需要特殊，还是需要回到源码的原始媒体处理，即底层的处理（即需要手动的写上@media进行处理了）

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body style="padding:100px;">
  <style>
    .a {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
      margin-right: 10px;
    }

    .b {
      width: 500px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div class="b">
    <div class="a visible-xs">1</div>
    <div class="a visible-sm">2</div>
    <div class="a visible-md">3</div>
    <div class="a visible-lg">4</div>
  </div>
  <br>
  <div class="b">
    <div class="a hidden-xs">5</div>
    <div class="a hidden-sm">6</div>
    <div class="a hidden-md">7</div>
    <div class="a hidden-lg">8</div>
  </div>

</body>

</html>

不断的调整窗口大小（也可以说视口大小），观察数字变化与图片里面的表变化就知道了

Bootstrap自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能，如果说，前面的样式是操作一下基本信息，那么这个组件的样式可以是一个整体处理（比如我们通过css完成一个下拉菜单，那么bootstrap就可以通过一些样式直接的完成处理，简单来说，bootstrap的组件就是一个css的样式（一般可能也包括js，html等等）处理集合（必须足够多，否则少量的集合，比如根据视口的这样的处理，一般我们并不会认为是组件），而不是其他的单独且互不影响的小样式操作（小的封装并不决定是可以说是组件的），如前面的pull-right）

当然，对组件的定义并非如此，可以是html的代码（如果是其他语言，那么就是他们的代码集合，可能也包括很多）集合（前端一般是包括css，js，html，其他的语言自然也是他们的总体包括了，一般我们也会简称为html代码集合（一般并没有js），因为他们都在html里面的）等等（如vue组件，当然，组件的信息可以被选择的读取，如vue组件（他并非是html的结构）），这些涉及到集合的，基本都可以用组件来定义，当一个组件由多个集合控制，比如组件是html结合和css结合，并且也是由js结合（这是主要的），这个时候，我们也会称这个整体集合为一个插件，而非组件（虽然也行，如vue组件）

学习开始：

首先是下拉组件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!--jq需要在前面，否则下面的js用不到，会导致不会起作用-->
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body style="padding:100px;">
  <div class="dropdown">
    <!--
      如果你加上了data-toggle="dropdown"，一般可以不写dropdown-toggle的类型，他们的作用基本是相同的，一般代表可以操作点击时的隐藏和显示
      但是dropdown-toggle还是可以删除，或者单纯的他还是不能隐藏和显示，在某些版本下，data-toggle="dropdown"一般需要这个类型，但是现在基本不需要了
      
    -->
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="true"> <!--这两个一般是辅助的，通常在这里并没有什么用，可以删除-->
      Dropdown
      <span class="caret"></span>1
      <span class="caret"></span>1
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <!--辅助：aria-labelledby="dropdownMenu1"-->
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li> <!--线，这个role="separator"也是辅助，可以删除-->
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <!--上面只是操作div，而不是form，所以他一般需要js的属性，其中一般需要jq（有些bootstrap的操作（如js），是用到了jq的，比如这里就用到了）-->
  <form action="#" method="post">
    <select>
      <option>2</option>
      <option>A型</option>
      <option>B型</option>
      <option>C型</option>
      <option>O型</option>
    </select>
  </form>
</body>

</html>

<!--一般情况下，只有在后面的<ul class="dropdown-menu"才会进行处理，所以如果存在两个ul，其中一个在后面，那么后面的进行显示隐藏-->

然后是导航：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body style="padding:100px;">
    <!--导航-->
  <ul class="nav nav-tabs"> <!--样式的处理-->
    <!--辅助：role="presentation"，一般来说在这里包括前面的辅助只是存在操作进行关联的，一般这里包括前面我们并没有进行处理，所以基本并没有什么作用（即可以选择删除看看，当然，最好测试一下）-->
    <li role="presentation" class="active"><a href="#">Home</a></li> <!--class="active"给出一个样式-->
    <li role="presentation"><a href="##">Profile</a></li>
    <li role="presentation"><a href="###">Messages</a></li>
  </ul>

    <!--路径导航-->
  <ol class="breadcrumb"> <!--样式的处理-->
    <li><a href="##">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
    <li class="active"><a href="#">Library</a></li>
    <li><a href="#" class="active">Library</a></li>
    <li>22</li>
    <li class="active">22</li> <!--a的样式一般覆盖了这个class="active"的样式了，一般是颜色-->
  </ol>
</body>

</html>

我们需要注意，在一行使用bootstrap时，与我们写的js进行关联时，一般我们只会修改其需要的内容（比如上面导航中的li标签），而不会修改样式属性，所以框架与框架之间最好不要修改对方的关键东西

字体图标：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body style="padding:100px;">

  <!--字体图标本质上也是css的处理，bootstrap自然也存在-->
  <i class="glyphicon glyphicon-user"></i>
</body>

</html>

插件：

插件的使用步骤：

引入BootStrap样式，引入js文件：jQuery.js + BootStrap.min.js，操作HTML结构，并适当调整结构或内容

以前面的下拉菜单为例子（前面的下拉组件若没有操作js的话，就是组件的说明，而不是插件了）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body style="padding:100px;">
  <div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown trigger
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      ...
    </ul>
  </div>
</body>

</html>

其中，他的起始代码一般在前面的中文文档中可以找到并拿取的，还有轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body style="padding:100px;">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <!--原点-->
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <!--图片自己加上，里面的轮播显示与图本身相关-->
        <img src="../images/1.jpg" alt="">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../images/bg.png" alt="">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      ...
    </div>

    <!-- Controls -->
    <!--位置移动-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</body>

</html>

插件的代码由于封装了很多很多，所以我们只需要使用即可，而并非需要每个标签都看看源码（如果需要的话），比如轮播图

轮播图：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <!--
一般bootstrap的轮播图需要jq
-->
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <!--在一定情况下，我们最好还是建议将js放在最后，因为有些处理可能是需要先读取的（虽然一般也会存在设置读取完再处理的）-->
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body style="padding:100px;">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <!--原点-->
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <!--图片自己加上，里面的轮播显示与图本身相关-->
        <img src="../images/1.jpg" alt="">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../images/bg.png" alt="">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      ...
    </div>

    <!-- Controls -->
    <!--位置移动-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</body>

</html>

但是，对应的data-slide-to虽然是指定位置，只是有时候他并不能确定，这是由于他可能只是一个提示的说明了，或者对应的版本没有这个样式了，具体可以百度

现在我们写一个项目：

先拿取下面的项目文件：

链接：https://pan.baidu.com/s/16nO3nidxBP3uiDXgESzkVg

提取码：alsk

把内容拿取，到如下：

进入上面的箭头指向的目录在，先运行他的index.html看看效果

然后，我们将less目录下面的index.less的内容删除（设置好对应的文件生成位置，即改变css目录下的对应文件即可），然后将index.html覆盖成如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

</body>

</html>

现在我们开始补充，首先在index.html中（一般代表body标签）加上如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./uploads/banner_1.jpg" alt="">
        <div class="carousel-caption">
          1
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_2.jpg" alt="">
        <div class="carousel-caption">
          2
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_3.jpg" alt="">
        <div class="carousel-caption">
          3
        </div>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>

</html>

然后在对应的less（index.less）中加上如下：

//banner
.carousel {

    img {
        height: 100% !important;
    }

    @media(max-width:992px) {
        .item {
            height: 400px;
        }
    }

    @media(max-width:768px) {
        .item {
            height: 250px;
        }
    }

    @media(min-width:992px) {
        .item {
            height: 500px;
        }
    }

}

.navbar-default {
    //一般来说，这个只写一个，一般代表是一个颜色，只是他一般代表rgb(0, 0, 0, 0)的简写而已，虽然0透明度，无论什么颜色都无关紧要
    background-color: transparent;
    border: 0;
}

对应的html是如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!--头部-->
  <!--操作导航条，有些可能是一个辅助，但是基本上我们需要这样写，因为是组件-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="./images/logo.png"></a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>

        </ul>
      </div>
    </div>
  </nav>

  <!--头部-->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./uploads/banner_1.jpg" alt="">
        <div class="carousel-caption">
          1
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_2.jpg" alt="">
        <div class="carousel-caption">
          2
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_3.jpg" alt="">
        <div class="carousel-caption">
          3
        </div>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>

</html>

有时候我们需要定制一些样式，比如，上面的我们执行后，给这个地方添加数据：

 <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
    

        </ul>

然后缩小视口（或者说宽度，以及显示窗口），可用发现只有最小的时候，才会折叠，并且在中间大小时，都换行了，我们如果需要在中间大小就折叠的话，可用定制样式，那么我们需要操作如下：

首先到中文文档中可用找到定制这个地方，然后操作如下：

操作这个依据一般可用在中文文档的组件中找到导航条的文档说明，他里面就有写，我们修改如下：

可以全局搜索（ctrl+f），一般浏览器都有这个功能（上面的就算是这样的），之前的md是sm的，这里修改成了md了（前面的边界，应该知道md代表992的），然后再下面点击编辑和下载，将下载好的里面的，对应的css覆盖掉我们的css，那么就完成了（这个时候可以执行看看前端的页面结果，当然，具体的源码就不用看了（如果可以的话））

这样的操作就能保证，由于源码太难看了，或者不方便修改，所形成的动态生成源码的处理，这样是否在拿取对应的源码时，像是一个定制的意思呢

接下来我写真正的显示，在html中补充如下：

  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  <!--上面只是给出一个基础的操作，所以一些代码就不补充了，现在我们来补充真正的代码-->
  <!--开源项目-->
  <div class="project">
    <h3 class="h2">OpenSource/开源项目</h3>
    <p>种类众多的开源项目，让你爱不释手</p>
    <div class="container">
      <!--alt+鼠标左键，可以多次选择，可以自己测试-->
      <div class="col-xs-12 col-sm-6 col-md-3">1</div>
      <div class="col-xs-12 col-sm-6 col-md-3">1</div>
      <div class="col-xs-12 col-sm-6 col-md-3">1</div>
      <div class="col-xs-12 col-sm-6 col-md-3">1</div>
    </div>
  </div>


  <!--开源项目-->

对应的less中加上如下：

.navbar-default {
    //一般来说，这个只写一个，一般代表是一个颜色，只是他一般代表rgb(0, 0, 0, 0)的简写而已，虽然0透明度，无论什么颜色都无关紧要
    background-color: transparent;
    border: 0;
}

//开源项目
.project {
    padding-top: 30px;
    text-align:center;
}

在补充less：

//开源项目
.project {
    padding-top: 30px;
    text-align:center;
    .container{
        div{
            a{
                display: block;
                height: 200px;
                background-color: pink;
            }
        }
    }
}

补充html：

  <div class="project">
    <h3 class="h2">OpenSource/开源项目</h3>
    <p>种类众多的开源项目，让你爱不释手</p>
    <div class="container">
      <!--alt+鼠标左键，可以多次选择，可以自己测试-->
      <div class="col-xs-12 col-sm-6 col-md-3">
        <a href="#">1</a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <a href="#">2</a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <a href="#">3</a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <a href="#">4</a>
      </div>
    </div>
  </div>

bootstrap大多数情况下，看看文档即可，并且我们也几乎难以记住这些样式，那么文档就是一个好的代码记录了（到后面，其实大多数业务代码都是网上找的，只有关于算法相关的一般需要结合实际情况自行编写，因为也几乎找不到（当然以后是不确定的，以后可能会找的到的））

一般来说，响应式并非符合所有的网站，虽然响应式只需要一套代码即可在手机，电脑上处理，但是若网站的功能足够多，或者足够的不可缺，那么响应式是做不到在小屏幕上的响应的，这个时候应该不能操作响应式，或者说到极限了，最主要的是，不可缺的功能由于太过小，导致看不到就有点麻烦，所以在那个时候大多数是需要我们手动的移动的（不操作响应式，允许超过屏幕），更加简单的说，内容少的才会考虑做成响应式的，而内容多的，一般就会写成几套网站，也就是pc一个移动一个（响应式可以说是解决内容少的多套代码，来作为一套代码，只是内容多的难以完成变成一套代码）

posted on 2023-10-21 15:46 改变全世界阅读(24) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

6666HERO

2-CSS

CSS

接下来开始学习CSS，最好有点基础

一般情况下，他们是有优先级的，内部（内部的style）大于外部（style），大于更加的外部（link），一般就近原则

内联 > 内部（@import无论先后都比其他内部优先级低，但是比外部大） > 外部（第一章博客的csdn的第45章博客有具体说明）

在后面说明优先级时还会具体的说明

这里说明前面的"相同的样式只看样式的顺序（覆盖的，自然也包括里面的，这里在后面会说明）"

当然，根据顺序，可以进行覆盖对应的样式，或者被覆盖，一般来说该覆盖是覆盖相同操作的样式的，可以自己测试

65.467是宽度，0是高度（行高就是最终的高度，即他就是行高）

这里给出上下间距的图：

也就是说，一个字的真正高度就是对应的间距和字的高度组成的，简称为行高（真正的高度是行高）

说了这么多，实际上行高就可以这样的说明，就是代表显示的高度，且从标签内容左上角开始（显示是这样的），既然是显示，那么并不会绝对比父元素的高度小，可以大的

我们可以操作简写的代码，在vscode中可以这样写：

自己来测试吧

实际上标签就是一些给初始必须存在的基本样式（计算样式）以及容器下并加上其他样式（修改）的集合体，那么自然我们也可以通过样式来进行改变

css存在继承属性（继承性），也就是说，父标签操作文字颜色，子标签可以得到，一般文字控制属性都可以继承（之所以这样的说明，是因为并不是所有的属性都会继承的）

我们可以通过检查来框框是否继承

优先级：

在前面我们给出了一个优先级，但是只是一部分，现在我们来看看他的内容：

优先级公式：继承 （默认一般比他继承要小，但是有些比继承大）< 通配符选择器（*） < 标签选择器（@import最低） < 类选择器（class） < id选择器（id） < 行内样式（标签里面的style） < !important

当然，任何优先级都会比计算样式高，包括默认

一般来说，继承是比默认小的，有些情况可能是因为浏览器做了多余的操作（如隐藏的标签选择器等等），使得看起来默认比继承大了，这里我们了解即可

注意点：

!important写在属性值的后面，分号的前面

!important不能提升继承的优先级，当对应的属性是继承的时候，那么对于继承者来说该!important相当于没有操作，而不是继承者则是操作的，标签因为不是他自己的，即对应的操作只是其父（继承的父的），且继承优先级最低

一般情况下，我们一般不会操作!important（除非你绝对确定他使用这个属性），且也要注意，加上了!important就不是一个优先级了，自然不会考虑层叠性（同一个优先级才会考虑层叠性，否则只考虑优先级）

这里说明一下一个细节：

但是这里还有个问题，如果css最后使用，那么上面的嵌套div都会进行操作，你可能会认为会浪费很多的性能，实际上并不会的，因为他是一个减1数列，而不是一个组合，因为从外到里的，所以性能还是好的

现在我们来下载一个东西，PxCook：

链接：https://pan.baidu.com/s/1zHneicPR7RH7LegjwHlZGQ

提取码：alsk

运行，自己操作进入后，若出现如下：

说明操作完成，然后点击创建项目，到如下：

点击创建本地项目，到如下：

看到这个我们选择拖进一个图片，然后双击图片，比如我到这里：

看到左边的尺子和一个类似的吸管没有，你试着用一用这些，其他选项自己测试

比如：

如果是psd（一般是ps操作的），那么可以出现上面的情况，png等等图片不会出现哦

操作这个，我们就很容易的复刻对应的信息到网页上（大概即可，并不需要非常精确，如你量的时候是29px或者28px，你可以给30px），具体的作用可以自行体会

现在开始操作盒子模型：

练练手：

多出的s使得变成4行，那么其他元素对齐下面的三行，即向下了

很明显，上面不能满足多个数的情况，修改如下：

还要记得，html也是标签，自然也存在样式，只是我们大多数操作body的，所以body有些多出的（看到上面还是有点距离是正常的）操作可能与html有关，具体可以百度html对body的默认影响

一般情况下，我们会这样的操作：

当然，有些情况我们也会将*修改成所有对应需要清除默认对应样式的标签，比如（给出部分）：

我们可以去掉对应列表的序号，那么这样他们就都以数为主了：

其中，我们知道有些标签是占一行的，但是这个占一行只是内容的一行而不是元素的一行，所以，内边距是会操作的

结构伪类选择器：

当然，这些说明你可能并不完全理解，在后面说明缺陷时会进行额外的说明的

实际上，上面的数字中是可以给出公式的，比如：

注意：上面并没有说明li:nth-child(n)的一个缺陷，比如：

现在我们对该选择器的说明进行再次的给出E:nth-child(n)的解释："匹配父元素中第n个子元素，并且是E元素"，这里的E元素就是li

那么这个父元素代表什么，这里是有细节的，实际上代表在"匹配时的父元素"，什么意思呢，看如下：

由于有上面的缺陷说明，所以为了解决这样的问题，我们会给出一个样式：

伪元素（由 CSS 模拟出的标签效果，伪元素默认是行内元素，可没有说明行内样式哦，优先级与伪类一样）：

又称文档流（前面有说明），是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素，或者说是默认按照display的排版（他可不只是有宽高的属性操作）来操作

常见标准流排版规则：

1：块级元素：从上往下，垂直布局，独占一行

2：行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

但是无论是文档流还是脱离文档流，浏览器都可以获取，只是他们之间不能互相获取而已（除了特别的，如浮动，可以操作宽），因为他们只是代表排版而已，而不是代表所有的情况，所以js都可以操作他们的属性

你可以发现，我们没有写margin（并且计算样式里面也没有），但是对应既然有间距（虽然前面的相关测试中，你可能也注意到了），这是一个问题，这个问题的出现是因为上面的div没有在同一行写，你试着写成这样：

可以发现，没有间隔了，这是因为行内块和行内是在一行添加的，自然回车也算空格的（前面也说明），因为既然是没有换行，那么相当于单纯的写，你可以操作这样就知道了：

这里也可以这样（看看先后，可以试着缩小窗口，来看看换行，宽度是操作的）：

而由于只是宽度占用，高度不占用，所以会出现如下：

简单来说，脱离文档流就是按照他自己的想法操作，并占用文本显示宽度，那么前面说明的宽度就是这个，即排版固定，但是内容不一定了，也就是为什么没有宽度塌陷，这是浮动的操作方式

总结浮动的特点：

2：浮动元素（正常的脱标也是）比标准流（无论你怎么设置z-index，都是大于标准流，只要是标准流，级别就是比你高）高半个级别，可以覆盖标准流中的元素

3：浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

5：浮动是操作在父元素下的，而不是全局（或者说一直是body）

实际上浮动可以这样的认为，无视浮动的元素，只看他的宽，慢慢移动吧，所以浮动所占的父元素若没有宽，那么就以其父为浮动对象，以此类推

大多数浮动是为了解决排版，即解决前面的两个div中间的空格的出现（一般换行后，上下没有间隙（或空格））

这个说明一个地方：

简单来说，只要操作了文档流获取脱离的浮动，那么就会得不到，如果不是通过文档流操作的，那么就可以直接得到

而文档流更加详细的就是（正常说明的脱离文档流，而不是浮动这个特殊情况）：

而由于浮动比较特殊，所以一般存在清除浮动的方法：

1：直接设置父元素高度，既然我得不到你的高度，那么我自己设置

3：可以使用伪元素：

而正是因为这样，所以有时候操作伪元素时，我们一般会这样的操作：

优先级公式：继承（默认一般比他继承要小，但是有些比继承大）< 通配符选择器（*） < 标签选择器（@import最低） < 类选择器（class） < id选择器（id） < 行内样式（标签里面的style） < !important

2：行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

1：可以让原本垂直布局的块级元素变成水平布局

2：一般用于盒子之间的层叠情况

选取的原则一般是就近原则（离哪边近用哪个）