第四课 box-sizing、伪类、媒体查询移动和PC优先的区别？

1. box-sizing属性解决了什么问题?实例演示

box-sizing属性把CSS中的宽度和高度定义包含padding，border的宽度；原内容自动收缩，实得width=内容宽度+padding+border（高度类似）。

演示代码

box-sizing = border-box；

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

:nth-of-type(an+b)
a:系数，n：计算器，从0开始，b：偏移量，从0开始。编号必须从1开始.

列子

1. :nth-of-type(3) == :nth-of-type(0n+3)
   计算：0X0+3 = 3
2. li:nth-of-type(1n+3) == li:nth-of-type(3) ~ li；
   计算：1X 0 + 3 = 3;1X1 + 3 = 4;1X2 + 3 = 5;
3. :nth-of-type(2n)
   表示偶数；2n+1表示奇数。

   因为1乘以任何数为任何数，可以省略。

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

• 区别？

  演示代码

  • 待添加学习

  4.常用单位

  1. px ：绝对属性
  2. em ：与字号相关 1em = 16 px；与当前或父级的font-size绑定（默认16px）。

  3. rem：与字号相关，引用根元素的font-size。

     ：root{
     font-size = 10 px;
     }
     .box{
     width = 10rem;
     }
     说明： width = 10 * 10 =100px
  4. vx 与 vh ：类似于%号，用于现实比例。