H5学习之单位 - 会coding的HAM

各种css常用单位：
<html>
<head>
    <meta charset="UTF-8">
    <title>单位</title>
    <style>
        body{
            font-size: 30px;
        }
        p{
            /*缩进2个字符*/
            text-indent: 2em;
            /*font-variant 小型大写字母 中文没有作用 也不用它*/
            /*font-variant: small-caps;*/

            /*text-transform 属性控制文本的大小写 */
            /*text-transform: capitalize;*/
        }
        hr{
            border: 3px solid red;
        }
        hr:nth-child(1){
            width: 5px;
        }
        hr:nth-child(2){
            width: 5mm;
            /*打印时使用*/
        }
        hr:nth-child(3){
            width: 5cm;
        }
        hr:nth-child(4){
            width: 5in;
            /*英寸 1英寸等于2.54cm 打印时使用*/
        }
        hr:nth-child(5){
            width: 5pt;
            /*磅 1/72英寸 打印时使用 表示文字大小 印刷专业用的单位*/
        }
        hr:nth-child(6){
            width: 5%;
            /*适配多种尺寸的屏幕时常用*/
        }
        hr:nth-child(7){
            width: 5em;
            /*1em 当前字体的一个字符的大小
              适配多种尺寸的屏幕时常用
              更常用的是 rem 
              因为em是相对于容器的 会继承的
              rem是相对于html的根元素*/
        }
        hr:nth-child(8){
            width: 5ex;
            /*当前字体中x字母的大小
              中文环境下基本不用*/
        }
    </style>
<body>
    <!--<p>这两天真热 hot HOT</p>-->
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
</body>
</html>
发送评论编辑评论
发送评论 编辑评论

推荐文章

发送评论编辑评论
