CSS伪类选择器，引入字体图标，盒模型以及em和rem的区别

伪类选择器

权重同class一样

结构伪类：根据元素位置获取元素

1. :first-of-type 获取第一个
   例：获取class为“list”的第一个子元素
   .list > item:first-of-type

2. :last-of-type 获取最后一个
   例：获取class为“list”的最后一个子元素
   .list >item:first-of-type

3. :nth-of-type(n) 获取任意一个
   n为几就获取第几个元素
   例：获取class为“list”的第3个子元素
   .list >item:nth-of-type(3)

4. :nth-last-of-type(n) 获取倒数第几个元素
   n为几就获取倒数第几个元素
   例：获取class为“list”的倒数第2个子元素
   .list >item:nth－last-of-type(2)

伪类选择器的参数

:nth-of-type(an+b)
参数说明

参数	说明	取值
a	系数	从0开始
n		从0开始
b	偏移量	从0开始

1. 当a=0时，an+b=b，即偏移量是几就匹配第几个元素，属于单个元素匹配。

2. 当a=1时，an+b=n+b，即取偏移量及之后的所有元素。
   例:.lsit > item:nth-of-type(n+2) 就是取第2个及之后的所有元素。

3. 当a=-1时，an+b=-n+b，即取偏移量及之前的所有元素。
   例：.list > item:nth-of-type(-n+3) 即取前3个元素

4. 当a=-1时，:nth-last-of-type(-n+b) 为取倒数几个元素。
   例：.list > item:nth-last-of-type(-n+3) 即取后3个元素

5.当an+b=2n+1时，为取奇数位的元素1,3,5,7,9…,可以简化为 “odd” 即： .list > item:nth-of-type(odd)

6.当an+b=2n时，为取偶数位的元素，2,4,6,8,10…,可以简化为 “even” 即：.list > item:nth-of-type(even)

引入字体图标的详细步骤

以引入阿里图标库为例：
第1步：将图标添加到购物车－下载代码
第2步：将代码解压复制到项目目录中，在项目中引入CSS文件
第3步：在元素中引入图标样式
例：```html
<span class="iconfont icon-shezhi"></span>

![](https://img.php.cn/upload/image/112/954/964/1641217831146287.jpg)
# 盒模型的5个属性
#### `box-sizing:` 值有两个：
1. border-box：边框、内边距和外边距都计算在width/height内，不会把盒子撑开。
2. content-box：边框、内外边距单独存在，会把盒子撑开。导致盒子整体的宽度和高度会变大。
#### 五个属性：
1. width 宽度
2. height 高度
3. padding 内边距
4. margin 外边距
5. border 边框
#### box-sizing两个取值的差异：
1. border-box:
```html
        .box {
            width: 20em;
            height: 20em;
            background-color: aquamarine;
            border: 5px solid red;
            box-sizing: border-box;
            padding: 3em;
            overflow: hidden;
        }

通过上图可以看出，box并没有被撑大，而是把内容区域缩小了。

1. content-box:

        .box {
            width: 20em;
            height: 20em;
            background-color: aquamarine;
            border: 5px solid red;
            box-sizing: content-box;
            padding: 3em;
            overflow: hidden;
        }

   
   
   通过上图可以看出，box内容区域并没有变化，但是，边框内边距把box整体撑开了。

em , rem的区别

• em与当前元素或父元素的font-size绑定

• rem只与html(根元素)的font-size绑定

    <style>
       html {
           font-size: 20px;
       }
       .box {
           font-size: 16px;
       }
       .item {
           font-size: 2em;
       }
       .item2 {
           font-size: 2rem;
       }
   </style>
   <div class="box">
       <div class="item">
           PHP.cn中文网
       </div>
       <div class="item2">
           PHP.cn中文网
       </div>
   </div>

  
  
  
  通过上图可以看出，类为item的元素，字体为2em,与其父元素的font-size:16绑定，结果为32px;类为item2的元素，字体为2rem，与html的font-size:20px绑定，结果为40px。