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