css 寬高設定

1.em

在做手機端的時候經常會用到的做字型的尺寸單位

說白了 em就相當於「倍」，比如設定當前的div的字型大小為1.5em，則當前的div的字型大小為：當前div繼承的字型大小*1.5

但是當div進行巢狀的時候，em始終是按照當前div繼承的字型大小來縮放，參照後面的例子。

2.rem

這裡的r就是root的意思，意思是相對於根節點來進行縮放，當有巢狀關係的時候，巢狀關係的元素的字型大小始終按照根節點的字型大小進行縮放。

3.vh

vh就是當前螢幕可見高度的1%，也就是說

height:100vh == height:100%;

但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，

但是設定height:100vh，該元素會被撐開螢幕高度一致。

4.vw

vw就是當前螢幕寬度的1%

補充一句，當設定width:100%，被設定元素的寬度是按照父元素的寬度來設定，

但是100vw是相對於螢幕可見寬度來設定的，所以會出現50vw 比50%大的情況

5.100%

按照父節點的寬高設定比例 當高度為100% 當元素沒有內容時候，設定height:100%該元素不會被撐開

6.當頁面區域中含有百分比 rem px時計算

使用calc() 函式計算

例如乙個div高度為100% 乙個子div高度為10rem border為4px 另乙個子div高度應該是 height:calc( 100%-10rem-8px )

設定相容

height: 800px; /* 有些瀏覽器不支援給個預設值 */

height: -moz-calc( 100%-10rem-8px );
height: -webkit-calc( 100%-10rem-8px );
height: calc( 100%-10rem-8px );

CSS未知DOM寬高設定居中

常規的面試問 不知道寬高的情況下如何實現垂直居中，今天我們討論乙個比較複雜的場景，同樣是不知道寬高，而且 還要限制最大寬高邊界，比如頭像，要求上傳的頭像沒有最小寬高限制，但是有最大寬高限制，還要實現上下左右自適應居中，類似於img標籤的background屬性，當然如果你真的是img的話也可以使用 ...

PopWindow設定合適寬高

popwindow設定寬高有幾種方法，第一種 wrapcontent，matchparent，或自己設定乙個值 這個定值不建議設，應為考慮到裝置的適配問題，如果單一裝置就可以這樣 第二種 可以根據螢幕的寬高比例設定 第三種 可以通過view root view findviewbyid r.id.x...

設定dialog寬高方法

windowmanager.layoutparams params show.getwindow getattributes getmetricswidth context 得到螢幕寬度 params.width getmetricswidth context 17 20 設定dialog寬度，高度...