css伪类选择器，字体图标，盒模型及自适应布局

一、css伪类选择器

1、伪类分类：
- 结构伪类：跟进元素位置获取元素
- 状态伪类：跟进状态来获取元素
2、常用伪类选择器
nth-of-type()正数
nth-last-of-type() 倒数
3、nth-of-type(an+b)使用
a：系数，取值范围[0,1,2,3,4,…]
n：权数，取值范围[0,1,2,3,4,…]
b：偏移量，从0开始计算。
注意：计算出来的索引必须有效，不可以越界。
选择元素的2中情况：
- 匹配单个元素：a=0;
  li>:nth-of-type(0n+3) 相当于：li>:nth-of-type(3),只匹配第三条元素；
- 匹配一组元素：
  当a=1，b=3时，li>:nth-of-type(1n+3)，匹配。
  n:从0开始取，n+3匹配的全过程：
  1、n=0：an+b=3，选择第3条元素。
  2、n=1：an+b=4，选择第4条元素。
  3、n=2：an+b=5，选择第5条元素。
  4、n=3：an+b=6，选择第6条元素。
  5、n=4：an+b=7，选择第7条元素。
  6、n=5：an+b=8，选择第8条元素。
  7、n=6：an+b=9，索引越界，匹配失败，结束计算。
  n+3=>[3，4，5，6，7，8]，匹配到6个。
```
   <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>
    .list > :nth-of-type(n+3) {
      background-color: red;
    }
  </style>
```
```
   <style>
    .list > :nth-of-type(n) {
      background-color: red;
    }
  </style>
```
当a=2,b=0时，li>:nth-of-type(2n),匹配所有偶数元素。
奇偶也可以用下面方式表示：2n:even,2n+1:odd
```
   <style>
    .list > :nth-of-type(2n) {
      background-color: red;
    }
  </style>
```
当a=2,b=1时，li>:nth-of-type(2n+1)，匹配所有奇数元素。
```
   <style>
    .list > :nth-of-type(2n+1) {
      background-color: red;
    }
  </style>
```
当a=-1时，当前偏移量反向取。
```
   <style>
    .list > :nth-of-type(-n+3) {
      background-color: red;
    }
  </style>
```

伪类选择器	示例	作用
:first-of-type	li:first-of-type	选择作为其父的首个 <li> 元素的每个 <li> 元素。
:last-of-type	li:last-of-type	选择作为其父的最后一个 <li> 元素的每个 <li> 元素。
:nth-of-type(n)	li:nth-of-type(2)	选择作为其父的第二个<li>元素的每一个<li>元素
:nth-last-of-type(n)	li:nth-last-of-type(2))	倒数选择作为父的第二个<li>元素的每一个<li>元素
:hover	a:hover	选择鼠标悬停其上的链接
:active	a:active	选择活动的链接
:checked	input:checked	选择每个被选择的<input>元素
:disabled	input:disabled	选择每个被禁用的<input>元素
:focus	input:focus	选择获得焦点的<input>元素

二、字体图标

1、选择字体图标，建议选择阿里官方的图标库，免费且颜值高，网址：https://iconfont.cn/
2、选择并下载自己所需图标，添加至项目目录。也可以使用在线地址，直接引入项目。

3、按照演示说明，项目中引入图标。

<head>
<link rel="stylesheet" href="./1224/font_icon/iconfont.css" />
</head>
<body>
  <p>
    <span class="iconfont icon-shouye"></span>
  </p>
  <p>
    <span class="iconfont icon-shuaxin"></span>
  </p>
  <p>
    <span class="iconfont icon-sousuo"></span>
  </p>
  <style>
    .iconfont {
      font-size: 24px;
      color: red;
    }
  </style>

三、盒模型

盒模型的5个属性：
1、widte：宽度
2、height：高度
3、border：边框
4、padding：内边距,透明，只有宽度，用法：padding:上右下左
5、margin：外边距 margin:上右下左
padding/margin语法
四值语法：上右下左
三值语法：上左右下
双值语法：上下左右
单值语法：四个方向都一样。

box-sizing:border-box；用来改变盒子大小的计算方式，使用户设置的width,height就是盒子的实际大小，方便计算和布局。

<div class="box1"></div>
  <br />
  <div class="box2"></div>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      border: 10px dashed red;
      background-color: aqua;
      padding: 20px;
      background-clip: content-box;
    }
    .box2 {
      width: 200px;
      height: 200px;
      border: 10px dashed red;
      background-color: aqua;
      padding: 20px;
      background-clip: content-box;
      box-sizing: border-box;
  </style>

样式重置的简单方案：

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

四、em,rem的区别

常用单位：px;em,rem,vh,vw等
绝对单位，px：和设备相关，1英寸=96px;
相对单位：em,rem vh，vw
em:em=一个字号大小，即父级font-size。永远和当前或者父级的font-size进行绑定。可以动态调整元素大小。

rem:永远和html中的font-size进行绑定。不受当前字号及父级字号大小影响。

  <div class="box1"></div>
  <br />
  <div class="box2"></div>
  <style>
    html {
      font-size: 10px;
    }
    .box1 {
      font-size: 20px;
      width: 20em;
      height: 20em;
      background-color: aqua;
    }
    .box2 {
      width: 20rem;
      height: 20rem;
      background-color: aqua;
    }
  </style>

一、css伪类选择器

二、字体图标

三、盒模型

四、em,rem的区别

相关文章