1，盒模型常用属性

盒模型


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型</title>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: violet;
            /* border: 10px solid black; */
            /* padding: 20px; */
            /* background-clip: content-box; */
            box-sizing: border-box;
        }
        /* 10px+20px+400px=430px+30=460px */
        /* 我的本意是想要得到一个400*400的盒子,但是最终计算结果却包括了内边距padding和边框border */
        /* 10+20=30 , 400-30=370 */
        /* 将左右多出来的padding,border全减去 */
        /* .box {
            width: 140px;
            height: 140px;
            background-color: violet;
            border: 10px solid black;
            padding: 20px;
            background-clip: content-box;
        } */
        .box {
            /* 四值:完整语法, 上向下左,顺时针方向 */
            padding: 5px 10px 15px 20px;
            padding: 5px 20px 15px 20px;
            /* 三值语法: 左右相等,而上下不等 */
            padding: 5px 20px 15px;
            /* 双值语法: 左右相同,上下也相同,但并不是同一个值*/
            padding: 15px 20px 15px 20px;
            padding: 15px 20px;
            /* 三值与双值的记忆方法: 第二个位置的值一定表示的是左右  */
            /* 单值: 四个方向全相同 */
            padding: 20px;
        }
        .box {
            /* 边框与padding,margin类似,但又有显著的不同, 因为边框是可见的 */
            /* border-right-width: 10px;
            border-right-style: solid;
            border-right-color: blue; */
            /* border-right: 10px solid blue;
            border-left: 10px solid blue;
            border-top: 10px solid blue;
            border-bottom: 10px solid blue; */
            border: 10px dashed blue;
        }
        .box {
            margin: 20px;
        }
        .box:last-of-type {
            background-color: red;
            margin-top: 50px;
            /* margin会在垂直方向出现折叠,谁大用谁的 */
        }
        /* 页面中所有元素,都是一个矩形块 */
        /* 矩形块在一个二维平面中,只有"垂直","水平"二种排列方式 */
        /* 与这种排列方式对应的,就只有二种元素类型: 块元素, 行内元素 */
        /* div: 块元素 */
    </style>
    <a href="">xxx</a>
    <a href="">yyy</a>
    <a href="">zzz</a>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <!-- 布局前提: 是在一个"宽度受限,而高度无限的空间内" -->
    <!-- 布局时,必须将width,height其中一个限制死,否则无法完成布局 -->
    <!-- 根据人类的观看习惯, 通常是将宽度限制,而高度随内容舒展 -->
</body>
</html>

2,媒体查询

媒体查询

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
</head>
<body>
    <!-- 媒体: 显示/输出信息的介质/载体, 屏幕, 打印机 -->
    <!-- 查询: 根据当前媒体宽度的变化来选择不同的页面或显示效果 -->
    <button class="btn samll">btn1</button>
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button>
</body>
<style>
    /* em: 默认元素字号,16px,  */
    /* rem: 根元素的字号, 16px */
    html {
        font-size: 10px;
        /* 1rem = 10px; */
    }
    /* 按钮基本样式 */
    .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
    }
    .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
        padding: 0.4rem 0.8rem;
    }
    .btn.small {
        /* font-size: 12px; */
        font-size: 1.2rem;
    }
    .btn.middle {
        /* font-size: 16px; */
        font-size: 1.6rem;
    }
    .btn.large {
        /* font-size: 18px; */
        font-size: 1.8rem;
    }
    /* 最大374px时生效,是不是当小于374px才有效果 */
    @media (max-width: 374px) {
        html {
            font-size: 12px;
        }
    }
    /* 374px - 414px 之间 */
    @media (min-width: 375px) and (max-width: 413px) {
        html {
            font-size: 14px;
        }
    }
    /* >414px 之间 */
    @media (min-width: 414px) {
        html {
            font-size: 16px;
        }
    }
    /* 以上是一个由小到大的匹配过程: 移动优先 */
    /* 以上是一个由大到小的匹配过程: PC优先 */
</style>
</html>

3，em,rem的用法和差别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用单位</title>
</head>
<body>
    <!-- px: 像素,绝对单位, 1in = 96px -->
    <!-- em,rem,vh,vw: 相对单位 -->
    <div>
        <span>Hello</span>
    </div>
    <style>
        html {
            font-size: 10px;
            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
            /* 因为一个页面,只有一个根元素, html  */
            /* 1rem = 10px */
        }
        div {
            /* font-size: 32px; */
            /* 1em = 16px */
            /* 32px = 2em */
            font-size: 3rem;
        }
        div span {
            /* font-size: 2em; */
            /* 2em = 2*16=32px */
            /* 但是 em在父元素中被重新定义了, 1em = 30px  */
            /* 2em = 60px */
            /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
            /* font-size: 20px; */
            font-size: 2rem;
        }
    </style>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

地图链接.内联框架

2021-03-22 16:29:03