css必知的常用单位，表格样式，字体图标，媒体查询 -

1.css必知的常用单位

1.绝对单位：

像素px，1ln = 96px
默认字号：16px；用1em表示，1em = 16px，2em = 32px；1ln = 96px 也就是说我们可以直接使用em来表示一个绝对值表示的字号，

2.相对单位：必须要有一个参照物

1.%：父级参照物
2.em：em字号大小，参照浏览器默认字号16px，
3.em受单前，或font-size影响
4.em也是一个变量，受自身或父级font-size影响
5.rem:与em概念一致，只不过它总是以<html>字号为参照物

>6.vw：view-width 可视窗口的宽度
7.vh：view-height 可视窗口的高度
可视窗口，眼睛能看到的窗口大小，简称：视口view-port
1vw = 100vw / 100  将视口宽度分为100分
1vh = 100vh / 100  将视口高度分为100分
会随着可视窗口的变大而变大，但只会占一半

2.表格样式，字体图标，媒体查询

折叠表格线：
```
table{
   border-collapse: collapse
}
```

浏览器自动计算，：auto，将左边尽量宽的空间给这个元素，

   }
        table{
            margin-left: auto;
        }

使表格居中，在给右边也给设置个auto，就能使表格句居中了

   }
        table{
            margin-left: auto;
            margin-right: auto;
        }
·或者简化一下： table{
                     margin: auto;
                 }

2.字体图标：

1.在字体图标网站上下载好是 Font class 的字体图标
2.然后将解压好的文件夹拖到 vscode 当中
3.引入字体图标库<link rel="stylesheet" href="font_3585681_d143jd452as/iconfont.css">

或是用自定义样式引用：新建文件style.css，在文件中引用 @import 'font_3585681_d143jd452as/iconfont.css';

3.媒体查询

1.响应式\移动端布局基础，媒体查询

媒体：屏幕，手机，打印机
查询：获取媒体当前状态
布局前提：用户在一个“宽度受限，而高度随内容增长的空间内，进行布局”

注：px像素不能用在媒体查询中,,,为了计算方便，设置根字号，把根字号设置为10px

大按钮：
.large{
  /*   font-size: 20px; */
    font-size: 2rem;
}

中按钮：
.middle{
/* font-size: 16px; */
font-size: 1.6rem;
}

小按钮：
.small{
   /*  font-size: 12px;  */
    /* px像素不能用在媒体查询中 */
    font-size: 1.2rem;
}

只要动态的设置根字号大小，就可以实现动态的改变页面的文本大小

1.移动优先：
代码演示：

 <style>
html{
        font-size: 10px;
    }
        .btn{
            background-color: seagreen;
            color:white;
            border: none;
            outline: none;
        }
.btn:hover{
cursor: pointer;
opacity: 0.8;
transform:0.3s;
}
.small{
   /*  font-size: 12px;  */
    /* px像素不能用在媒体查询中 */
    font-size: 1.2rem;
}
.middle{
/* font-size: 16px; */
font-size: 1.6rem;
}
.large{
  /*   font-size: 20px; */
    font-size: 2rem;
}
@media(max-width:374px) {
    html {
font-size: 12px;
    }
}
    @media(min-width: 375px) and (max-width: 413px) {
html{
font-size: 14px;
}
    }
@media(min-width:414px){
    html{
        font-size:16px;
    }
}
@media(min-width:600px){
    html{
        font-size:18px;
    }
}
</style>

实例图片展示：

课后小作业：pc优先

代码块演示：

    <style>
html{
    font-size: 10px;
}
.btn{
    background-color:blue;
    color: aliceblue;
    border: none;
    outline: none;
}
.btn:hover{
    cursor: pointer;
    opacity: 0.8;
    transform: 0.3s;
}
.xiao{
    font-size: 1.2rem;
}
.zhon{
    font-size: 2rem;
}
.da{
    font-size: 2.5rem;
}
@media(min-width:1000px){
    html{
        font-size: 2.5rem;
    }
}
@media(min-width:800px) and (max-width:999px){
    html{
        font-size: 2rem;
    }
}
@media(min-width:500px) and (max-width:799px){
    html{
        font-size: 1.5rem;
    }
}
@media(max-width:499px){
    html{
        font-size: 1.2rem;
    }
}
@media(max-width:200px){
    html{
        font-size: 1rem;
    }
}
 </style>

示例效果图：