css布局常用單位

1.絕對(duì)單位：像素px,1in=96px(in表示英寸)
2.相對(duì)單位：需有參照物
2.1“%”：參照父級(jí)
2.2”em“:字號(hào)大小font-size，參照瀏覽器（默認(rèn)16px=1em）,em是一個(gè)變量，受自身或父級(jí)影響
2.3“rem”:以根元素字號(hào)為參照物
2.4”vw“:view-width,可視窗口的寬度
2.5“vh”:view-height,可視窗口的高度
可視窗口：眼睛能看到的窗口大小，簡(jiǎn)稱(chēng)：視口view-port
1vw=100vw/100，將視口寬度分為100份
1vh=100vh/100，將視口高度分為100份

表格中常用的樣式

1.添加表格線(xiàn)：一定要添加到單元格中（td/th）
table td,table th{border: 1px solid #000;}

2.折疊表格線(xiàn)
table{border-collapse: collapse;}

3.表格布局設(shè)置

table{
    width: 90%;
    /* 塊級(jí)元素在父級(jí)中的居中 */
    margin: auto;
    /* 文本水平居中 */
    text-align: center;
}
/* 標(biāo)題設(shè)置 */
table caption{
    font-size: 1.2em;
    margin-bottom: 0.6em;
}
/* 第一行背景色 */
table thead{
    background-color: lightcyan;
}
/* 第一列背景 */
/* 使用not，取反的偽類(lèi) */
table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
    background-color: lightgreen;
}

http://ipnx.cn/code/51198.html

字體圖標(biāo)

建議使用自定義樣式庫(kù)，不要使用官方庫(kù)
使用@import導(dǎo)入

http://ipnx.cn/code/51199.html

媒體查詢(xún)

查詢(xún)：獲取媒體當(dāng)前狀態(tài)，使用@media
1.移動(dòng)優(yōu)先（從最小屏適配）
斷點(diǎn)：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優(yōu)先（從最大屏適配）

<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>

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：