css中单位的使用
css中許多的屬性都需要添加長(zhǎng)度，而長(zhǎng)度一般由數(shù)字和單位構(gòu)成，如1px,1.5em,2vh；也可以省略單位，如line-height:1.5,表示行高為字體大小的1.5倍；
長(zhǎng)度單位一般也分為相對(duì)長(zhǎng)度和絕對(duì)長(zhǎng)度。
（一）絕對(duì)長(zhǎng)度
? 顧名思義指的是一個(gè)固定的值，它并不隨著外部環(huán)境的改變而改變（屏幕大小，操作系統(tǒng)的不同）；
? ? ?絕對(duì)單位中最常用的是px，像素單位，如width:10px,值的是元素寬度為10個(gè)像素大小；其他的如cm(厘米)、mm(毫米)、in(英寸)則基本上不會(huì)用到，因?yàn)樵诠潭ǖ脑O(shè)備上計(jì)算最好的單位還是px(像素)。
（二）相對(duì)長(zhǎng)度
? ? ? 相對(duì)指的是要倆事物做對(duì)比，即拿一個(gè)長(zhǎng)度找另一個(gè)基準(zhǔn)長(zhǎng)度作為參照，進(jìn)行對(duì)比；對(duì)于在不同的設(shè)備上使用時(shí)，相對(duì)長(zhǎng)度還是更合適用的，常用的相對(duì)長(zhǎng)度單位有：em、ex、ch（相對(duì)于數(shù)字0的寬度）、rem（相對(duì)于html元素的font-size）、vw、vh、vmin、vmax、%。
1、em
em指的是相對(duì)于所在元素字體大小的長(zhǎng)度單位
<!doctype html><html>
<head>
<style>
.wrap{font-size:50px;width:2em;height:2em;}
.box{font-size:20px;width:2em;height:2em;}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
</div>
</div>
</body>
</html>
效果如下：
從圖中可以看出：當(dāng)類(lèi)名為wrap的盒子字體大小為50px的時(shí)候，則其寬度為2em=2×50px=100px；同理當(dāng)類(lèi)名為box的盒子字體大小為20px的時(shí)候，則其寬度為2em=2×20px=40px；
說(shuō)明：rem相對(duì)的是html根元素的字體大小，其他和em用法是一樣的；
2、ex
ex指的是相對(duì)于英文字母小x的高度
<!doctype html> <html><head><style>.wrap{font-size:50px;width:2ex;height:2ex;background:yellow;}.box{font-size:20px;width:2ex;height:2ex;background:red;}</style></head><body><div class="wrap"><div class="box"></div></div></body> </html>效果如下：
從圖中可以看出：當(dāng)類(lèi)名為wrap的盒子字體大小為50px的時(shí)候，則其寬度為2ex=2×50px×0.54=54px；同理當(dāng)類(lèi)名為box的盒子字體大小為20px的時(shí)候，則其寬度為2ex=2×20px×0.54=21.6px；當(dāng)1ex相當(dāng)于當(dāng)前元素字體大小的0.54倍。
說(shuō)明：ch指的是相對(duì)于數(shù)字0的寬度。
3、vw、vh
vw指的是相對(duì)于瀏覽器窗口的寬度，1vw=視窗寬度的1%；vh指的是相對(duì)于瀏覽器窗口的高度，1vh=視窗高度的1%。
<!doctype html> <html><head><style>.wrap{width:10vw;height:10vh;background:yellow;}</style></head><body><div class="wrap"></div></body> </html>效果如下：
?
從圖中可以看出：當(dāng)窗口寬度為1365px時(shí)，?類(lèi)名為wrap的盒子其寬度為10×1÷100×1365px=136.5px；當(dāng)窗口高度為292px時(shí)，?類(lèi)名為wrap的盒子其高度為10×1÷100×292px=29.2px；? ?
4、vmin、vmax
vmin指的是相對(duì)于vw和vh中較小的那個(gè)，vmax指的是相對(duì)于vw和vh中較大的那個(gè)。
<!doctype html> <html><head><style>.wrap{width:10vmax;height:10vmax;background:yellow;}.box{width:10vmin;height:10vmin;background:red;}</style></head><body><div class="wrap"><div class="box"> </div></div></body> </html>效果如下：
從圖中可以看出：當(dāng)類(lèi)名為wrap的盒子其寬度為vmax，單位取vw，寬度為10×1÷100×1365px=136.5px；?類(lèi)名為box的盒子其寬度為vmin，單位取vh，寬度為10×1÷100×292px=29.2px；?
5、%?
指的是相對(duì)于父級(jí)元素的長(zhǎng)度的百分比。
?
<!doctype html> <html><head><style>.wrap{width:400px;height:200px;background:yellow;}.wrap .box{width:25%;height:100%;background:red;}</style></head><body><div class="wrap"><div class="box"> </div></div></body> </html>?
效果如下：
?
?
?
從圖中可以看出：當(dāng)類(lèi)名為wrap的父類(lèi)盒子其寬度為400px,高度為200px時(shí)；?類(lèi)名為box的子類(lèi)盒子其寬度為25%×400px=100px,?高度為100%×200px=200px。
更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇： vue-cli安装步骤
- 下一篇： 限制input 内部字数