CSS 基础知识 2

属性值简写

padding 和 marigin 是看不到的，border 可以设置样式和颜色
padding、margin 的缩写

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性值简写</title>
    <style>
        h2 {
            background-color: grey;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            /* 值：上 右 下 左，顺时针 */
            /* padding和marigin是看不到的，border可以设置样式和颜色 */
            padding: 10px 20px 20px 30px;
            border: black solid 5px;
            margin: 20px 20px 20px 20px;
        }
        .box {
            /* 第二个值代表左右 */
            padding: 10px 20px 30px;
            padding: 10px 30px;
        }
    </style>
</head>
<body>
    <h2>php.cn</h2>
    <div class="box"></div>
</body>
</html>

em 介绍

1em 等于浏览器默认 font-size 例如 16px
em 在嵌套标签中，如果是父子关系，会受到影响，成倍递增或减少

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em介绍</title>
    <style>
        /* 1em等于浏览器默认font-size 例如16px */
        ul {
            font-size: 0.9em;
        }
        p {
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <!-- 1、ul和li属于有父子关系，所以会成倍缩放 -->
    <ul>
        <li>item1</li>
        <ul>
            <li>item2</li>
        </ul>
    </ul>
    <!-- 2、非父标签，不会缩小 -->
    <p>itme3 <p>item4</p> </p>
</body>
</html>

rem 设置

rem（reset em），意思重置 em
重置 em 后，后续使用 rem 来表示大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem设置</title>
    <style>
        /* rem 我理解的字面意思是reset em */
        html {
            /*
            1.默认1em=16px
            2.当前重置了html的根元素em实际值10px：16*0.625=10px
            */
            font-size: 0.625em;
        }
        /*
            使用:root，可以应用与html，xhtml，意思就是根元素
          */
        :root {
            font-size: 0.625em;
        }
        p {
            /* 1.8rem = 重置后的1em*1.8=1.8*10px=18px */
            font-size: 1.8rem;
        }
    </style>
</head>
<body>
    <p>你好rem</p>
</body>
</html>