1. box-sizing属性解决了什么问题

答案；通过box- sizing属性来指定内容区的边界在哪里

伪类选择器的参数 an+b的经典应用场景,实例演示

<!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>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>
    <style>
      /*:nth-0f-type(参数)*/
      /*大参数=an+ba,n,b=[0,1,2,3,4,..]*/
      /*a:系数，  n：计算器乘,   b:偏移量*/
      /*元素的有效编号: 必须从1开始,n是从0开始,b也是从0开始*/
      /* nth-of-type(3)     h-of-type(on+3)*/
      .list > :nth-of-type(0n + 3) {
        /*   background-color: darkkhaki;   */
      }
      /*     1n+b:   */
      .list > :nth-of-type(1n + 3) {
        /*    background-color: red;  */
      }
      /*k10+3=3*/
      /*1*1+3=4*/
      /*1*2+3=5*/
      /*大因为1乘任何数都不变,所以1可以不写*/
      .list > :nth-of-type(n + 3) {
        /*   background-color: rebeccapurple;*/
      }
      /*匹配所有的偶数元素*/
      /*.list > :nth-of-type(2n) {
        background-color: rebeccapurple;
      }*/
      /*    even表示偶数
      .list > :nth-of-type(even) {
        background-color: rebeccapurple;
      }*/
      /* 2 * 1 = 2     2*2 =  4          */
      /*奇数
      .list > :nth-of-type(2n + 1) {
        background-color: rebeccapurple;
      }*/
      /*.list > :nth-of-type(odd) {
        background-color: rebeccapurple;
      }*/
      /*前三个*/
      .list > :nth-of-type(-n + 3) {
        background-color: rebeccapurple;
      }
      /*-1*0+3=3
        1*1+3=2
        1*2+3=1
        1*3+3=0(非法索引,匹配就结束了)*/
      /*后三个*/
      .list > :nth-last-of-type(-n + 3) {
        background-color: rebeccapurple;
      }
      /*大总结一下
        1.获取指定的某一个:(
        2,获取前几个,(n-b)
        3.获取指定位置后的全部元素,(n+b)
        4.获取全部偶数(2n/even)或奇数(2n+1/0dd)元素*/
      html {
        background-color: royalblue;
      }
      /*:root  = html */
      :root {
        background-color: saddlebrown;
      }
    </style>
    <input type="text" />
    <input type="text" disabled />
    <style>
      input:disabled {
        background-color: red;
      }
      input:enabled {
        background-color: royalblue;
      }
    </style>
  </body>
</html>

. 媒体查询移动优先与PC优先的区别与联系,实例演示

/* 我只要动态的改变rem的大小，就可以动态的调整每个按钮的大小 */
      /* 移动优先，从最小的屏幕开始进行媒体查询 */
      /*  @media (min-width：480px) {
        html {
          font-size: 12px;
        }
      }
      @media (min-width：640px) {
        html {
          font-size: 14px;
        }
      }
      @media (min-width：720px) {
        html {
          font-size: 16px;
        }
      }*/
      /* 桌面优先/pc优先 由大屏到小屏幕 */
      @media (max-width：720px) {
        html {
          font-size: 16px;
        }
      }
      @media (min-width：640px) {
        html {
          font-size: 14px;
        }
      }
      @media (min-width：480px) {
        html {
          font-size: 12px;
        }
      }
      @media (min-width：720px) {
        html {
          font-size: 16px;
        }
      }

1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经典应用场景,实例演示，3. 媒体查询移动优先与PC优先的区别与联系,实例演示

1. box-sizing属性解决了什么问题

伪类选择器的参数 an+b的经典应用场景,实例演示

. 媒体查询移动优先与PC优先的区别与联系,实例演示

更多相关文章

随机推荐