细说伪类,盒模型,响应式布局

1. 实例演示课堂提及的伪类选择器, 将元素的匹配过程全部写下来;
   / 结构伪类选择器 /
   .list1 > :first-of-type {

    background-color: red;

   }

   .list1 > :last-of-type {

    background-color: blue;

   }

   .list2 > :nth-of-type(-n + 3) {

    background-color: cornflowerblue;

   }
   .list3 > :nth-of-type(2n + 1) {

    background-color: cornflowerblue;

   }

1. 写出引入字体图标的详细步骤,并演示
   <link rel="stylesheet" href="font_demo/iconfont.css" />
   <span class="iconfont icon-gouwuchekong"></span>

2. 演示盒模型的5个属性,并实例演示box-sizing的作用

   <div class="box1"></div>
   <div class="box2"></div>

   <style>
   .box1 {

   
    width: 160px;
    height: 300px;
    background-color: blue;
   
    border: 10px dashed currentColor;
    background-clip: content-box;
    padding: 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
   

   }

3. em , rem的区别, 实例演示
   em和当前或父级的字号绑定 1em=16px (默认)
   rem和html的字号绑定