CSS 之盒模型属性简写与em、rem的应用场景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>盒模型属性简写与em、rem的应用场景</title>
        <style type="text/css">
            :root {
                font-size: 0.625em;
            }
            body {
                background-color: #E0FFFF;
            }
            .ceshi {
                width: 460px;
                height: 500px;
                font-size: 2.8rem;
                color: #aa00ff;
                text-align: center;
                margin: 3em 2.5em;
                padding: 2em 3em 1.5em;
                border: 1px solid #4169E1;
                border-radius: 10px;
                background-color: #00aaff;
            }
            p {
                font-size: 1.8rem;
                text-align: left;
                color: #d145d1;
            }
            span {
                color: #ff557f;
                font-size: 2.2rem;
            }
        </style>
    </head>
    <body>
        <div class="ceshi">盒模型属性简写<br>与em、rem的应用场景
            <hr>
            <p>
                <span>1.盒模型中的属性简写</span><br>
                当值四个时, 按顺时针排列 <br>
                当值只有三个时,第一个上, 第二个表示左右, 第三个表示下 <br>
                当值只有二个时,第一个表示上下, 第二个表示左右 <br>
                当值只有二一个时，表示四周都相同 <br>
            </p>
            <p>
                <span>2.em </span><br>
                当前字号的相对单位<br>
                用在 padding,margin, border-radius,用 em 比较合适<br>
                px 通常用在边框上<br>
            </p>
            <p>
                <span>3.rem</span><br>
                根元素字体大小<br>
                用它做为字号的单位比较合适
        </div>
        </p>
    </body>
</html>

效果图：

批改老师：

天蓬老师

批改状态：合格

老师批语：rem用在字号上比较多

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

001.markdown 常用语法及 html 的标签与属性之结构元素

2020-09-30 12:46:26