css布局常用单位/表格样式/字体图标及媒体查询

css布局常用单位

1.绝对单位：像素px,1in=96px(in表示英寸)
2.相对单位：需有参照物
2.1“%”：参照父级
2.2”em“:字号大小font-size，参照浏览器（默认16px=1em）,em是一个变量，受自身或父级影响
2.3“rem”:以根元素字号为参照物
2.4”vw“:view-width,可视窗口的宽度
2.5“vh”:view-height,可视窗口的高度
可视窗口：眼睛能看到的窗口大小，简称：视口view-port
1vw=100vw/100，将视口宽度分为100份
1vh=100vh/100，将视口高度分为100份

表格中常用的样式

1.添加表格线：一定要添加到单元格中（td/th）
table td,table th{border: 1px solid #000;}

2.折叠表格线
table{border-collapse: collapse;}

3.表格布局设置

table{
    width: 90%;
    /* 块级元素在父级中的居中 */
    margin: auto;
    /* 文本水平居中 */
    text-align: center;
}
/* 标题设置 */
table caption{
    font-size: 1.2em;
    margin-bottom: 0.6em;
}
/* 第一行背景色 */
table thead{
    background-color: lightcyan;
}
/* 第一列背景 */
/* 使用not，取反的伪类 */
table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
    background-color: lightgreen;
}

https://www.php.cn/code/51198.html

字体图标

建议使用自定义样式库，不要使用官方库
使用@import导入

https://www.php.cn/code/51199.html

媒体查询

查询：获取媒体当前状态，使用@media
1.移动优先（从最小屏适配）
断点：375/414，由小到大

<style>
    html{
        font-size: 10px;
    }
    .btn{
        background-color: aliceblue;
    }
    @media (max-width:374px){
        html{
        font-size: 12px;
        }
    }
    @media (min-width:375px) and (max-width:413px) {
        html{
        font-size: 14px;
        }
    }
    @media (min-width:) {
        html{
        font-size: 16px;
        }
    }
</style>

2.pc优先（从最大屏适配）

<style>
    html{
        font-size: 10px;
    }
    .btn{
        background-color: aliceblue;
    }
    @media (min-width:1200px){
        html{
        font-size: 20px;
        }
    }
    @media (max-width:1199px) and (min-width:1024px) {
        html{
        font-size: 18px;
        }
    }
    @media (max-width:1023px) and (min-width:768px) {
        html{
        font-size: 16px;
        }
    }
    @media (max-width:767px) and (min-width:600px) {
        html{
        font-size: 14px;
        }
    }
    @media (max-width:599px) {
        html{
        font-size: 12px;
        }
    }
</style>