CSS常用单位

px 像素

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t1{
        width: 1px;
    }
</style>

<section>
    <div id="t1"></div>
</section>

in 英寸

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t2{
        width: 1in;
    }
</style>

<section>
    <div id="t2"></div>
</section>

cm 厘米

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t3{
        width: 1cm;
    }
</style>

<section>
    <div id="t3"></div>
</section>

mm 毫米

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t4{
        width: 1mm;
    }
</style>

<section>
    <div id="t4"></div>
</section>

pt 磅

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t5{
        width: 1pt;
    }
</style>

<section>
    <div id="t5"></div>
</section>

pc 派卡

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t6{
        width: 1pc;
    }
</style>

<section>
    <div id="t6"></div>
</section>

em

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t7 > div{
        background-color: blue;
        font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
        width: 5em; /* 相对于元素本身 5 * 20px = 100px */
    }
</style>

<section class="except">
    <div id="t7">
        <div>文字</div>
    </div>
    <button onclick="emChange()">改变字体大小</button>
</section>

<script type="text/javascript">
    function emChange(){
        document.getElementById("t7").style["font-size"] = "20px";
    }
</script>

<section class="except" style="font-size: 10px;">
    <div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
        <div>Test</div>
        <div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
            <div>Test</div>
        </div>
    </div>
</section>

rem

<style type="text/css">
    html{
        font-size: 15px;
    }
    
    div{
        height: 30px;
        background-color: blue;
    }

    #t8 > div{
        background-color: blue;
        font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
        width: 6rem; /* 相对于根元素 6 * 15px = 90px */
    }
</style>

<section class="except">
    <div id="t8">
        <div>文字</div>
    </div>
    <button onclick="remChange()">改变字体大小</button>
</section>

<script type="text/javascript">
    function remChange(){
        document.getElementsByTagName("html")[0].style["font-size"] = "20px";
    }
</script>

<section class="except">
    <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
        <div>Test</div>
        <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
            <div>Test</div>
        </div>
    </div>
</section>

ex

<style type="text/css">
    #t9{
        font-size: 1ex;
    }
</style>

<section class="except">
    <div id="t9">文字</div>
    <span style="font-size: 1em">文字</span>
</section>

ch

<style type="text/css">
    #t10{
        font-size: 1ch;
    }
</style>

<section class="except">
    <div id="t10">文字</div>
    <span style="font-size: 1em">文字</span>
</section>

%

• 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
• 子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。
• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。
• 设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t11{
        width: 50%;
    }
</style>

<section>
    <div id="t11"></div>
</section>

vh vw vmin vmax

• vh: 相对于视窗的高度，1vh等于视窗高度的1%。
• vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。
• vmin: vw和vh中的较小值。
• vmax: vw和vh中的较大值。

<style type="text/css">
    div{
        height: 30px;
        background-color: blue;
    }

    #t12{
        background-color: #fff;
    }

    #t12 > div:nth-child(1){
        width: 50vh;
    }

    #t12 > div:nth-child(2){
        width: 50vw;
    }

    #t12 > div:nth-child(3){
        width: 50vmax;
    }

    #t12 > div:nth-child(4){
        width: 50vmin;
    }
</style>

<section class="">
    <div id="t12">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</section>

<!DOCTYPE html>
<html>
<head>
    <title>CSS单位</title>
    <style type="text/css">
        html{
            font-size: 15px;
        }

        section {
            margin: 10px 0;
        }

        div{
            height: 30px;
            background-color: blue;
        }

        .except div{
            height: auto;
            background-color: #fff;
        }

        #t1{
            width: 1px;
        }

        #t2{
            width: 1in;
        }

        #t3{
            width: 1cm;
        }

        #t4{
            width: 1mm;
        }

        #t5{
            width: 1pt;
        }

        #t6{
            width: 1pc;
        }

        #t7{
            background-color: #fff;
            font-size: 10px;
        }

        #t7 > div{
            background-color: blue;
            font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
            width: 5em; /* 相对于元素本身 5 * 20px = 100px */
        }

        #t8 > div{
            background-color: blue;
            font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
            width: 6rem; /* 相对于根元素 6 * 15px = 90px */
        }

        #t9{
            font-size: 1ex;
        }

        #t10{
            font-size: 1ch;
        }

        #t11{
            width: 50%;
        }

        #t12{
            background-color: #fff;
        }

        #t12 > div:nth-child(1){
            width: 50vh;
        }

        #t12 > div:nth-child(2){
            width: 50vw;
        }

        #t12 > div:nth-child(3){
            width: 50vmax;
        }

        #t12 > div:nth-child(4){
            width: 50vmin;
        }
    </style>
</head>
<body>
    <section>
        <div id="t1"></div>
    </section>

    <section>
        <div id="t2"></div>
    </section>

    <section>
        <div id="t3"></div>
    </section>

    <section>
        <div id="t4"></div>
    </section>

    <section>
        <div id="t5"></div>
    </section>

    <section>
        <div id="t6"></div>
    </section>

    <section class="except">
        <div id="t7">
            <div>文字</div>
        </div>
        <button onclick="emChange()">改变字体大小</button>
    </section>

    <section class="except" style="font-size: 10px;">
        <div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
            <div>Test</div>
            <div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
                <div>Test</div>
            </div>
        </div>
    </section>

    <section class="except">
        <div id="t8">
            <div>文字</div>
        </div>
        <button onclick="remChange()">改变字体大小</button>
    </section>

    <section class="except">
        <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
            <div>Test</div>
            <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
                <div>Test</div>
            </div>
        </div>
    </section>

    <section class="except">
        <div id="t9">文字</div>
        <span style="font-size: 1em">文字</span>
    </section>

    <section class="except">
        <div id="t10">文字</div>
        <span style="font-size: 1em">文字</span>
    </section>

    <section>
        <div id="t11"></div>
    </section>

    <section class="">
        <div id="t12">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>

</body>
<script type="text/javascript">
    function emChange(){
        document.getElementById("t7").style["font-size"] = "20px";
    }

    function remChange(){
        document.getElementsByTagName("html")[0].style["font-size"] = "20px";
    }
</script>
</html>

https://github.com/WindrunnerMax/EveryDay

https://www.jianshu.com/p/ebbf64b83f49
https://www.runoob.com/cssref/css-units.html
https://www.cnblogs.com/niuyaomin/p/12319211.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
https://www.cnblogs.com/liujunhang/articles/10686823.html
https://blog.csdn.net/VickyTsai/article/details/102960594
https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html