## CSS中有哪些單位 **考察點** 1. CSS中有哪些單位 2. 各個單位的作用和區別，特別是在響應式布局中的作用 **回答** 1. 像素`px`, 百分比`%`, 當前字體大小`em`, 相對根節點html的字體大小`rem`, 磅`pt`, 毫米`mm`, 厘米`cm`, 英寸`in`, 12 點活字`pc` , CSS3中新增單位`vw`,`vh`, `vmin`, `vmax`。 | 屬性/單位 |% |em |rem |vw/vh |vmax/vmin |px/pt /cm/mm /in/pc| | --- | --- | --- | --- | --- | --- | --- | |width |父容器寬度的百分比 | 當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 | 具體值：px=像素， pt=1/72英寸， cm=厘米，mm=毫米， in=英寸, pc=1/6英寸| |height |父容器高度的百分比 | 當前元素font-size的倍數 |相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |padding |父容器寬度的百分比 | 當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |margin |父容器寬度的百分比 | 當前元素font-size的倍數 |相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |font-size | 父容器字體大小的百分比 |父容器font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 | 具體值 | |left/right/top/bottom |父容器寬度/高度的百分比 | 當前元素font-size的倍數 |相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |border-width | N/A | 當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |border-radius |當前元素寬度/高度的百分比 | 當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |box-shadow |N/A |當前元素font-size的倍數 |相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 | 具體值| |transform | 當前元素寬度/高度的百分比 |當前元素font-size的倍數 |相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 | |background-size |當前元素的寬度/高度的百分比 |當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 | 具體值 | |background-position |當前元素的寬度/高度的百分比 | 當前元素font-size的倍數 | 相對于根元素(即html元素)font-size計算值的倍數 | 相對于視窗的寬度/高度：視窗寬度是100vw , 高度是100vh | vmin是vw和vh中較小的那個, vmax是vw和vh中較大的那個 |具體值 |